44. 表格基础 table tr td

本节目标：理解表格的行列结构，学会用 table、tr、td 创建第一个 HTML 表格。

表格用来展示有结构的数据。课程表、价格表、成绩表，都是表格的典型场景。

三个核心标签

HTML 表格由三个标签嵌套组成：

<table>：表格容器
<tr>（table row）：一行
<td>（table data）：一个单元格

<table>
  <tr>
    <td>张三</td>
    <td>90 分</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>85 分</td>
  </tr>
</table>

显示效果：

张三	90 分
李四	85 分

Note

默认情况下，HTML 表格没有边框。要让边框显示，需要用 CSS 设置。

表格的结构层次

表格的嵌套关系像俄罗斯套娃：

table（整个表格）
  └── tr（第一行）
        └── td（第一个单元格）
        └── td（第二个单元格）
  └── tr（第二行）
        └── td（第一个单元格）
        └── td（第二个单元格）

table 直接包含 tr，tr 直接包含 td。这是固定的层次。

加一点 CSS 让表格更好看

<style>
  table {
    border-collapse: collapse;  /* 合并边框 */
  }
  td, th {
    border: 1px solid #333;    /* 边框 */
    padding: 8px 12px;         /* 内边距 */
  }
</style>

<table>
  <tr>
    <td>语文</td>
    <td>92</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>88</td>
  </tr>
</table>

border-collapse: collapse 是关键，它让相邻单元格的边框合并为一条线，否则会看到双边框。

创建三行三列的表格

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>

每行的 td 数量决定了列数。大多数情况下每行列数一致，但也可以不同（后面会讲）。

td 中可以放任何内容

单元格不限于纯文字，可以放图片、链接、列表等：

<table>
  <tr>
    <td><img src="avatar.png" alt="头像"></td>
    <td><a href="#">张三</a></td>
  </tr>
</table>

表格不是用来做布局的

Important

表格只用来展示表格数据。不要用 table 做页面布局。页面布局应该用 CSS Flexbox 或 Grid。
用表格做布局的问题：代码复杂、不灵活、对屏幕阅读器不友好。

常见错误

tr 里面直接放 td 以外的标签

<!-- 错误 -->
<tr>
  文字
</tr>

<!-- 正确 -->
<tr>
  <td>文字</td>
</tr>

tr 的直接子元素必须是 td 或 th。

忘记 tr 包裹

<!-- 错误 -->
<table>
  <td>单元格</td>
</table>

<!-- 正确 -->
<table>
  <tr>
    <td>单元格</td>
  </tr>
</table>

td 必须放在 tr 里面。

小结

table 定义表格，tr 定义行，td 定义单元格
三者嵌套顺序固定
用 border-collapse 让边框更好看
表格只用于数据展示，不用于布局

下一节，我们学习表头 th 和表格标题 caption。