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

一个表格可以有多个 tbody

相同字段下的数据可按类别分组;分组不等于合并单元格。

<table>
  <caption>两组课程主题(示意)</caption>
  <thead>
    <tr><th scope="col">分类</th><th scope="col">主题</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">HTML</th><td>表格</td></tr>
    <tr><th scope="row">HTML</th><td>表单</td></tr>
  </tbody>
  <tbody>
    <tr><th scope="row">CSS</th><td>文字样式</td></tr>
  </tbody>
</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>

thead / tbody 是行分组,不是单元格。它们内部仍需要 tr,再由 tr 包含单元格。