HTML表格

表格是由行和列组成的结构化数据集合。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>

对于<tbody>，它总是包含在表格中，即使没有显式地被指定。

对于<tfoot>，即使它被放置于<thead>和<tbody>之间而非最后，它在显示时也会位于表格的最底部。

跨行与跨列

在使用表格时，经常会碰到需要跨行或跨列的情况。例如在制作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>

<caption>标签无论写在表格数据的前后，都会被视为表格的标题，并显示在表格的上方。

需要注意区分<caption>标题与<th>标题，它们代表的是不同的含义。

表格嵌套

如同列表一样，表格也可以进行嵌套操作，只需要注意嵌套的表格结构完整即可。

<table>
  <tr>
    <td>
      <table>
        <!-- ... -->
      </table>
    </td>
  </tr>
</table>

通常来说，不建议对表格进行嵌套操作，使得表格的结构过于复杂。

实际上，表格中的每个单元格可以放入任何你想要的元素，而不仅仅是嵌套另一张表格。

欢迎大家搜索关注我的公众号“风纸”，或是直接扫描下方二维码关注👇，也可以在微信上查看本文。