关于 table 元素你要懂的全在这
内容提要
本文介绍HTML表格元素用法：table用于展示行列数据，包含thead、tbody、tfoot、tr、th、td等结构，th为表头、td为数据，支持colspan和rowspan合并单元格。CSS可控制边框、间距、宽度，border-collapse可合并边框。表格适合展示计划、价格、对比等数据，不应用于页面布局，还涉及斑马纹、高亮、响应式及无障碍设计。
延伸解读
表格结构的语义化与历史变迁
文章指出，使用<thead>、<tbody>、<tfoot>能明确表格的语义结构。其中<tfoot>的位置在HTML5前后有变化：之前必须放在<thead>和<tbody>之间，HTML5则要求放在<tbody>之后，更符合阅读习惯。这种语义化不仅让代码更清晰，也有助于屏幕阅读器等辅助技术理解表格内容。
单元格合并的权重平衡原则
colspan和rowspan用于合并单元格，但需注意每行单元格的“权重”总和应相等。例如，一个colspan=2的单元格权重为2，该行其他单元格权重之和需与之平衡，否则表格布局会出现异常。rowspan则影响后续行，设置rowspan=N的单元格会使其下N-1行自动增加一个单元格位置。
表格宽度的自适应特性
表格宽度表现特殊：默认宽度为内容的最小宽度，若内容超出容器则自动换行并撑满容器。但若单元格设置了white-space: nowrap或单元格过多，表格会撑破容器。因此，在响应式设计中需谨慎处理表格宽度，避免布局破坏。
CSS对表格样式的精细控制
border-collapse可合并边框，但合并后边框冲突按cell、row、row group、column、column group、table的顺序覆盖。border-spacing仅在separate时生效。此外，斑马纹可通过tbody tr:nth-child(odd)实现，高亮列可使用<col>元素，但单元格背景色会覆盖列背景色。
Q&A
HTML表格中thead、tbody、tfoot分别有什么作用？
thead用于包裹表头行，语义上表明这些行是列的标题；tbody包裹数据行；tfoot包裹表脚行，通常用于放置汇总信息或重复表头。使用这些元素时，不能直接将tr放在table下，而应放在它们内部。
th和td有什么区别？
th代表表格头部单元格，通常用于放置列标题或行标题，默认加粗居中；td代表表格数据单元格，用于放置具体数据。两者都是表格格子的本质，但语义不同。
如何合并表格单元格？
使用colspan属性可以横向合并单元格，rowspan属性可以纵向合并单元格。这两个属性接受大于等于2的正整数，表示要合并的格子数量。合并时需确保每行格子的总权重相等，否则表格会出现异常。
表格的边框间距如何控制？
默认情况下，表格单元格之间有border-spacing产生的间隙。可以通过设置table的border-spacing属性调整间距，或者使用border-collapse: collapse来合并边框，消除间隙。
什么时候应该使用表格？
表格适用于展示行列数据，如计划、价格表、特性对比、记分板、职员表、财经数据、日历、营养成分表等。判断标准是数据是否看起来像Excel表格。不应使用表格进行页面布局。
如何实现表格的斑马纹效果？
可以使用CSS选择器tbody tr:nth-child(odd)或tbody tr:nth-child(even)来为奇数行或偶数行设置背景色，通常限制在tbody内以避免影响表头和表脚。
如何高亮表格的列？
可以使用col元素配合CSS选择器如col:nth-child(3)来高亮整列，但若单元格设置了背景色，则需使用td:nth-child(3), th:nth-child(3)来覆盖。悬停高亮列则需要JavaScript实现。
如何让其他元素表现得像表格？
通过CSS的display属性，可以将其他元素设置为table、table-row、table-cell等值，使它们像表格一样布局。例如display: table用于容器，display: table-row用于行，display: table-cell用于单元格。
