合法最小表格只需AB，其中为容器、为行、/为单元格；语义结构（如）不影响渲染但决定DOM操作与可访问性。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
HTML表格不是靠“记住所有标签”搭出来的，而是按数据逻辑一层层嵌套出来的。只要理解 <table> 是容器、<code><tr> 是行、<code><td> 和 <code><th> 是单元格这三层关系，就能写出合法结构——其余都是增强语义或视觉的可选补充。
<h3>怎么写一个能通过校验的最小可用表格</h3>
<p>浏览器只强制要求 <code><table> 包裹 <code><tr>，<code><tr> 里至少有一个 <code><td> 或 <code><th>。不需要 <code><thead>、<code><tbody>，也不需要 <code><caption></caption>。
-
<table><tr> <td>A</td> <td>B</td> </tr></table>是完全合法的 - 如果第一行是标题，用
<th> 替换 <code><td> 更合适，但不是语法必需 <li>省略 <code><tbody> 不影响渲染，但缺失 <code><tbody> 会导致 JS 操作 <code>table.rows时行为不一致（比如动态插入行可能插到错误位置）<thead>、<code><tbody>、<code><tfoot> 的真实作用 <p>它们不改变默认样式，也不影响表格能否显示，但决定了 DOM 结构和脚本可维护性。</p> <ul><li><code><thead> 里的 <code><tr> 会被浏览器识别为“表头行”，在长表格滚动时，部分 CSS（如 <code>position: sticky）依赖这个语义才能固定表头 <tbody> 是 JS 操作数据行的自然边界：<code>document.querySelector('tbody').insertRow()比遍历所有<tr> 更安全 <li><code><tfoot> 必须写在 <code><tbody> 之前，否则会被浏览器自动移到末尾——这是 HTML 规范强制行为，不是 bug <h3><code><th> 和 <code><td> 的关键差异不只是加粗 <p>视觉上 <code><th> 默认加粗居中，<code><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> <ul><li>屏幕阅读器会把 <code><th> 当作“当前单元格的行/列上下文”来播报，比如读“姓名：张三”，而 <code><td> 只读“张三” <li>如果表头跨多行或多列，必须用 <code>rowspan或colspan配合<th>，否则可访问性会断裂 <li>不要为了样式偷懒用 <code><td> + CSS 加粗代替 <code><th>，这会让语义丢失且 WCAG 不合规 <h3>容易被忽略的兼容性坑：<code><caption></caption>的位置和作用<caption></caption>必须紧贴<table> 开始标签之后，不能放在 <code><thead> 前面或中间，否则会被当作普通内容渲染在表格外部。 <ul> <li>它不只是“给表格起个名字”，而是唯一被浏览器和辅助工具识别为“表格描述”的元素</li> <li>搜索引擎会用 <code><caption></caption>内容判断表格主题，影响 SEO- 如果表格没有
<caption></caption>，又没用aria-label补充，对视障用户来说就等于“一段没说明的乱码数据”
表格结构本身很简单，难的是让每一层标签都承担它该有的语义责任——而不是仅仅让页面看起来像表格。
