HTML 表格入门：table、tr、td 与合并单元格

网页里展示成绩单、价目表、日程安排这类行列对齐的数据，最适合用的就是表格。HTML 里的表格由三个最基础的标签搭起来：<table> 声明一张表，<tr> 是一行，<td> 是行里的一个单元格。

最简单的表格

<table border="1">
  <tr>
    <td>姓名</td>
    <td>分数</td>
  </tr>
  <tr>
    <td>小明</td>
    <td>92</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>88</td>
  </tr>
</table>

规律很好记：有几行就写几个 <tr>，每行有几列就写几个 <td>。注意表格内容必须写在单元格里，直接在 <tr> 里塞文字是无效的。

表头用 th，不是加粗的 td

第一行通常是列名，应该用 <th>（table head）代替 <td>。浏览器会把表头文字加粗、居中，对读屏软件也更友好：

<table border="1">
  <tr>
    <th>商品</th>
    <th>价格</th>
  </tr>
  <tr>
    <td>键盘</td>
    <td>199 元</td>
  </tr>
  <tr>
    <td>鼠标</td>
    <td>89 元</td>
  </tr>
</table>

表格变长时，还可以把表头行包进 <thead>、数据行包进 <tbody>，浏览器滚动和打印时都能正确区分表头。

colspan：横着合并单元格

想让"合计"那一行横跨两列，用 colspan 属性：

<table border="1">
  <tr><th>商品</th><th>价格</th></tr>
  <tr><td>键盘</td><td>199 元</td></tr>
  <tr><td>鼠标</td><td>89 元</td></tr>
  <tr>
    <!-- 这一格横跨 2 列 -->
    <td colspan="2">合计：288 元</td>
  </tr>
</table>

注意：合并之后这一行只写这一个 <td> 就够了，因为它已经把两列的位置都占掉了。

rowspan：竖着合并单元格

rowspan 负责纵向合并，比如"分类"一栏要管住下面两行：

<table border="1">
  <tr><th>分类</th><th>商品</th></tr>
  <tr>
    <td rowspan="2">外设</td>
    <td>键盘</td>
  </tr>
  <tr>
    <!-- 分类格已被上一行占住，这里只写一格 -->
    <td>鼠标</td>
  </tr>
</table>

rowspan="2" 表示这个格子往下占两行，所以下一行里要少写一个 <td>。两个属性也可以同时用在同一个格子上，实现块状合并。

小结

• <table> 是表、<tr> 是行、<td> 是单元格，内容必须写在单元格里
• 列名用 <th>，语义更清楚，样式也会加粗居中
• colspan 横向合并、rowspan 纵向合并，合并后记得少写对应的单元格
• 表格只适合展示数据，做页面布局请用 CSS 的 Grid 或 Flexbox

写完可以打开页面按 F12 检查元素，数一数每行的 td 数量是否对得上。