结构与样式：边框不是表格的定义

Web前端技术 · 第3课 15 / 25 ｜编码：L03-11

HTML5中的表格

结构与样式：边框不是表格的定义

没有边框仍然可以是一张表；颜色和间距用于改善阅读。

本节掌握的HTML

table、tr、th、td，以及 colspan、rowspan、scope 等结构和关系。

先观察的CSS

border 设置边框，padding 留出单元格内边距，border-collapse 控制边框合并。

<table>
  <caption>前三次理论课</caption>
  <thead>
    <tr><th scope="col">课次</th><th scope="col">主题</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">第1次</th><td>网页设计基础</td></tr>
    <tr><th scope="row">第2次</th><td>初识HTML5</td></tr>
    <tr><th scope="row">第3次</th><td>HTML5中的表格</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>

示例末尾的 style 是辅助样式。课堂对照：保留HTML，去掉这段 style 后，哪些数据关系仍然存在？