语义化表格需用明确划分结构，置于首；合并单元格须配平colspan/rowspan；边框需border-collapse: collapse；垂直居中推荐flex方案。
用 <table>、<code><thead>、<code><tbody> 划分语义结构
<p>表格不是一堆 <code><tr><code><td> 堆出来的，浏览器和屏幕阅读器靠语义标签识别“哪是标题、哪是数据、哪是汇总”。不加 <code><thead> 和 <code><tbody>，CSS 里想单独给表头加背景色或固定表头滚动，基本得绕路写 JS。
<p>常见错误：把所有行都塞进一个 <code><tr> 块里，或者漏掉 <code><tbody> —— 这会让后续用 JavaScript 操作数据体（比如翻页、筛选）时找不到目标容器。
<ul><li>
<code><caption></caption> 必须放在 <table> 内第一位置，它是表格的“正式名称”，对无障碍访问至关重要
<li><code><thead> 只包表头行（<code><th>），别塞数据；<code><tbody> 包所有数据行，哪怕只有一行也要包
<li><code><tfoot> 要写在 <code><thead> 之后、<code><tbody> 之前，浏览器会自动渲染到底部，不是按代码顺序排
<h3>合并单元格必须配平 <code>colspan 和 rowspan 的数量
写 colspan="3" 却没删掉右边两个 <td>，表格立刻错位——浏览器不会报错，但视觉上会多出一列空格，甚至整行塌陷。这不是样式问题，是 HTML 结构崩了。
<p>典型场景：跨列表头（如“成绩”下分“语文/数学/英语”）或跨行项目名（如“iPhone 15”占三行，后面每行是不同配置）。</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>先确定主干行数/列数，再从上到下、从左到右填单元格；填到带 <code>rowspan 的单元格时，它下面对应行里要跳过同列位置
colspan 和 rowspan 的值必须是正整数，不能为 0 或负数，否则被忽略<td rowspan="2"> 里面再放个 <code><table> 并合并其内部单元格，可读性和维护性会急剧下降
<h3>边框显示异常？先查 <code>border-collapse 和单元格边框重复
明明只给 <td> 加了 <code>border: 1px solid #ccc，结果看到双线边框——这是因为每个单元格都有自己的边框，相邻单元格边框并排显示，形成“双线”。这不是 bug，是默认行为。
修复方式很简单，但常被跳过：
- 必须在
<table> 上设 <code>border-collapse: collapse;，否则<td> 的边框永远不合并 <li>不要同时用 HTML 的 <code>border属性（如<table border="1">）和 CSS 边框，二者冲突且后者可能被覆盖 <li>如果只要外边框，可以只给 <code><table> 设 <code>border，<td> 不设边框，再配 <code>border-collapse: separate;+border-spacing: 0;让内容垂直居中别只依赖
vertical-alignvertical-align: middle在<td> 上看似有效，但一旦单元格里有 <code><p></p>、<div> 或多行文本，它就失效——因为 <code>vertical-align只对 inline-level 或 table-cell 元素起作用，且对内部块级子元素无穿透力。更稳的方案是升级容器行为：
- 给
<td> 加 <code>display: flex; align-items: center;，一行代码搞定垂直居中，顺便支持水平居中（加justify-content: center） - 若需兼容 IE10+ 且不想用 Flex，可用
line-height匹配单元格高度（仅限单行纯文本） - Grid 方案（
display: grid; place-items: center;）更简洁，但 Safari 旧版本支持略弱
真正容易被忽略的是：表格行高由内容撑开，不是由
height属性直接控制。设了height: 40px但内容两行，结果还是撑高——这时候得配合overflow: hidden或white-space: nowrap才能压住。 - 给
