HTML 表格
- W_Z_C
- 共 660 字,阅读约 2 分钟
表格算是一种很古老的数据展示形式,HTML 提供几个专门构建表格的元素,你可以使用 table 元素创建表格,在其内部,可以使用 tr 元素创建行,td 元素创建列,还可以使用 th 创建表格标题。
在互联网早期的时候,表格布局风靡一时,不过现如今已经被淘汰了,表格元素基本上回归了本质,仅用来展示数据而已。
下面是最基本的表格代码:
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>
显示结果如下:
默认情况下表格不会显示边框效果,并且表格的单元格的大小刚好足以容纳单元格的内容。
合并单元格
如果你使用过 Execl 就知道合并单元格是表格的常见操作,在 HTML 中,你可是使用 rowspan 和 colspan 来完成类似的操作。
colspan 用于合并列:
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Carter</td>
<td>5550192</td>
<td>5550152</td>
</tr>
</table>
为了显示明显一点,我这里给表格增加了 1 像素的边框:
rowspan 用户合并列:
<table border="1">
<tr>
<th>Name:</th>
<td>John Carter</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
效果如下:
表格标题
你可以使用 caption 元素为表格添加指定的标题。该元素必须直接放置在 table 元素的开始元素之后,默认标题会显示在表格的顶部。
<table>
<caption>Users Info</caption>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>
效果如下:
表头、表尾和正文
除了上面的标签之外,HTML 还提供了一系列的标签 <thead>
、<tbody>
、<tfoot>
来结构化表格的内容。thead 标记表格的头部,常用于显示表格的标题,tbody 标记表格的正文,而 tfoot 标记表格尾部,常用于表格的汇总。
<table>
<thead>
<tr>
<th>Items</th>
<th scope="col">Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Donuts</th>
<td>3,000</td>
</tr>
<tr>
<th scope="row">Stationery</th>
<td>18,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Totals</th>
<td>21,000</td>
</tr>
</tfoot>
</table>
显示效果如下: