html表格不是页面布局工具，其语义专用于结构化数据展示；用于整体布局会破坏可访问性、损害seo、增加维护成本，仅允许在内合理组织局部内容。
直接说结论：HTML 表格本身不是为“布局页面”设计的，<table> 的语义是展示结构化数据；用它做整体页面布局会破坏可访问性、损害 SEO、增加维护成本。但如果你确实需要在某个单元格内安排子内容（比如表单、按钮组、多行文本），那完全可行——关键在于别越界。
<h3>为什么不能把 <code><table> 当页面布局工具用
<p>浏览器和屏幕阅读器都依赖语义正确性。<code><table> 里塞导航栏、侧边栏、页脚，等于告诉辅助技术“这是一张数据表”，结果就是读屏软件逐行列出“首页 首页 首页”，而不是按逻辑顺序朗读导航项。现代 CSS（Flexbox/Grid）已能干净替代所有老式表格布局需求，强行用 <code><table> 只会带来：
<ul>
<li>
<code>scope、headers 等可访问性属性被忽略或误用
table-layout: fixed 和 width 冲突频发colspan 后的点击热区偏移<td> 内部嵌套布局的合法用法
<p>真正合理且被规范支持的，是在单个 <code><td> 或 <code><th> 中组织局部内容。例如：一个“操作”列里放三个按钮，或一个“详情”单元格里显示带标题的描述块。
<ul><li>必须把子结构完整写进 <code><td> 开闭标签之间，不能放在 <code><tr> 下层
<li>避免在 <code><td> 里再套 <code><table> ——除非你明确需要二维数据呈现（如价格对比表），否则优先用 <code><div> + Flexbox
<li>若真要用子表，务必重置 <code>border-collapse: separate，否则父表的 collapse 会让子表边框消失或加粗
max-width: 100% 而非 width: 100%，防止撑破父单元格导致横向滚动用 colspan 和 rowspan 控制视觉位置而非结构
这两个属性不是“挪动格子”，而是声明“这个单元格覆盖多少逻辑格子”。常见误用是想靠 colspan="2" 把右边一列内容“挤过去”，结果反而让后续 <td> 错位。
<ul><li>
<code>colspan 仅影响当前行中该单元格占位，不会移动其他单元格；被合并的位置上不能再有别的 <td>
<li>
<code>rowspan 要求下方对应行中同一列位置留空（即不写 <td>），否则渲染会跳行或重复
<li>跨行+跨列混用时，先画网格草图，再填值——浏览器不校验逻辑，只按 HTML 顺序解析</li>
<li>Bootstrap 等框架的表格类（如 <code>.table-sm）可能覆盖原生 rowspan 行为，需检查 computed styles
替代方案：什么时候该放弃 <td> 嵌套
<p>当你要在单元格里实现以下效果时，说明已经超出表格能力边界，该换方案了：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>内容需要垂直居中且高度不固定 → 改用 <code>display: flex 容器 + align-items: center
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
<details><summary></summary></details>，比硬塞子表更轻量、无障碍友好<tr> DOM 节点，别在 <code><td> 里搞 drag/drop 逻辑
<p>最常被忽略的一点：表格的语义锚点是行（<code><tr>），不是单元格。所有“布局感”都来自行与行之间的关系。一旦你开始在 <code><td> 里拼命调位置，其实问题不在怎么挪，而在该不该用表格。</td>
