HTML5中的表格
对比：内容相同，数据关系也相同吗？
比较一个列表与一个数据表：什么任务更适合哪种组织方式？
<h2>A：快速浏览主题</h2>
<ul>
<li>第1次：网页设计基础，2学时</li>
<li>第2次：初识HTML5，2学时</li>
<li>第3次：表格，2学时</li>
</ul>
<hr>
<h2>B：按字段逐项比较</h2>
<table>
<caption>前三次课程</caption>
<thead>
<tr><th scope="col">课次</th><th scope="col">主题</th><th scope="col">学时</th></tr>
</thead>
<tbody>
<tr><th scope="row">第1次</th><td>网页设计基础</td><td>2</td></tr>
<tr><th scope="row">第2次</th><td>初识HTML5</td><td>2</td></tr>
<tr><th scope="row">第3次</th><td>表格</td><td>2</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>展开参考分析
快速浏览少量主题时，列表可以满足需要；按课次、主题、学时交叉查找和比较时，表格更明确。不能仅凭是否有边框判断选择。