HTML怎么创建表格_HTML表格标签使用教程【详解】

语义正确、可访问的表格需用、、明确表头关系，数据用，合并单元格须结构完整，响应式应避免overflow-x而改用css grid或data-label重排。

怎么用 <table> 写出语义正确、能被屏幕阅读器识别的表格 <p>纯靠 <code><table> + <code><tr> + <code><td> 堆出来的表格，对视力障碍用户几乎不可读。关键不是“能不能显示”，而是“能不能被理解”。 <ul><li>必须用 <code><thead> 包住表头行，不能只靠 <code><th> 加粗来“模拟”表头 <li>每列数据要和 <code><th> 有明确的 <code>scope="col" 或 scope="row" 关联，否则读屏软件不知道哪一列对应哪一栏

复杂表格（比如合并单元格）必须配 <caption></caption> 和 aria-describedby 指向说明文字，否则信息直接丢失

示例：一个带标题、分组、双层表头的合规写法片段：

<caption>2024年各季度销售额（单位：万元）</caption>
<thead>
  <tr>
    <th rowspan="2">地区</th>
    <th colspan="3">季度</th>
  </tr>
  <tr>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
    <th scope="col">Q3</th>
  </tr>
</thead>

<td> 和 <code><th> 到底该在哪用？别只看样式 <p><code><th> 不是“加粗单元格”的快捷键，它是语义标签——代表该单元格在定义表格结构中的角色。用错会导致逻辑混乱。 <ul><li>第一行或第一列中起“说明作用”的单元格，比如“姓名”“年龄”“北京”，一律用 <code><th> <li>数据单元格永远用 <code><td>，哪怕它看起来像标题（比如某一行的汇总标题“小计”） <li>如果某列是序号列（1, 2, 3…），它仍是数据，用 <code><td>；只有当它是“行标识符”且参与表头逻辑（如“产品A”“产品B”）才考虑 <code><th scope="row"> <p>错误示范：<code><tr> <th>1</th> <th>张三</th> <th>25</th> </tr> —— 这三个都是数据，不该用 <th>。<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/2097" title="音刻"><img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6cae607e2a436.png" alt="音刻" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/2097" title="音刻">音刻</a> <p>AI音视频转录和笔记工具</p> </div> <a href="/ai/2097" title="音刻" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <h3>合并单元格时 <code>rowspan 和 colspan 的常见崩坏点

合并本身不难，崩坏往往发生在“视觉对齐了，但 HTML 结构漏了格子”。浏览器会自动补 <td>，但补的位置可能让语义彻底错乱。 <ul><li> <code>rowspan="2" 的 <th> 必须出现在它所跨行的**第一行**，不能放在第二行再往上跨 <li>同一行中，所有 <code><td>/<code><th> 的 <code>colspan + 个数之和必须等于表格列数，否则后续行会错位