HTML表格不能用于页面布局，因其语义本为二维数据展示，误用会导致响应式失效、可访问性中断、SEO下降及维护困难；仅当内容可导出至Excel并保持行列含义时才适用。
HTML表格和列表不是布局工具，强行用它们排版会导致语义混乱、响应式失效、屏幕阅读器误读——这是所有现代前端开发的共识。
为什么不能用 <table> 做页面整体布局
浏览器会把 <table> 解析为二维数据容器，其内部渲染逻辑与语义绑定极强：行高自动适应、单元格内容撑开、colspan/rowspan 依赖严格行列结构。一旦用于布局，就会出现：
- 移动端无法用 CSS 简单切换为垂直堆叠（
display: block对<tr>无效） -
<table>内部元素不响应flex或grid，嵌套样式极易冲突 - 辅助技术将整块区域识别为“数据表”，跳过标题、忽略导航意图
- SEO 工具提取页面大纲时，
<h2>被包裹在<td>中，权重大幅衰减
哪怕只是“看起来像表格”的三栏导航，也该用 display: grid 或 display: flex 实现，而非套一层 <table>。
列表必须用 <ul>/<ol>，但不能乱嵌套
合法的子元素只有 <li>、<ul>、<ol>。任何其他标签（比如 <div>、<p>、<section>）直接塞进 <ul>，都会被浏览器自动修正——<div> 被提到 <ul> 外面，DOM 结构和预期完全不一致。
立即学习“前端免费学习笔记（深入）”；
常见后果：
- 用 DevTools 查看时发现
<li>被莫名拆开或合并 - CSS 的
ul li + li选择器失效（因为中间插入了非法节点） - 语音朗读时跳过部分项，或把整个列表读成一段话
正确做法：
- 每项内容用
<li>包裹，内部可放<p>、<span>、<a>、<img> - 需要图标+标题+描述组合？在
<li>内部用<div class="item">，而不是放到<ul>层级 - 横向导航菜单？先写
ul { list-style: none; padding-left: 0; }，再用display: flex排列<li>
<table> 只用于真正二维结构化数据
判断标准很简单：能否导出到 Excel 并保持行列含义不变？能——就用 <table>；不能——就别用。
典型适用场景：
- 学生成绩表（行=学生，列=科目）
- 价格对比表（行=产品，列=参数）
- 课程表（行=时间，列=教室/教师）
- API 响应字段说明（行=字段名，列=类型/说明/是否必填）
关键结构要点：
- 必须包含
<thead>和<tbody>，即使只有一行表头 - 表头单元格用
<th>，不是<td>；它自带语义和默认加粗居中 - 避免用
border="1"这类过时属性，全部交由 CSS 控制边框、间距、背景 - 如需响应式表格，优先考虑
overflow-x: auto包裹，而非强行缩列宽
列表横向排列时最常踩的坑
display: flex 下，<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 对齐，这些细节一旦漏掉，视觉就全偏了。
