应仅在语义化二维数据（如报表、课表）、老旧系统兼容、邮件模板或需原生可访问性时使用；布局用css grid/flex；设table-layout: fixed保列宽稳定；对齐用css text-align/vertical-align；响应式优先用折叠而非隐藏列。
HTML 表格布局不是现代页面结构的推荐方案，但如果你明确需要快速组织行列数据、做表单对齐、或兼容老旧系统，<table> 仍能可靠工作。关键在于别把它当“页面骨架”用，只用于真正符合表格语义的场景。
<h3>什么时候该用 <code><table> 而不是 CSS Grid/Flex
<p>表格标签的核心价值是语义化表达二维关系数据，不是视觉排版。以下情况才建议用 <code><table>：
<ul>
<li>展示财务报表、课程表、航班时刻、API 响应字段对照等天然行列结构的数据</li>
<li>老系统迁移中需保持 HTML 结构不变，且无 JS 支持环境</li>
<li>邮件模板（多数客户端只认 <code><table> 布局）
<li>需要原生可访问性支持：屏幕阅读器能正确读出行列关系，<code><th scope="col"> 和 <code><th scope="row"> 是关键
<p>反之，若目标是“把 logo 放左上、导航放中间、页脚固定底部”，请直接换 <code>display: flex 或 display: grid —— 用表格硬套只会增加维护成本和可访问性风险。
table-layout: fixed 是控制列宽稳定的唯一靠谱方式
默认的 table-layout: auto 会让浏览器遍历所有单元格内容再计算列宽，结果不可控：一列塞了长文本，整列撑开，其他列被压缩；后续 append() 新行还可能触发重排。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
强制设为 fixed 后，列宽由第一行 <col> 或 <th>/</th>
<td> 的 <code>width 属性（或 CSS width）决定，后续内容再长也不会影响列宽分配：
| ID | 姓名 | 备注 |
|---|---|---|
| 1001 | 张三 | 超长文本不会撑开第三列 |
注意：<col> 必须写在 <thead> 之前，否则部分浏览器（如 Safari）可能忽略。
<h3>文字对齐必须用 CSS，<code>align 属性已失效
<td align="right"> 在 HTML5 中已被废弃，W3C 验证器报错，iOS WebView 和严格模式下直接不生效。正确做法是：
<ul><li>水平对齐统一用 <code>text-align：加在 <td> 上（<code><tr> 上设无效）
<li>垂直对齐用 <code>vertical-align：只对 <td> 和 <code><th> 有效，<code><tr> 上写等于白写
<li>整列右对齐？用 <code><col class="num-col"> + .num-col { text-align: right; }
<td> 单独加 <code>vertical-align: top，别指望 <tr> 统一控制
<p>常见坑：<code>vertical-align: bottom 看不出效果，大概率是因为单元格没设显式高度或 padding，内容区域太小，bottom 和 middle 视觉无差别。
响应式表格的底线处理：别隐藏列，优先用 <details></details> 折叠
在小屏上强行压缩表格列宽会导致文字折行混乱、数字错位。与其用媒体查询隐藏整列（破坏数据完整性），不如用语义化折叠：
| 订单号 | 20261009-001 |
查看明细
|
这个方案不依赖 JS、键盘可操作、屏幕阅读器可识别状态，且保留全部数据。若必须横向滚动，就给 <table> 包一层 <code><div style="overflow-x: auto;">，别试图用 CSS 强行“自适应”列宽——表格的语义就是固定行列关系，妥协太多反而失真。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
