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