表格是由行和列组成的结构化数据集合。HTML中的表格是一个极其常见且功能强大的元素,除了用来表示数据外,曾经也被广泛用于构建网页表格(现在已经被容器及CSS取代)。
HTML中的表格
在HTML中,每一个表格都需要包含在<table>
元素中。在表格中,最基本元素的就是一个单元格<td>
,它用于表示我们需要在表格中具体某个位置的数据。对于连续的多个单元格<td>
,它们将被显示在同一行中。为了将表格中的单元格区分为多行,就需要使用到<tr>
标签。<tr>
标签表示的是表格中的一行,它的内容为该行中的所有单元格,即一个或多个<td>
。
<table>
<tr>
<td>名字</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>35</td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
</tr>
</table>
上面的例子为一个列出了姓名和年龄的名单,但是它有个缺点是将表格的标题也表示为了一个普通的单元格。为了更好的区分标题与数据,我们可以使用<th>
标签代替标题行中的<td>
标签。
表格结构化
对于一个复杂的表格,我们可能需要引入一些其它的标签使其更具结构化。
<table>
<thead>
<tr>
<th>名字</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>35</td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总人数</th>
<td>2</td>
</tr>
</tfoot>
</table>
跨行与跨列
在使用表格时,经常会碰到需要跨行或跨列的情况。例如在制作Excel表格时,需要进行合并单元格进行跨行或跨列的合并。
在HTML中,同样也提供了跨行或跨列的功能。为了实现这个目的,我们需要使用到rowspan
与colspan
属性,它们分别代表跨行或跨列的数目。
<table>
<tr>
<th>名字</th>
<th>年龄</th>
<th>单位</th>
</tr>
<tr>
<td>张三</td>
<td>35</td>
<td rowspan="2">加利顿大学</td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
</tr>
</table>
表格的其它特性
表格标题
我们在使用表格时,经常会碰到需要为表格增加标题的需求,用于表示对表格内容的描述。这种情况下,我们可以使用<caption>
标签来表示表格的标题。在<table>
中使用<caption>
时,应该放置于<table>
开始标签的后面。
<table>
<caption>学生信息</caption>
<tr>
...
</tr>
</table>
表格嵌套
如同列表一样,表格也可以进行嵌套操作,只需要注意嵌套的表格结构完整即可。
<table>
<tr>
<td>
<table>
<!-- ... -->
</table>
</td>
</tr>
</table>