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

嵌套表格:把小表放进一个单元格

内层 table 放在外层 td 中;不能直接把 table 放在 tr 下面。

<table>
  <caption>课程与考查项(示意)</caption>
  <thead>
    <tr><th scope="col">课程</th><th scope="col">项目明细</th></tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Web</th>
      <td>
        <table>
          <caption>Web考查项</caption>
          <tr><th scope="col">项目</th><th scope="col">要求</th></tr>
          <tr><th scope="row">表格</th><td>结构完整</td></tr>
        </table>
      </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>

只有单元格内确实包含另一组二维数据时才考虑嵌套。若只是几个说明点,用列表通常更清楚;不要用多层表格拼网页布局。