A06 列表与表格

摘要：并列关系用列表，二维对应关系用表格，这两类结构在 HTML 中有明确的标签边界。用表格排版页面、用连续 div 模拟列表，都会导致结构与内容不匹配：朗读软件读不出条目数量，数据无法被程序解析。本文给出三类列表与表格的完整写法，并说明合并单元格与表头关联的做法。
关键词：无序列表，有序列表，描述列表，表格，表头

所属：frontend/html / A-入门 ｜上一篇：A05-链接与图片 ｜下一篇：A07-表单与输入控件

1 引言

判断用列表还是表格只需一个问题：内容之间是并列关系，还是行列对应关系。并列关系（导航、步骤、要点）用列表；行列对应（课程表、对比数据）用表格。第三种情况是「名称 + 解释」，用描述列表。

本文覆盖三类列表与表格的完整结构，并给出三条选择依据。范围见表 1-1。

项	本文覆盖	本文不覆盖
列表	`ul`、`ol`、`dl` 及其嵌套	下拉菜单交互（A07 的 select）
表格	`table`、`caption`、`thead/tbody/tfoot`、`th/td`、合并单元格	大数据表格与分页、排序
可访问性	`th` 的 `scope`、表头与数据关联	完整无障碍规范（C 阶段）

2 预备知识

项	要求	核对方式
环境	A02 的本地服务器	能访问 `localhost`
浏览器	Chrome 130+ / Edge 130+	地址栏 `about:version` 查看
文件	`html-practice/list-table.html`	后缀 `.html`，UTF-8
前置	A05	能写相对路径与图片

3 原理与实现

3.1 三类列表的适用边界

列表类型由内容关系决定，与外观无关，如图 3-1 所示。

flowchart TD
    Q{"条目之间是什么关系"} -->|"并列，无先后"| UL["ul 无序列表"]
    Q -->|"有先后或数量"| OL["ol 有序列表"]
    Q -->|"名称与解释成对"| DL["dl 描述列表"]
    UL --> EX1["导航、标签、要点"]
    OL --> EX2["操作步骤、排行榜"]
    DL --> EX3["术语表、参数说明"]

图 3-1 列表类型的选择路径

图上可见：先判断关系再选标签，编号外观不是选择依据——ol 可以用 CSS 去掉数字，ul 也可以加编号。

3.2 列表与表格的完整写法

<!-- 运行环境：Chrome 130+；body 内内容 -->
<h2>本周待办</h2>
<ol>
  <li>完成个人主页的结构</li>
  <li>补齐图片替代文本</li>
  <li>运行链接检查
    <ul>
      <li>站内链接</li>
      <li>外链可达性</li>
    </ul>
  </li>
</ol>

<h2>术语</h2>
<dl>
  <dt>DOM</dt>
  <dd>浏览器解析 HTML 后得到的树形结构。</dd>
  <dt>语义化</dt>
  <dd>用能表达含义的标签替代通用容器。</dd>
</dl>

<h2>课程安排</h2>
<table>
  <caption>2026 年秋季课程表</caption>
  <thead>
    <tr>
      <th scope="col">时间</th>
      <th scope="col">周一</th>
      <th scope="col">周三</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">09:00</th>
      <td>HTML 结构</td>
      <td>CSS 布局</td>
    </tr>
    <tr>
      <th scope="row">14:00</th>
      <td colspan="2">项目实践（合班）</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">共 2 天，6 课时</td>
    </tr>
  </tfoot>
</table>

各标签的作用与常见误用见表 3-1。

标签	作用	常见误用
`ul`	无序列表容器	用 `div` 模拟，丢失条目语义
`ol`	有序列表容器	手写序号后又用 `ol`
`li`	列表项，只能作 ul/ol 子元素	直接在 `ul` 里放 `div`
`dl`	描述列表容器	用 `ul` + 加粗模拟术语
`dt` / `dd`	术语 / 解释，必须成对	一个 `dt` 配零个 `dd`
`table`	二维数据容器	用于页面布局
`caption`	表格标题，紧随 `table`	用外部 `h3` 代替
`thead/tbody/tfoot`	表头、主体、汇总分区	省略后浏览器自动补 `tbody`（正常）
`th`	表头单元格，需 `scope`	用 `td` 加粗冒充表头
`td`	数据单元格	用 `th` 放数据
`colspan/rowspan`	跨列 / 跨行合并	合并后单元格数量写错，导致错位

规则四条：li 只能作为 ul/ol 的直接子元素；嵌套列表放在 li 内部而不是列表兄弟位置；th 必须声明 scope（col 或 row）；合并单元格后，同一行的 td 数量要相应减少。

4 验证与讨论

保存文件并刷新，确认三类列表与表格全部显示。
打开开发者工具 Elements 面板，确认浏览器为表格自动补全了 tbody。
对照表 4-1 检查结构与呈现。
把 colspan="2" 删掉，观察表格第二行错位，再加回，理解合并与列数的关系。

检查项	预期结果	说明
有序列表	显示 1、2、3，嵌套子项为圆点	ol 与 ul 的默认样式
描述列表	术语与解释各占一行，解释有缩进	dl 默认样式
表格标题	显示在表格上方居中	caption 默认位置
合并单元格	第二行横跨两列，表格边缘对齐	colspan 生效
表头关联	朗读软件读「时间周一」而非「单元格」	scope 生效

讨论与局限。 表格在窄屏下会溢出容器，浏览器默认不换行压缩，表现为横向滚动条或页面被撑宽；响应式表格方案需要 CSS 配合，C 阶段展开。另外 caption 是表格唯一的标题入口，外部标题不会被朗读软件识别为表格标题。

5 常见问题

现象	原因	处理
列表项前没有圆点	列表项写成了 `div` 或 `p`	改为 `li`，父级保持 `ul`
表格整体错位	合并单元格后同行单元格数量不匹配	按「总列数 = 各单元格 colspan 之和」核对
表格没有表头	用了 `td` 加粗，未用 `th`	表头单元格改 `th` 并加 `scope`
表格标题重复显示	`caption` 与外部标题都写了一份	只保留 `caption` 或外部标题之一
单元格内容被截断	宽度受限且未换行	由 CSS 处理，先确认结构无误

6 结论

序号	结论	依据
1	先判断内容关系，再选列表类型	图 3-1
2	`li` 的父元素只能是 `ul` 或 `ol`	表 3-1
3	表头用 `th` 并声明 `scope`	表 3-1
4	合并单元格后同行单元格数要相应减少	4 节步骤 4

参考文献

[1] MDN Web Docs · HTML 表格，https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table（访问于 2026-10-29）
[2] HTML Living Standard · Tabular data，WHATWG，https://html.spec.whatwg.org/multipage/tables.html（访问于 2026-10-29）