HTML 教程 / 使用 table、tr、th 和 td 创建表格

使用 HTML 表格显示按行和列组织的数据。一个元素 table 包含行 (tr)；每行有表头单元格 (th) 或数据单元格 (td)。不要仅使用表格来定位页面的部分内容。

表格的基本结构

这张小表显示了两种水果的库存。第一行是列名；接下来的行包含数值。

<table>
  <tr>
    <th>水果</th>
    <th>库存</th>
  </tr>
  <tr>
    <td>苹果</td>
    <td>12 个</td>
  </tr>
  <tr>
    <td>梨</td>
    <td>8 个</td>
  </tr>
</table>

数据按行和列显示如下：

将代码插入 HTML 文件的body中。每个tr构成一行，单元格从左到右显示。浏览器的默认表格样式可能几乎不显示边框；只有在数据结构正确之后才添加 CSS 边框。在设计表格时，先绘制其列和行。要添加另一种水果，请添加包含水果名称和库存值的另一数据行。

分离表头行和数据行

如果您希望明确地对表头行和数据行进行分组，请使用 thead 和 tbody。汇总行可以放置在 tfoot 中。这些元素用于组织行；它们本身不会生成颜色或边框。在小表格中可以省略它们，尽管即使在源代码中没有写入，浏览器的 HTML 解析器也可能会在文档树中插入 tbody。

<table>
  <thead>
    <tr><th>水果</th><th>库存</th></tr>
  </thead>
  <tbody>
    <tr><td>苹果</td><td>12 个</td></tr>
    <tr><td>梨</td><td>8 个</td></tr>
  </tbody>
</table>

选择表头单元格和数据单元格

当一个值标识一行或一列时，请使用 th；对于与该标题关联的数据，请使用 td。不要只是为了让文本加粗而选择 th。一张表可以同时有列标题和行标题。将单位放在每个数字旁边或放在合适的标题中。像“12”这样的单个值可能无法向读者显示它表示的是物品还是价格。请通过无障碍表格：caption、scope 与合并单元格中的示例，比较表格标题、表头关联与单元格合并。

一旦基础内容清楚，您可以添加 caption 来命名表格，scope 来明确表头的关系，如果某个单元格实际覆盖多个位置，则使用 colspan 或 rowspan。这些功能在 MDN 的表格参考中有描述。

在真实的 HTML 文件中，您可以像下面这样用一个容器包裹一个宽表格。CSS 的 overflow-x 可以实现水平滚动，而不会删除数据或改变表格方向。

<div class="table-scroll">
  <table>
    <!-- 在此处插入上一张表格的行。 -->
  </table>
</div>

.table-scroll { max-width: 100%; overflow-x: auto; }

修复表格单元格错位

检查每一条普通行是否包含预期数量的单元格。不同数量的单元格可能会将数据移动到错误的标题下。如果在狭窄屏幕上宽表格被截断，考虑添加水平滚动区域，而不是将内容压缩到无法阅读的程度。不要在单元格内插入重复空格来模拟列；对齐和边框属于 CSS，而数据关系属于 HTML。