首页 › HTML › 表格与表单 › 表格

表格用于展示结构化数据（如报表、价目表、日程）。

基础表格

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>部门</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>技术部</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>35</td>
    <td>市场部</td>
  </tr>
</table>

标签	含义
<table>	表格容器
<tr>	行（Table Row）
<th>	表头单元格（Table Header）
<td>	数据单元格（Table Data）

表格语义化分组

<table>
  <caption>2026年Q1部门业绩</caption>
  <thead>
    <tr>
      <th>部门</th>
      <th>营收</th>
      <th>利润</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>技术部</td>
      <td>500万</td>
      <td>150万</td>
    </tr>
    <tr>
      <td>市场部</td>
      <td>300万</td>
      <td>80万</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>800万</td>
      <td>230万</td>
    </tr>
  </tfoot>
</table>

标签	作用
<caption>	表格标题
<thead>	表头行组
<tbody>	表体行组
<tfoot>	表尾行组

合并单元格

colspan 跨列合并

<table>
  <tr>
    <th>姓名</th>
    <th colspan="2">联系方式</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>13800001234</td>
    <td>zhang@example.com</td>
  </tr>
</table>

rowspan 跨行合并

<table>
  <tr>
    <th rowspan="2">技术部</th>
    <td>张三</td>
    <td>前端开发</td>
  </tr>
  <tr>
    <!-- 第一列 rowspan=2 占两行 -->
    <td>李四</td>
    <td>后端开发</td>
  </tr>
  <tr>
    <th>市场部</th>
    <td>王五</td>
    <td>市场推广</td>
  </tr>
</table>

合并规则

属性	写法	效果
colspan="2"	<td colspan="2">	占 2 列宽度
rowspan="3"	<td rowspan="3">	占 3 行高度

表格使用的注意事项

1. 表格用于数据，不要用于布局——过去常用 <table> 做页面布局，现在用 CSS Flexbox/Grid
2. 始终使用语义化标签（<thead> / <tbody> / <tfoot>）——提升可读性和无障碍访问
3. <th> 默认粗体居中，<td> 默认常规左对齐

小结

标签	用途
<table>	表格容器
<caption>	表格标题
<thead> / <tbody> / <tfoot>	行组分块
<tr>	行
<th>	表头单元格
<td>	数据单元格
colspan / rowspan	跨列/跨行合并

上一节：嵌入内容与 iframe 下一节：表单与输入元素

贡献者: 布欧-Lewyon