语义正确的基础表格必须包含table、至少一对tr及每行至少一个td或thth仅用于表头空表需填充占位内容caption为唯一合法标题合并单元格须符合语义逻辑且避免结构错乱。怎么用 table 写出语义正确的基础表格浏览器不关心你是不是“教程里学的”只认标签嵌套是否合法。一个可用的 html 表格必须有 table至少一对 tr行每行里至少一个 td 或 th单元格。缺任意一层渲染可能错乱屏幕阅读器也会读不准。th 只用于表头列名或行名默认加粗居中td 用于普通数据别为了“看起来像标题”乱用 th空表格比如后台数据还没加载不要留空 table至少放个 trtd暂无数据/td/tr否则某些老浏览器会忽略整个 table 标签caption 是表格的唯一合法标题放在 table 开始后第一行别用 h3 堆在上面——它不被算作表格一部分SEO 和无障碍支持都会打折colspan 和 rowspan 什么时候该用、怎么不踩坑合并单元格不是排版技巧是语义表达比如“第一季度”下面并列“1月”“2月”“3月”就该用 colspan3 让“第一季度”横跨三列。滥用会导致表格结构混乱尤其是用 JS 动态生成时容易漏算列数。合并方向要和逻辑一致colspan 合并列横向rowspan 合并行纵向写反了表格会塌陷或错位合并后被合并掉的单元格不能存在——比如某行用了 td colspan2A/tdtdB/td这行实际只有两个逻辑列但 DOM 里写了三个 td浏览器会自动补一列后续样式和 JS 选中全乱用 CSS Grid 或 Flex 替代复杂合并可以但别混用CSS 强制布局 rowspan 容易触发重排冲突尤其在 Safari 中表现不稳定表格没边框、文字挤成一团优先查这三处HTML 表格默认无边框、无间距、文字紧贴不是 bug是规范行为。别急着加 CSS先确认结构是否干净。检查是否误用了 border0HTML4 遗留属性现代写法统一用 CSStable { border-collapse: collapse; } td, th { border: 1px solid #ccc; }table 默认 display: table但若父容器设了 font-size: 0常见于清除 inline 元素间隙会导致单元格内文字消失——给 td, th 单独设 font-size: 14px表格内容溢出不换行td 默认 white-space: normal但若里面包了 div 或设置了 white-space: nowrap就得手动加 word-break: break-word 或限制 max-width移动端表格横向滚动很卡别硬塞 overflow-x给 table 外层加 overflow-x: auto 是最常见也最危险的解法。iOS Safari 在表格内容多时滚动帧率骤降而且 pinch-zoom 会失效。 RedClaw 百度推出的手机端万能AI Agent助手