最简表格结构为，必须包含table、tr、td三层标签，缺一不可；th用于表头，td用于数据；需用css设置border和border-collapse:collapse来控制边框。
用 <table>、<code><tr>、<code><td> 搭出最简表格结构
<p>HTML 表格不是靠一个标签撑起来的，必须用 <code><table> 包裹，里面用 <code><tr> 表示行，再用 <code><td>（或 <code><th>）填单元格。漏掉任意一层，浏览器可能渲染错乱，或者开发者工具里看到 DOM 结构塌陷。
<ul><li><code><th> 专用于表头单元格，默认加粗居中；普通数据用 <code><td>
<li>没有 <code><tbody> 也能显示，但手动加上能提升语义性，也方便后续 JS 操作整块数据
<li>空单元格别留空白：写 <code><td></td>，而不是 <td> </td>（后者会多一个空格，影响对齐）
表格边框不显示？检查 border 和 CSS 冲突
border 和 CSS 冲突老教程里写 <table border="1"> 能出边框，但现在默认不生效——因为现代浏览器把 <code>border 属性当废弃属性处理了，实际起作用的是 CSS 的 border 声明。
- 纯 HTML 方式（不推荐）：
<table border="1" cellspacing="0" cellpadding="4">，但 <code>cellspacing和cellpadding已被废除，兼容性差 - 推荐做法：用 CSS 控制，比如
table, th, td { border: 1px solid #ccc; border-collapse: collapse; } - 漏掉
border-collapse: collapse会导致双线边框，看着像边框变粗了，其实是默认的separate模式 -
<colgroup></colgroup>必须放在<thead> 或第一行 <code><tr> 之前，否则被忽略 <li> <code><col>标签自闭合，不能写；支持width、span、style等属性 - 示例：
<colgroup> <col> <col style="width:120px;text-align:right"> </colgroup> - 注意：IE 对
<col>的background支持不稳定，慎用背景色 - 复杂表头（比如“成绩”下分“数学”“英语”）才需要
id+headers配对 - 用 Lighthouse 或 axe 测试时，“
<th> 元素缺少 <code>scope” 是常见失败项 表格结构本身简单，但语义、样式、可访问性三者一旦脱节，后期改起来比重写还麻烦。尤其是scope和border-collapse这类不起眼的细节，上线后才被发现，往往要翻好几屏代码。
<colgroup></colgroup> 和 <col> 是控制列样式最轻量的方式
想让第 2 列统一设成 120px 宽、右对齐，不用给每行每个 <td> 加 class。用 <code><colgroup></colgroup> + <col> 更直接，也更利于维护。
可访问性坑点：scope 和 headers 别漏掉
屏幕阅读器读表格时，靠 scope（在 <th> 上）或 <code>headers（在 <td> 上）关联数据单元格和表头。没加的话，视障用户根本不知道某列代表什么。<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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2131" title="墨刀AIPPT"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175679993920478.png" alt="墨刀AIPPT" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2131" title="墨刀AIPPT">墨刀AIPPT</a>
<p>排版/配图/美化一键优化，3分钟产出专业级PPT</p>
</div>
<a href="/ai/2131" title="墨刀AIPPT" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>单层表头用 <code>scope="col" 或 scope="row" 就够，比如 <th scope="col">姓名</th>
