应使用语义化标签结构： → / → → /，禁用border等过时属性；不可省略以保障可访问性与seo；合并单元格需严格遵循colspan/rowspan逻辑，避免错位；边框统一通过table{border-collapse:collapse}配合th,td{border}实现。
直接用语义化标签搭结构，别碰 border、cellspacing 这类过时属性——它们在现代浏览器里既不可靠，又和 CSS 冲突。
怎么写一个带表头的三行四列表格
新手最容易卡在标签嵌套顺序上：必须是 <table> → <code><thead> 或 <code><tbody> → <code><tr> → <code><th>/<code><td>，缺一层或错位置都会导致渲染异常。
<ul><li><code><th> 只用于标题单元格（比如“姓名”“年龄”），它自带加粗+居中，比用 <code><td> + CSS 更轻量
<li>如果第一行是标题，就包进 <code><thead>；数据部分统一放进 <code><tbody>——这样后续加滚动条、固定表头或用 JS 操作都更稳
<li>别手动写 <code>border="1"，它会强制所有边框为 1px 实线，且无法用 CSS 覆盖；改用 style="border-collapse: collapse;" 配合后续 CSS 控制
| 姓名 | 年龄 | 城市 | 入职时间 |
|---|---|---|---|
| 王五 | 28 | 杭州 | 2023-05 |
| 赵六 | 31 | 深圳 | 2022-11 |
为什么 <caption></caption> 不该被跳过
新手常觉得标题可有可无，但 <caption></caption> 是唯一被屏幕阅读器识别为“表格描述”的原生标签，SEO 也依赖它理解表格上下文。
- 必须紧贴
<table> 开始标签之后，不能放在 <code><thead> 里面 <li>内容要具体，比如 <code><caption>2024年Q2部门绩效统计（共12人）</caption>，而不是“员工表”这种模糊表述 - 默认居上显示，如需居下可用 CSS：
caption { caption-side: bottom; } -
colspan="2"表示该单元格占两列宽度，同一行里后续<td> 就少写一个；否则会多出一列，整行错位 <li> <code>rowspan="3"表示该单元格纵向占三行，那它下面两行对应列的位置必须留空（不写<td>），否则会被撑开或重叠 <li>跨行合并后，<code><tbody> 里某行少一个 <code><td> 是正常现象，不是漏写了 <pre class="brush:php;toolbar:false;"><tr> <th colspan="2">汇总信息</th> <th>平均分</th> </tr><tr> <td rowspan="2">张三</td> <td>语文</td> <td>89</td> </tr><tr> <td>数学</td> <td>92</td> </tr></pre> <h3>CSS 边框合并必须配 <code>border-collapse: collapse只写
border: 1px solid #ccc给<th> 和 <code><td>，结果看到双线边框、间隙过大——这是默认 <code>border-collapse: separate的锅。-
border-collapse: collapse必须加在<table> 上，不是 <code><tr> 或 <code><td> <li>配合 <code>border-spacing: 0（虽然 collapse 模式下它无效，但显式声明更稳妥） - 想加外边框？给
<table> 单独设 <code>border，别试图用<tr> 的 border——它不生效 <p>真正麻烦的不是写对第一版，而是后续加新列、合并单元格、或者从别人代码里接手时，发现 <code><thead> 里 <code>colspan数和<tbody> 每行 <code><td> 总数对不上——这时得逐行数 <code><th> 和 <code><td> 的逻辑列数，而不是看视觉效果。</td>
-
colspan 和 rowspan 容易错在哪
这两个属性不是“让单元格变大”，而是“声明这个单元格覆盖多少个逻辑位置”——错误理解会导致后续行/列错位，页面直接变形。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
