html表格不能用于页面布局，因其语义本为二维数据展示，误用会导致响应式失效、可访问性中断、seo下降及维护困难；仅当内容可导出至excel并保持行列含义时才适用。

HTML表格和列表不是布局工具，强行用它们排版会导致语义混乱、响应式失效、屏幕阅读器误读——这是所有现代前端开发的共识。

为什么不能用 <table> 做页面整体布局 <p>浏览器会把 <code><table> 解析为二维数据容器，其内部渲染逻辑与语义绑定极强：行高自动适应、单元格内容撑开、<code>colspan/rowspan 依赖严格行列结构。一旦用于布局，就会出现：

• 移动端无法用 CSS 简单切换为垂直堆叠（display: block 对 <tr> 无效） <li><code><table> 内部元素不响应 <code>flex 或 grid，嵌套样式极易冲突
• 辅助技术将整块区域识别为“数据表”，跳过标题、忽略导航意图
• SEO 工具提取页面大纲时，<h2></h2> 被包裹在 <td> 中，权重大幅衰减 <p>哪怕只是“看起来像表格”的三栏导航，也该用 <code>display: grid 或 display: flex 实现，而非套一层 <table>。 <h3>列表必须用 <code><ul></ul>/<ol></ol>，但不能乱嵌套

合法的子元素只有 <li>、<ul></ul>、<ol></ol>。任何其他标签（比如 <div>、<code><p></p>、<section></section>）直接塞进 <ul></ul>，都会被浏览器自动修正——<div> 被提到 <code><ul></ul> 外面，DOM 结构和预期完全不一致。

常见后果：

• 用 DevTools 查看时发现 <li> 被莫名拆开或合并
• CSS 的 ul li + li 选择器失效（因为中间插入了非法节点）
• 语音朗读时跳过部分项，或把整个列表读成一段话

正确做法：

• 每项内容用 <li> 包裹，内部可放 <p></p>、<span></span>、<a></a>、<img>
• 需要图标+标题+描述组合？在 <li> 内部用 <div class="item">，而不是放到 <code><ul></ul> 层级
• 横向导航菜单？先写 ul { list-style: none; padding-left: 0; }，再用 display: flex 排列 <li>

<table> 只用于真正二维结构化数据 <p>判断标准很简单：能否导出到 Excel 并保持行列含义不变？能——就用 <code><table>；不能——就别用。 <p>典型适用场景：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>学生成绩表（行=学生，列=科目）</li> <li>价格对比表（行=产品，列=参数）</li> <li>课程表（行=时间，列=教室/教师）</li> <li>API 响应字段说明（行=字段名，列=类型/说明/是否必填）</li> </ul> <p>关键结构要点：</p> <ul><li>必须包含 <code><thead> 和 <code><tbody>，即使只有一行表头 <li>表头单元格用 <code><th>，不是 <code><td>；它自带语义和默认加粗居中 <li>避免用 <code>border="1" 这类过时属性，全部交由 CSS 控制边框、间距、背景

如需响应式表格，优先考虑 overflow-x: auto 包裹，而非强行缩列宽

列表横向排列时最常踩的坑

display: flex 下，<ul></ul> 默认的 list-style 圆点不会自动对齐，反而容易错位、被裁切，甚至挤出容器边界。

根本原因：list-style 是块级标记机制，而 flex 是流式布局模型，二者底层渲染路径不同。

安全做法：

• 统一加 ul { list-style: none; padding-left: 0; }
• 自定义标记一律用 li::before，比如 content: "→"; margin-right: 8px;
• 禁用 list-style-position: inside——它会让标记参与 flex 尺寸计算，导致 flex-basis 失效
• 给每个 <li> 设 min-width 或 flex: 0 0 auto，防止长短不一的内容引发高度塌陷

真正麻烦的不是怎么写出来，而是改完之后要不要兼容 IE11 —— 如果要，gap 得降级为 margin，::before 标记得补上 vertical-align 对齐，这些细节一旦漏掉，视觉就全偏了。