小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

什么是表格元素

为了可以在 HTML 页面中实现表格的效果，HTML 提供了一系列表格元素。根据表格中的一些概念，HTML 页面中提供的表格元素如下：

<table> 元素：表示一个表格，作为表格的容器。
<tr> 元素：表示一个表格中的行。
<td> 元素：表示一个表格中的单元格。

<table>
    <tr>
      <td>李雷</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>韩梅梅</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </table>

结构

表格元素的最为基本的结构为：

<table> 元素：表示 HTML 页面中的一个表格，作为表格的容器。

<tr>元素：表示 HTML 页面中一个表格的行。一个表格可以拥有一行或多行。

<td> 元素：表示 HTML 页面中的一个表格中一行的单元格。一行可以拥有一个单元格或多个单元格。

标题单元格

HTML <th> 元素用来定义为一组单元格的标题。该元素的用法与 <td> 元素保持一致，定义在 <tr> 元素中。

<th> 元素的 scope 属性用来定义与该标题单元格相关联的单元格，是一个枚举类型，具体的值如下所示：

row：表示当前标题单元格关联一行中的所有单元格。

col：表示当前标题单元格关联一列中的所有单元格。

rowgroup：表示当前标题单元格属于某一个行组并与其中所有单元格相关联。

colgroup：表示当前标题单元格属于某一个列组并与其中所有单元格相关联。

auto：由浏览器自动分配。

<table>
    <tr>
      <th scope="col">姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>李雷</td>
      <td>18</td>
      <td>男</td>
    </tr>
  </table>

表格的标题

HTML <caption> 元素用来定义 HTML 页面中表格的标题。该元素一般作为 <table> 元素的第一个子级元素出现，同时会显示在表格内容中的最前面，并且会在水平方向居中显示。

<table>
    <caption>人员信息表</caption>
    <tr>
      <th scope="col">姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>李雷</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>韩梅梅</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </table>

跨行与跨列

HTML 页面中的表格除了常规的之外，还可以实现跨行或跨列的效果。具体实现方式是通过如下属性来实现的：

colspan 属性：用来规定表格单元格可横跨的列数。

rowspan 属性：用来规定表格单元格可横跨的行数。

 <table>
    <caption>人员信息表</caption>
    <!-- 
      一旦设置表格是跨行或跨列的情况:
      一定要注意表格的完整性
     -->
    <tr>
      <th scope="col">姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr>
      <td colspan="2">李雷</td>
      <td>18</td>
      <!-- <td>男</td> -->
    </tr>
    <tr>
      <td rowspan="2">韩梅梅</td>
      <td>18</td>
      <td>女</td>
    </tr>
    <tr>
      <td>Lucy</td>
      <td>18</td>
      <!-- <td>女</td> -->
    </tr>
  </table>

长表格

元素：用来定义 HTML 页面中表格一组各列的汇总行。

元素: 用来定义 HTML 页面中表格的标题单元格的行。无论定义在什么位置, 最终显示在表格最上方。元素: 用来定义 HTML 页面中表格的主体（表格中真正的数据内容）。无论定义在什么位置, 最终显示在表格中间位置。元素: 用来定义 HTML 页面中表格一组各列的汇总行。无论定义在什么位置, 最终显示在表格最下方。

<table>
    <caption>人员信息表</caption>
    <!-- 
      <thead>元素: 无论定义在什么位置, 最终显示在表格最上方
      <tbody>元素: 无论定义在什么位置, 最终显示在表格中间位置
      <tfoot>元素: 无论定义在什么位置, 最终显示在表格最下方
     -->
    <thead>
      <tr>
        <th scope="col">姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李雷</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>韩梅梅</td>
        <td>18</td>
        <td>女</td>
      </tr>
      <tr>
        <td>Lucy</td>
        <td>18</td>
        <td>女</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>汇总</td>
        <td>3</td>
        <td></td>
      </tr>
    </tfoot>
  </table>

表格样式

表格布局

CSS table-layout 属性用来实现表格中单元格的布局，行和列的计算。该属性具有如下 2 个值：

auto：默认值，浏览器会使用自动表布局算法，已达到表格及其单元格的宽度被调整以适应内容。
fixed：表格或表格中列的宽度是由表格中第一行单元格的宽度决定的，后续行的单元格则不会影响表格中列的宽度。

以上两个值产生的结果可能不同，但两者之间最大的差异主要是速度上的。相对 fixed 的速度更快，而 auto 的速度稍慢，原因如下：

fixed：之所以速度快，主要原因是一旦浏览器解析了表格中第一行单元格的宽度就可以呈现整个表格，而不依赖表格中单元格的内容。
auto：表格的 width 属性的值为 auto 就会触发这种方式，无论 table-layout 属性的值是什么。这种方式之所以速度慢，主要原因在于每渲染一个新的单元格都要完成整个表格的布局。

表格标题

CSS caption-side 属性用来设置 HTML 页面中表格的 <caption> 元素显示的位置，该属性需要与 <caption> 属性配合使用。该属性的值具有如下 2 个：

top：默认值，表示表格标题显示在表格的上方。
bottom：表示表格标题显示在表格的下方。

处理空单元格

CSS empty-cells 属性用来设置 HTML 页面的表格中没有可见内容的单元格的边框和背景是显示还是隐藏。该属性的值具有如下 2 个：

show：默认值，边框和背景正常渲染，与普通元素一样。
hide：边框和背景被隐藏。

单元格边框

CSS border-collapse 属性用来设置 HTML 页面中表格的边框是分离的还是合并的，该属性具有如下 2 个值：

separate：默认值，每个单元格拥有独立的边框。
collapse：相邻的单元格共用同一条边框。

当 border-callapse 属性值为 separate 时称为**分隔（separated）模式，是 HTML 表格的传统模式。这种模式下，相邻单元格都拥有不同的边框。边框之间的距离是通过 CSS 的 border-spacing 属性来进行设置。

CSS border-spacing 属性用来设置 HTML 页面中表格的相邻单元格边框之间的距离。该属性的值设置具有如下 2 种方式：

单值：同时设置单元格之间在水平方向和垂直方向的距离。
双值：第一个值用来设置相邻两列的单元格之间的水平方向的距离，第二个值用来设置相邻两行的单元格之间的垂直方向的距离。

如何理解HTML表格？