语义正确的html表格必须用包裹、、，为首个子元素，含至少一行，所有表头需用scope或headers明确作用范围。
HTML table row has fewer cells than required`。
怎么判断一个表格是否语义正确
关键不是它看起来像不像表格，而是浏览器和读屏软件能否准确说出“第2行第3列是‘上海’，对应表头‘城市’”。做到这点必须满足三点：
<thead> 必须包裹所有表头行，不能只靠第一行全是 <code><th> 就算数 <li>每列数据单元格 <code><td> 必须能明确关联到某一个 <code><th>，复杂表头需加 <code>scope="col"或scope="row"- 有
<caption></caption>标签，哪怕只是简短描述，比如<caption>员工基本信息表</caption> - 同一行中，所有
<td> 和 <code><th> 的 <code>colspan值加起来，必须等于该表格声明的列数（比如 4 列，那这一行的colspan总和 + 普通单元格个数 = 4） - 用浏览器开发者工具检查每个
<tr> 下的子元素数量，如果某行明显少于其他行，八成是合并漏写了或没加空 <code><td> <h3>CSS 边框样式为什么比 border="1" 更可靠</h3> <p><code>border="1"是 HTML4 遗留属性，HTML5 已不推荐，且无法控制边框合并、内边距、颜色渐变等。更麻烦的是：它会让<th> 和 <code><td> 边框重复渲染，出现双线。 <ul><li>必须加 <code>border-collapse: collapse到<table> 上，否则相邻单元格边框会撑开间距 <li><code><th> 和 <code><td> 要分别设 <code>border，不然表头可能没边框 - 用
padding替代cellspacing/cellpadding，后者已废弃，且无法单独控制上下左右 - 响应式场景下，
overflow-x: auto要套在<div> 外层，不能直接加给 <code><table> <h3>tbody/thead/tfoot 分组不是“可选项”</h3> <p>很多人以为这只是为了好看或方便写 CSS，其实它是 DOM 操作和可访问性的基础设施。没有 <code><tbody>，JavaScript 动态插入新行时容易误插到表头里；没有 <code><thead>，某些读屏软件压根不识别哪列是标题。 <ul><li><code><thead> 只放真正起定义作用的表头行（比如列名、分组标题），别把数据行塞进去 <li><code><tbody> 应该包含全部数据行，即使只有一行也要包住 <li><code><tfoot> 不一定非得在 HTML 里写在最后，浏览器会自动渲染到底部，适合放“合计”“平均值”这类统计行 <li>用 CSS 选中 <code>tbody tr:nth-child(even)实现隔行变色，比 JS 循环更轻量
真正难的不是写出能显示的表格，而是写出能在不同设备、不同辅助技术、不同 JS 框架下都保持结构稳定的表格。`
colspan/rowspan 合并时为什么总错位
视觉上对齐了，但 HTML 结构已经崩坏，常见于跨行合并后没手动补空单元格。浏览器会自动补 <td>，但补的位置不参与语义计算，导致读屏跳过整行。
<ul><li>
<code>rowspan="2" 的 <th> 必须出现在它所覆盖的第一行，不能放在第二行再写 <code>rowspan="2" 往上跨
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
