Web前端技术 · 第3课 19 / 25 | 编码:L03-15
HTML5中的表格

看效果,写出表格结构

观察下方成品,写出对应的HTML,再展开参考代码对照。

第三次理论课:内容安排
阶段 内容
基础 表格与数据关系
单元格、表头与分组
应用 跨行跨列与嵌套
结构诊断与案例比较
本节共2学时

任务:写出表题、表头、两组主体数据和表尾;正确实现跨行、跨列,并表达表头关联。只要求HTML结构,不要求复现边框、颜色等CSS样式。

先确定哪些位置由上方单元格占据,再逐行写代码。注意:相同外观不一定代表相同语义结构。

完成后展开参考代码与解析
<table>
  <caption>第三次理论课:内容安排</caption>
  <thead>
    <tr><th scope="col">阶段</th><th scope="col">内容</th></tr>
  </thead>
  <tbody>
    <tr><th scope="rowgroup" rowspan="2">基础</th><td>表格与数据关系</td></tr>
    <tr><td>单元格、表头与分组</td></tr>
  </tbody>
  <tbody>
    <tr><th scope="rowgroup" rowspan="2">应用</th><td>跨行跨列与嵌套</td></tr>
    <tr><td>结构诊断与案例比较</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">本节共2学时</td></tr>
  </tfoot>
</table>
<!-- 下方样式只用于显示网格,CSS将在后续课程学习。 -->
<style>
  table { border-collapse: collapse; font: 20px/1.5 sans-serif; }
  th, td { border: 1px solid #899bb3; padding: 8px 12px; }
  th { background: #edf4ff; }
</style>

注意:“基础”“应用”各关联一个独立的 tbody;表头关联应与真实分组保持一致。两组的第二行各只写一个 td,表尾用 colspan="2" 跨越两列。