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