HTML表格table结构怎么写_HTML数据列表嵌套展示方法-html教程-PHP中文网

表格结构必须严格合法：table→tr→td/th，禁止省略层级；子表格须嵌入td/th内；colspan/rowspan需精确声明列行数；动态生成时须校验每行列数一致；优先用展开行或替代嵌套表格。

html表格table结构怎么写_html数据列表嵌套展示方法

table必须包住tr，tr里至少有一个td或th

浏览器不认“差不多”，只认结构合法性。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

单独存在、或者

<table><td>内容</td></table>这种写法，会被自动修正甚至忽略整块。你看到的“显示了”，其实是浏览器在背后补了<code><tbody>和<code><tr>，但补得不一定对——尤其在动态插入或老版本 Safari 中，容易漏行、错列。
<ul><li>必须写全层级：<code><table> → <code><tr> → <code><td> 或 <code><th>
<li>哪怕只有一行数据，也绝不能省<code><tr>
<li>空表格不能留白，至少塞一行占位：<code><tr><td>暂无数据</td></tr>

用开发者工具检查 DOM，确认

<tr>节点真实存在，而不是被当成文本节点


<h3>嵌套子表格只能放在<td>或</td>
<th>内部
<p>把<code><table>直接塞进<code><tr>里是无效操作。浏览器会把它踢出<code><tr>，可能插到<code><table>外头，也可能塞进隐式<code><tbody>，结果就是 JS 查不到、CSS 选不到、打印样式错位。
<ul><li>合法入口只有一个：<code><td>或<code><th>的内容区
<li>子表格要完整写在里面，不能只写<code><tr>或<code><td>
<li>视觉上想撑满单元格？给子表格加<code>width: 100%

但注意：如果父表用了table-layout: fixed，子表宽度可能被截断，建议显式设<code>min-width

colspan/rowspan不是排版技巧，是列数声明

写错一个colspan="2"，整行逻辑列数就少一，后续所有<code>querySelectorAll('td')都可能漏项。合并不是“看起来连在一起”，而是告诉浏览器：“这个单元格占了两个位置，后面那格别再占了”。

colspan="3"表示横跨 3 列，该行其他<code><td>总数要相应减 2 <li><code>rowspan="2"表示纵跨 2 行，下一行同列位置必须留空（不能补<code><td>） <li>错误示例：<code><tr> <td colspan="2">A</td> <td>B</td> <td>C</td> </tr>——若原表设计为 4 列，这行实际只有 3 个逻辑单元格，列对齐必然崩
动态生成时，务必先算清每行总列数是否一致，别依赖“看着对齐”

子表格真需求往往是展开详情，不是硬嵌套

多数人写嵌套表格，其实只想点一下看明细。硬塞<table>进<code><td>，换来的是样式污染、无障碍缺失、JS 操作脆弱。真正可控的做法是：用原表结构模拟展开区。 <ul><li>在目标行下方插入一个<code><tr class="detail-row">，只含一个<code><td colspan="N"> <li>在这个<code><td>里放独立<code><table>，但重置关键样式：<code>border-collapse: separate; margin: 4px 0; font-size: 0.9em <li>默认<code>display: none，JS 控制<code>.detail-row显示/隐藏