最简三行三列表格结构为123456789，必须严格嵌套table→tr→td三层，缺tr会导致渲染异常。
三行三列表格的最简结构怎么写
直接用 <table> 包裹三组 <code><tr>，每组 <code><tr> 里放三个 <code><td> 就能跑起来。不需要额外属性也能渲染，但缺省状态下单元格无边框、无间距、文字贴边，容易误以为“没显示”。
<p>常见错误现象：<code>表格内容挤成一团，看不出行列分隔，甚至整张表在页面上“消失” —— 实际是浏览器默认把 <table> 渲染为 display: table，但 border-collapse 默认为 separate，且 border 宽度为 0。
<ul><li><code><tr> 必须直接放在 <code><table> 内，不能套在 <code><div> 或其他标签里，否则会触发浏览器自动修复（比如把 <code><tr> 提到外面），导致结构错乱
<li><code><td> 是 <code><tr> 的唯一合法子元素（<code><th> 也行，但语义不同）；放文本、数字、甚至空字符串都合法，但空 <code><td></td> 在老版本 IE 中可能塌陷，建议至少写个 或留空白字符
width 或 height 属性硬设 <tr> 尺寸——它不响应 height，宽度由列决定；想控宽得管 <code><td> 或用 CSS 的 <code>table-layout: fixed
加边框和内边距让表格可读
光有结构不够，得让人看清哪是行哪是列。最轻量做法是加一行 CSS：
table, td { border: 1px solid #000; border-collapse: collapse; padding: 4px; }
注意两点：必须同时设 border-collapse: collapse，否则默认 separated 模式下相邻单元格边框会双倍加粗；padding 只对 <td> 生效，<code><tr> 上设无效。
<ul><li>如果只给 <code><table> 设 border，<code><td> 不设，结果只有外框，内部无分隔线
<li>
<code>border-collapse: collapse 是关键开关，不设的话即使每个 <td> 都有 border，中间也会留白缝
<li>移动端小屏下，<code>padding 建议不低于 2px，否则文字贴边难点击
TR 和 TD 的语义与替换场景
<tr> 表示“表格行”，<code><td> 表示“表格数据单元格”。它们不是装饰标签，浏览器和读屏软件依赖这个结构理解表格逻辑。
<p>常见误用：<code>用 <tr> 套 <div> 做布局 —— 这违反 HTML 规范，现代浏览器会静默修正（把 <code><div> 移出 <code><table>），导致样式失效或 DOM 错位。
<ul><li>表头该用 <code><th> 而不是 <code><td>，哪怕样式一样；<code><th> 默认加粗居中，且对辅助技术有明确语义标识
<li>需要跨行/跨列时，用 <code>rowspan 和 colspan 属性，但必须同步调整后续行的 <td> 数量，否则表格错位（例如 <code><td rowspan="2"> 占两行，下一行就得少一个 <code><td>）
<li><code><tr> 本身不支持 <code>onclick 等事件直接绑定（旧版 IE 有兼容问题），稳妥做法是在 <td> 或用 JS 监听 <code><table> 的事件委托
<h3>为什么不用 CSS Grid 或 Flex 替代表格</h3>
<p>单纯展示三行三列数据时，<code><table> 仍是语义正确、兼容性最好、代码最短的选择。CSS Grid 虽灵活，但为简单网格写 <code>display: grid; grid-template-columns: repeat(3, 1fr); 加容器类，反而多出样式层和维护成本。
容易被忽略的点：table 元素自带无障碍支持（如键盘导航按 Tab 可逐单元格移动），而用 div 模拟的“表格”需手动加 role="table"、aria-rowindex 等一整套属性才能达标。
- 如果只是排版布局（比如表单字段对齐），别用
<table> —— 语义错误，SEO 和可访问性都会受损 <li>如果数据要排序、筛选、导出 Excel，原生 <code><table> 的 DOM 结构更利于 JS 库（如 DataTables）解析 <li>IE8 及更早版本不支持 flex/grid，但支持 <code><table>，若需兼容就别绕弯 </table>
