最简html表格结构仅需、、三标签：为容器，定义行，定义单元格，必须严格嵌套——只能在或内，只能在中，缺一不可。
用 <table>、<code><tr>、<code><td> 搭出最简结构
<p>没有花哨功能，只要能显示行列对齐的数据，三标签就足够：<code><table> 是容器，<code><tr> 是行，<code><td> 是单元格。缺一不可，且必须嵌套正确——<code><tr> 只能直接在 <code><table> 或 <code><tbody> 里，<code><td> 只能出现在 <code><tr> 中。
<p>常见错误现象：</p>
<ul>
<li>表格内容挤成一团、无边框、列宽忽大忽小</li>
<li>浏览器报错“<code>td not allowed as child of table”（其实是漏写了 <tr>）
<p>实操建议：</p>
<ul>
<li>先写骨架，再填内容：固定写法是 <pre class="brush:php;toolbar:false;"></pre>
<table><tr>
<td>A</td>
<td>B</td>
</tr></table>
</li>
<li>表头用 <code><th> 替代 <code><td>，它自带加粗+居中，语义更清晰
<li>别依赖 <code>border="1" 这类过时属性，现代写法统一用 CSS 控制边框
table-layout: fixed 是控制列宽的唯一可靠方式
table-layout: fixed 是控制列宽的唯一可靠方式你设了 width="200" 或 style="width: 200px" 却没生效？大概率是因为没加 table-layout: fixed。默认的 auto 布局会根据内容撑开列宽，CSS 的 width 只是“参考”，不是指令。
实操建议：
- 给
<table> 加上 <code>style="table-layout: fixed; width: 600px;" - 列宽优先用
<col>定义，比如<col style="width: 150px"> <col style="width: 450px">，干净且兼容性好 - 若动态生成表格，确保
<col>在<tbody> 之前插入，否则部分浏览器（如旧版 Safari）会忽略 <li>避免对 <code><td> 单独设 <code>width期望它起作用——fixed 模式下只认第一行或<col>用
colspan和rowspan合并单元格要守规则colspan="2"让一个单元格横跨两列，rowspan="3"让它纵跨三行。但合并后，被“覆盖”的单元格位置必须跳过，否则结构错乱、渲染异常。常见错误现象：
- 合并后某列突然消失，或下一行错位一格
- 表格在 Firefox 正常，Chrome 里多出空列
实操建议：
- 合并两列就删掉对应位置的一个
<td>，比如 <code><td colspan="2">X</td> <td>Y</td>表示本该有三列，现在前两列被 X 占据 -
rowspan更容易出错：跨行单元格要放在“首行对应列”，后续行同一列位置必须留空（不写<td>） <li>不要混用 <code>colspan和rowspan在同一单元格上——虽合法，但可读性差、调试困难 -
<caption></caption>必须紧贴<table> 开始后，不能放 <code><thead> 里面；它是屏幕阅读器识别表格用途的第一依据 <li><code><thead> 应只含 <code><tr> + <code><th>，且通常只有一行；浏览器滚动时，部分方案（如 CSS <code>position: sticky）依赖它才能固定表头 <tbody> 不是可选：没有它，<code>tr直接挂在table下，某些 JS 库（如 DataTables）初始化失败- 别为了“省代码”把所有
tr都塞进一个tbody——如果有汇总行，用<tfoot> 更规范 表格真正难的不是写出来，而是让列宽稳定、合并不出错、语义不被绕过。尤其当表格要嵌入响应式布局或配合 JS 动态操作时，<code><col>位置、tbody存在性、colspan后的单元格计数，这几个点最容易在联调阶段突然崩掉。
<thead>、<code><tbody>、<code><caption></caption>不是装饰，是必要语义这些标签不改变默认样式，但影响可访问性、打印行为、JS 选取逻辑，甚至某些 CSS 选择器（如
tbody tr:nth-child(even)）的匹配结果。实操建议：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
