HTML 表格

表格用 <table> 标签创建，由行（<tr>）和单元格（<td>）组成：

html 
<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>32</td>
    <td>北京</td>
  </tr>
</table>

核心标签

标签说明
<table>表格容器
<tr>表格行（table row）
<th>表头单元格（table header）——会自动加粗居中
<td>数据单元格（table data）
<caption>表格标题

语义化结构

将表格内容按语义分组，有助于可访问性和 CSS 样式控制：

html 
<table>
  <caption>2026 年销售数据</caption>
  <thead>
    <tr>
      <th>季度</th>
      <th>销售额</th>
      <th>同比增长</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Q1</td>
      <td>￥120 万</td>
      <td>+15%</td>
    </tr>
    <tr>
      <td>Q2</td>
      <td>￥145 万</td>
      <td>+22%</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>￥265 万</td>
      <td>+18%</td>
    </tr>
  </tfoot>
</table>
  • <thead> — 表头（列标题）
  • <tbody> — 表体（数据行）
  • <tfoot> — 表尾（汇总行）

合并单元格

colspan — 跨列

html 
<tr>
  <td colspan="2">这个单元格占两列</td>
</tr>

rowspan — 跨行

html 
<tr>
  <td rowspan="2">这个单元格占两行</td>
  <td>第一行数据</td>
</tr>
<tr>
  <td>第二行数据</td>
</tr>
html 
<table>
  <tr>
    <th>姓名</th>
    <th colspan="2">联系方式</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>13800138000</td>
    <td>zhangsan@mail.com</td>
  </tr>
</table>

不要用表格来做页面布局——那是 1990 年代的过时做法。表格应该只用来展示表格数据。布局请用 CSS Flexbox / Grid。

表格的基本样式（边框、间距、对齐等）通过 CSS 控制。例如 border-collapse: collapse 让相邻单元格的边框合并为一条。完整的表格样式将在 CSS 教程中讲解。