刚开始学 HTML 表格时，很多人都会觉得：只要写一个 <table>，再往里面塞几行数据，就算学会了。

可一到真实项目，比如“员工管理—表格数据展示区域”，问题马上出现：表头和正文怎么区分？一行里为什么能放多个单元格？表头单元格为什么常用 th，而不是 td？

其实，HTML 表格真正要掌握的，不是某一个标签，而是整套结构。

一、table：定义整张表

<table> 是表格最外层的标签，用来定义整个表格。

例如员工管理页面中，需要展示姓名、性别、头像、所属部门、职位、入职日期、最后操作时间和操作按钮，这一整块数据，都属于一张表。

<table>
  ...
</table>

但 table 只负责告诉浏览器“这里是一张表”，真正的表头、数据行和单元格，还要交给其他标签。

二、thead：专门放表头

<thead> 用来定义表格头部，是可选标签。

所谓表头，就是最上面那一行栏目名称，比如：

姓名、性别、头像、所属部门、职位、入职日期、最后操作时间、操作。

这些内容不是普通数据，而是在告诉用户：下面每一列分别代表什么。

<thead>
  ...
</thead>

把表头单独放进 thead，代码结构会更清楚。

三、tbody：真正的数据主体

如果 thead 是标题区，那么 <tbody> 就是数据区，同样属于可选标签。

员工表格里，一行一行的姓名、性别、职位、日期等真实数据，都应该放在 tbody 中。

<tbody>
  ...
</tbody>

这样阅读代码时，一眼就能区分：上面是表头，下面是实际数据。

四、tr：表示一整行

表格本质上是由一行一行的数据组成的，而 <tr> 就负责定义“行”。

<tr>
  <td>赵敏</td>
  <td>女</td>
  <td>班主任</td>
</tr>

这一段表示一条完整的员工记录。

所以可以记住：

表格里有很多行，一行里又有很多格子。

这里的“行”，就是 tr。

五、td：普通单元格

<td> 表示普通表格单元格。

姓名是一个格子，性别是一个格子，职位也是一个格子。

<td>讲师</td>

表示当前这一格中的数据是“讲师”。

所以表格层级可以理解成：

table
↓
thead / tbody
↓
tr
↓
td

这个关系一旦记住，表格代码就很难再写乱。

六、表头为什么常用 th？

图片里还有一个重要知识点：

如果是表头单元格，可以把 td 换成 <th>。

<thead>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>职位</th>
  </tr>
</thead>

普通数据格用 td，表头单元格用 th。

这样写，不只是为了显示效果，更重要的是让代码的结构和语义更加清晰。

七、把它们组合起来

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>职位</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>赵敏</td>
      <td>女</td>
      <td>班主任</td>
    </tr>
  </tbody>
</table>

到这里，一张表的基本骨架就完整了。

table 管整体，thead 管表头，tbody 管主体，tr 管每一行，td 和 th 管每一个单元格。

八、真正要学的是“结构思维”

学习 HTML 表格最容易犯的错误，就是只背标签名字。

真正应该建立的是拆解页面的能力。

看到员工管理表时，可以这样分析：

整张区域是表格，用 table；

栏目标题属于表头，用 thead；

真正的数据属于主体，用 tbody；

每一条员工记录是一行，用 tr；

每一个字段是一格，用 td；

如果是表头单元格，就用 th。

当你能够这样分析页面时，HTML 就不再是死记硬背，而是在用标签准确描述页面结构。

九、为什么要把表头和数据分开？

很多初学者会觉得：反正最终都能显示，全部写成 tr + td 不就行了吗？

从“能不能显示”的角度看，确实可以；但从代码结构来看，把表头和主体分开更清晰。

当数据只有两三行时，你可能感觉差别不大。可一旦变成绩单、订单列表、员工信息表，几十行甚至上百行数据出现后，如果没有明确的 thead 和 tbody，代码会越来越难读。

把表头放进 thead，把真实数据放进 tbody，相当于提前给页面划好区域。以后无论是继续写样式，还是维护数据，都会更容易判断自己正在操作哪一部分。

这也是学习 HTML 很重要的一点：代码不仅要“能运行”，还要尽量让结构一眼就能看懂。

十、从员工表格理解真实开发

图片里的员工管理表非常适合用来理解表格结构。

最上面一行是“姓名、性别、头像、所属部门、职位、入职日期、最后操作时间、操作”，这部分就是表头。

下面每一条员工信息，就是一行真实数据。

也就是说，一条员工记录可以对应一个 tr，而姓名、性别、部门、职位等每一个字段，则分别对应这一行中的一个 td。

当你把页面这样拆开后，会发现表格其实非常有规律：

先确定整张表，再划分表头和主体；主体里再按行组织数据；每一行内部继续拆成多个单元格。

这种“从整体到局部”的思路，比单纯记标签更重要。

最后

表格看起来只是网页里一个普通区域，但它背后体现的是前端很重要的一种能力：

把视觉结构转换成代码结构。

记住这句话：

table 管整体，thead 管表头，tbody 管主体，tr 管行，td 管普通单元格，th 管表头单元格。

以后再遇到成绩表、订单表、用户列表、商品列表，你会发现：内容虽然不同，但底层结构几乎都是同一套逻辑。

真正学会这一点，你掌握的就不只是几个 HTML 标签，而是一种清晰、可复用的页面结构思维。

阅读原文：点击这里​