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" 跨越两列。