您的位置：首页 > Web前端 > HTML

HTML学习（九）——表格

2020-07-13 06:03 435 查看

<table></table>标签定义表格

<tr></tr>标签定义表格的行

<td></td>标签定义表格的格子

“boarder”属性定义表格的边框以及他的宽度

[code]<html>

<body>
<h4>一行三列：如果不定义边框属性表格就没有边框</h4>
<table >
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<h4>带有普通的边框：td标签是格子，tr标签是行</h4>
<table border="1">
<tr>
<td>First</td>

</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>带有粗的边框：</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>带有很粗的边框：</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

</body>
</html>

如果不希望有上述第二种表格的情况，最好加上一个空的<td></td>(或者添加&nbsp空格符)标签，让空的格子出来。

<th></th>标签定义表头标签

[code]<html>

<body>

<h4>表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>垂直的表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 855</td>
</tr>
</table>

</body>
</html>

<caption></caption>定义表格标题

[code]<html>

<body>

<h4>这个表格有一个标题，以及粗边框：</h4>

<table border="6">
<caption>我的表格</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>

<th></th>的colspan和rowspan属性定义跨列或者跨行的表格

[code]<html>

<body>

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航