table 的语义结构是 thead 表头、tbody 主体、tfoot 表尾,每行是 tr,每个单元格是 th 或 td。th 表示表头单元格,默认加粗居中,且会被读屏软件识别为行列标题——这是无障碍的关键。合并单元格用 colspan 和 rowspan,前者横向跨列,后者纵向跨行。表头单元格还可以加 scope 属性,进一步帮助读屏工具确认它管的是行还是列。
早年用 table 做整页布局是历史遗留,现在请交给 flex 或 grid。但展示真正的二维数据时 table 仍然不可替代:它自带行列对齐、可排序、可被搜索引擎正确解析。常见样式处理是 border-collapse:collapse 合并边框、配合 thead 做 position:sticky 实现滚动时表头固定。
<style> table.tbl { border-collapse: collapse; width: 320px; } .tbl th, .tbl td { border: 1px solid #4a9eff; padding: 6px 10px; } .tbl thead th { background: #4a9eff; color: #fff; } .tbl tbody tr:nth-child(even) { background: #f0f7ff; } </style> <table class="tbl"> <thead><tr><th>姓名</th><th>前端课</th><th>总分</th></tr></thead> <tbody> <tr><td>小明</td><td>92</td><td>271</td></tr> <tr><td>小红</td><td>96</td><td>284</td></tr> </tbody> </table>