HTML 表格从入门到精通

系统学习HTML表格：基本结构、合并单元格、表头表体表尾、列组、样式化表格、响应式表格技巧 · 难度：入门 · +10XP

HTML 表格从入门到精通

表格是展示结构化数据的最佳方式。从课程表到财务报表，从排行榜到数据对比，<table> 元素让数据一目了然。虽然现代布局不用表格（用CSS Flexbox/Grid），但展示数据时表格依然无可替代。

表格基本结构

<table>
  <caption>2026年春季课程表</caption>
  <thead>
    <tr>
      <th>时间</th>
      <th>周一</th>
      <th>周二</th>
      <th>周三</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>上午</td>
      <td>HTML基础</td>
      <td>CSS布局</td>
      <td>项目实战</td>
    </tr>
    <tr>
      <td>下午</td>
      <td>JavaScript</td>
      <td>Python入门</td>
      <td>自由练习</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">每天4课时，共12课时/周</td>
    </tr>
  </tfoot>
</table>

合并单元格：colspan 和 rowspan

<table border="1">
  <tr>
    <th>产品</th>
    <th>价格</th>
    <th>库存</th>
    <th>状态</th>
  </tr>
  <tr>
    <td>笔记本电脑</td>
    <td>5999元</td>
    <td>50</td>
    <td rowspan="2">热销中</td>
  </tr>
  <tr>
    <td>平板电脑</td>
    <td>2999元</td>
    <td>30</td>
  </tr>
  <tr>
    <td colspan="3">总库存：80台</td>
    <td>正常</td>
  </tr>
</table>

表格常用属性

列组：colgroup 和 col

<table>
  <colgroup>
    <col style="background-color: #f0f0f0">
    <col span="2" style="background-color: #ffffcc">
    <col style="background-color: #e6f3ff">
  </colgroup>
  <tr>
    <th>姓名</th><th>语文</th><th>数学</th><th>英语</th>
  </tr>
  <tr>
    <td>小明</td><td>85</td><td>92</td><td>78</td>
  </tr>
</table>

动手练习

1. 制作课程表：创建一个完整的课程表，包含表头（星期+时间）、表体（课程内容）、表尾（备注）。至少使用一次colspan和一次rowspan。
2. 制作数据对比表：对比至少5种编程语言（如HTML/CSS/JS/Python/Java），列出它们的学习难度、用途、薪资水平、学习资源数等至少4个维度。
3. 响应式表格：用CSS把表格改造成响应式——在小屏幕上每行变成卡片样式（使用CSS media query）。