html表格易错点在于结构与属性配合：必须用分区，合并单元格需删除被占位单元格，border-collapse:collapse统一边框，小屏用overflow-x:auto而非强制100%宽度。
直接用 <table> 就能画出表格，但真正容易出错的不是“会不会写”，而是“写完为什么看起来错位”“合并后空白单元格怎么来的”“border 怎么总是一条粗一条细”。这些问题全在结构和属性配合上。
<h3>表格基本结构必须套对：<code><table> → <code><thead>/<code><tbody> → <code><tr> → <code><th>/<code><td>
<p>很多人随手写成 <code><table><tr>
<td>A</td>
<td>B</td>
</tr></table>，这能渲染，但语义不完整、可访问性差、后续加表头或分页也容易崩。更稳妥的写法是：
| 姓名 | 部门 | 入职时间 |
|---|---|---|
| 王五 | 前端组 | 2024-03-15 |
<thead> 和 <code><tbody> 不是可选装饰，它们让表格具备逻辑分区，CSS 里才能精准控制表头固定、主体滚动 <li>所有 <code><th> 必须放在 <code><tr> 内，不能直接塞进 <code><thead>；同理 <code><td> 只能出现在 <code><tr> 里 <li>如果漏掉 <code><tbody>，浏览器会自动补上，但 JS 操作 <code>document.querySelector('tbody').rows时可能返回undefinedcolspan和rowspan合并单元格，关键在“删多余单元格”合并不是靠加属性就完事，它本质是“让一个单元格占据多个位置，同时把被占位置上的其他单元格干掉”。常见错误是只加
colspan="2"却没删掉右边那个<td>，结果多出一列空格。 <p>横向合并示例（表头跨两列）：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;"><tr> <th colspan="2">基本信息</th> <th>状态</th> </tr><tr> <td>张三</td> <td>28</td> <td>在职</td> </tr></pre> <ul><li>第一行只有两个 <code><th>：一个 <code>colspan="2"+ 一个普通<th>，共占 3 列 → 第二行就得严格对应 3 个 <code><td> <li>纵向合并要从“最顶上那行”开始设 <code>rowspan，比如<td rowspan="3">李四</td>必须写在第 1 行，且第 2、3 行对应列位置不能再放<td>，否则会被撑开或错行 <li> <code>rowspan和colspan可以一起用：<td rowspan="2" colspan="2">汇总</td>，但此时它占据 2×2 区域，周围单元格数量必须重新算- 解决方法：CSS 中加
table { border-collapse: collapse; }，所有边框立刻贴合，变成单线效果 - 不要依赖
cellspacing="0"这种过时属性，它只在内联生效，且无法覆盖外部 CSS 的层叠 - 如果用了
border-collapse: separate（默认值），border-spacing会生效，此时cellpadding和cellspacing才起作用 —— 但现代项目几乎不用这个模式 - 简单方案：用
overflow-x: auto包一层<div>，让表格可水平滚动，比内容挤成一团更可用 <li>进阶方案：用媒体查询 + <code>display: block把<tr> 改成块级，再用 <code><th> 和 <code><td> 的 <code>data-label属性模拟键值对（例如<td data-label="姓名">王五</td>） - 复杂报表建议直接换库（如 DataTables），HTML 原生表格不适合动态列宽、虚拟滚动等场景
边框显示不一致？border-collapse: collapse 是必加项
即使写了 border="1"，默认渲染下 <table> 的单元格边框是“分离”的，导致相邻单元格之间有双倍间距、粗细不均。这不是 bug，是 HTML 旧规范遗留的 <code>border-spacing 行为。
响应式表格在小屏上容易崩，别硬撑宽度
给 <table> 设 <code>width="100%" 或 CSS width: 100%，在手机上大概率出现横向滚动条甚至内容截断。表格本质是刚性布局，强行拉伸只会让文字换行错乱、colspan 错位。
真正难的不是写出一个能显示的表格，而是写出一个改一行数据不会带崩三行合并、加个样式不会让边框突然变双线、切到手机还能看懂的表格 —— 这些细节全在结构约束和属性克制里。
