Lists-and-Tables-Structure-and-Semantics

HTML 可访问性语义化列表表格

字数统计: 4.4k阅读时长: 19 min

 2026/04/15 

第5课：列表与表格

在网页中组织信息时，列表和表格是两种最基础且强大的结构。列表适用于呈现具有并列、顺序或定义关系的一组条目；表格则用于展示多维度的结构化数据。正确使用它们不仅是语义化的要求，更能大幅提升内容的可读性与可访问性。本节课将逐一拆解 HTML 中三类列表的适用场景、嵌套规则，以及表格的完整结构与无障碍设计要点。

1. 无序列表 `<ul>`：并列关系的集合

<ul>（Unordered List）表示项目之间没有先后顺序的列表，例如导航菜单、功能列表、标签云。

<h3>前端开发需掌握的三大语言</h3>
<ul>
  <li>HTML：定义网页结构与内容</li>
  <li>CSS：控制视觉样式与布局</li>
  <li>JavaScript：实现交互与动态逻辑</li>
</ul>

1.1 浏览器默认样式与重置

浏览器默认会为 <ul> 添加左内边距（padding-left）或外边距，并为每个 <li> 添加圆点标记（list-style-type: disc）。

/* 常见重置方案 */
ul {
  margin: 0;
  padding-left: 1.5rem; /* 保留缩进以维持层级感 */
  list-style-type: none; /* 移除默认圆点，常用于导航栏 */
}

1.2 列表项内容：允许嵌套块级元素

<li> 内部不仅可以包含纯文本，还可以放置任意 HTML 元素——包括标题、段落、图片，甚至另一个 <ul>（形成嵌套列表）。

<ul>
  <li>
    <h4>第一阶段：基础入门</h4>
    <p>掌握 HTML、CSS 和 JavaScript 核心语法。</p>
  </li>
  <li>
    <h4>第二阶段：框架学习</h4>
    <p>选择一个主流框架（React、Vue 或 Angular）深入学习。</p>
  </li>
</ul>

1.3 修改项目符号样式

通过 CSS list-style-type 属性可更改标记样式。

值	效果
`disc`	● 实心圆（默认）
`circle`	○ 空心圆
`square`	■ 实心方块
`none`	无标记
自定义（`::before`）	使用伪元素实现图标列表

ul.custom-icon {
  list-style-type: none;
  padding-left: 0;
}
ul.custom-icon li::before {
  content: "✓";
  color: green;
  margin-right: 8px;
}

2. 有序列表 `<ol>`：顺序至关重要的步骤

<ol>（Ordered List）表示项目之间存在明确的先后顺序，例如食谱步骤、排行榜、操作指南。

<h3>Git 提交代码的标准流程</h3>
<ol>
  <li>git add .   # 将修改加入暂存区</li>
  <li>git commit -m "描述本次修改"</li>
  <li>git pull origin main   # 拉取远程最新代码</li>
  <li>git push origin main   # 推送至远程仓库</li>
</ol>

2.1 编号类型与起始值控制

通过 type 属性和 start 属性可以定制编号样式。

属性	值	效果
`type="1"`	默认	1, 2, 3, 4…
`type="A"`	大写字母	A, B, C, D…
`type="a"`	小写字母	a, b, c, d…
`type="I"`	大写罗马数字	I, II, III, IV…
`type="i"`	小写罗马数字	i, ii, iii, iv…
`start="5"`	整数	从 5 开始编号（适用于任何 type）
`reversed`	布尔属性	倒序编号（HTML5 新增）

<!-- 从字母 C 开始编号 -->
<ol type="A" start="3">
  <li>第三项（显示为 C）</li>
  <li>第四项（显示为 D）</li>
</ol>

<!-- 倒序排名 -->
<ol reversed>
  <li>季军</li>
  <li>亚军</li>
  <li>冠军</li>
</ol>

2.2 `<li>` 的 `value` 属性

可以在单个 <li> 上使用 value 属性，手动指定该项的编号，后续项会在此基础上递增。

<ol>
  <li>第一步</li>
  <li value="10">第十步（手动指定）</li>
  <li>第十一步（自动递增）</li>
</ol>

3. 描述列表 `<dl>`：术语与解释的配对

<dl>（Description List）用于呈现术语-描述或键值对结构，例如词汇表、FAQ、元数据列表。

<h3>前端术语表</h3>
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于定义网页的结构和语义内容。</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表，负责网页的视觉呈现和布局。</dd>
  
  <dt>JavaScript</dt>
  <dd>一种动态脚本语言，赋予网页交互能力。</dd>
</dl>

3.1 元素组成

标签	全称	作用
`<dl>`	Description List	定义整个描述列表的容器。
`<dt>`	Description Term	定义待解释的术语或名称。
`<dd>`	Description Details	定义术语的具体描述。一个 `<dt>` 可对应多个 `<dd>`。

3.2 一对多关系

一个术语可以有多个描述段落，多个术语也可以共享一个描述。

<dl>
  <dt>前端框架</dt>
  <dd>React：由 Meta 维护的 UI 库。</dd>
  <dd>Vue：渐进式 JavaScript 框架。</dd>
  <dd>Angular：基于 TypeScript 的企业级平台。</dd>
</dl>

<dl>
  <dt>闭包</dt>
  <dt>Closure</dt>
  <dd>函数能够记住并访问其词法作用域，即使函数在其词法作用域之外执行。</dd>
</dl>

3.3 样式布局应用

通过 CSS Flexbox 或 Grid 可将 <dl> 转换为水平布局的键值对（如商品参数表）。

.horizontal-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
}
.horizontal-dl dt {
  font-weight: bold;
}

4. 表格 `<table>`：结构化数据的完整解剖

表格用于展示多维数据。一个语义完整的表格远不止 <table>、<tr>、<td> 这么简单。

4.1 表格的最小结构

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>32</td>
    <td>上海</td>
  </tr>
</table>

但此写法缺失语义——第一行的标题实际上应该用 <th> 标记。

4.2 表头单元格 `<th>` 与 `scope` 属性

<th> 表示表头单元格，默认文本加粗居中。scope 属性声明该表头作用于行还是列，对视障用户至关重要。

<table>
  <tr>
    <th scope="col">姓名</th>
    <th scope="col">年龄</th>
    <th scope="col">城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
    <td>北京</td>
  </tr>
</table>

`scope` 值	含义
`col`	表头作用于列（该 `<th>` 下方的所有单元格）。
`row`	表头作用于行（该 `<th>` 右侧的所有单元格）。
`colgroup`	表头作用于列组（配合 `<colgroup>` 使用）。
`rowgroup`	表头作用于行组（配合 `<tbody>` 多个行组使用）。

4.3 表格完整语义分区：`<thead>`、`<tbody>`、`<tfoot>`

将表格分为表头、主体、表尾三个区域，浏览器会据此优化渲染（如长表格滚动时固定表头），并便于 CSS 单独控制。

<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">笔记本电脑</th>
      <td>1,200</td>
      <td>¥7,200,000</td>
    </tr>
    <tr>
      <th scope="row">无线耳机</th>
      <td>3,500</td>
      <td>¥1,750,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">合计</th>
      <td>4,700</td>
      <td>¥8,950,000</td>
    </tr>
  </tfoot>
</table>

<caption>：表格标题，必须紧跟 <table> 之后，用于概述表格内容。每个表格最多一个。
<thead>：列标题区域。
<tbody>：数据主体区域，一个表格可有多个 <tbody>（用于数据分组）。
<tfoot>：表尾汇总区域，在 DOM 中可位于 <tbody> 之前或之后，但浏览器始终将其渲染在表格底部。

4.4 列组 `<colgroup>` 与 `<col>`：批量控制列样式

<colgroup> 允许对整列统一设置样式，无需为每个单元格添加类名。

<table>
  <colgroup>
    <col span="1" style="background-color: #f0f0f0;">
    <col span="2" style="background-color: #ffffff;">
  </colgroup>
  <tr>
    <th>产品</th>
    <th>价格</th>
    <th>库存</th>
  </tr>
  <tr>
    <td>鼠标</td>
    <td>¥89</td>
    <td>120</td>
  </tr>
</table>

span 属性：指定该 <col> 应用于多少列。
可设置的 CSS 属性有限：background、border、width、visibility。

4.5 合并单元格：`colspan` 与 `rowspan`

colspan：跨列合并（水平合并）。
rowspan：跨行合并（垂直合并）。

<table border="1">
  <tr>
    <th></th>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
  </tr>
  <tr>
    <th scope="row">产品 A</th>
    <td>100</td>
    <td>150</td>
  </tr>
  <tr>
    <th scope="row" rowspan="2">产品 B</th>
    <td>80</td>
    <td>90</td>
  </tr>
  <tr>
    <!-- 上一行的 rowspan 占据此位置，故本行少一个 td -->
    <td>70</td>
    <td>110</td>
  </tr>
  <tr>
    <th scope="row" colspan="2">总计（跨两列）</th>
    <td>260</td>
  </tr>
</table>

易错点：使用合并后，必须手动删除被合并位置多余的单元格，否则表格会错位。

5. 表格的可访问性与响应式处理

5.1 复杂表头与 `headers` 属性

当表格结构非常复杂（多层表头），仅靠 scope 不足以描述关联关系时，可使用 headers 属性将数据单元格与一个或多个 <th> 的 id 关联。

<table>
  <tr>
    <th id="product" rowspan="2">产品</th>
    <th id="sales" colspan="2">销售数据</th>
  </tr>
  <tr>
    <th id="q1">Q1</th>
    <th id="q2">Q2</th>
  </tr>
  <tr>
    <td headers="product">电脑</td>
    <td headers="sales q1">100</td>
    <td headers="sales q2">150</td>
  </tr>
</table>

5.2 响应式表格策略

表格在小屏幕上容易溢出。常用的解决方案是将表格包裹在可横向滚动的容器内。

<div style="overflow-x: auto;">
  <table>
    <!-- 表格内容 -->
  </table>
</div>

另一种方式是使用 CSS 将表格转换为块级布局（display: block），但会丢失表格语义，不推荐用于数据表格。

课后练习

一、概念自测（选择题 / 填空题）

（单选） 要展示一个包含“HTML”、“CSS”、“JavaScript”三项的列表，且项目之间无顺序关系，应使用：
A. <ol>
B. <ul>
C. <dl>
D. <menu>
（单选） 以下关于 <th scope="col"> 的描述，正确的是？
A. 它声明该单元格是一个数据单元格。
B. 它声明该单元格是作用于行的表头。
C. 它声明该单元格是作用于列的表头。
D. 它对可访问性没有影响。
（填空） 要实现一个从罗马数字 Ⅴ（5）开始编号的有序列表，应使用 <ol type="______" start="______">。
（多选） 以下哪些元素可以出现在 <table> 内部，用于提升语义化和可访问性？
A. <caption>
B. <thead>
C. <tfoot>
D. <colgroup>
E. <header>

二、AI 编程任务：编写面向 AI 的提示词

场景：你需要为一个财务仪表板创建一个季度收入对比表格。要求：

表格标题为“2026 年上半年收入对比（单位：万元）”。
列标题包括：“业务线”、“第一季度”、“第二季度”、“上半年合计”。
数据行包括：“云计算”（Q1: 850, Q2: 920）、“企业软件”（Q1: 620, Q2: 680）、“技术服务”（Q1: 410, Q2: 460）。
需要包含一个表尾行，用于显示各季度的总收入（自动计算：Q1 总计 1880，Q2 总计 2060），以及上半年的总合计（3940），该单元格需跨两列。
必须使用 <thead>、<tbody>、<tfoot> 结构化分区，并为所有 <th> 添加合适的 scope 属性。
表格需包裹在可水平滚动的容器中以适应移动端。

任务要求：请写出一段完整的中文提示词，发送给 AI，使其生成符合上述要求的 HTML 表格代码。提示词中应明确要求语义分区、scope 属性以及响应式包裹容器。

三、面试真题与参考答案

题目（阿里巴巴前端面试题）：

在前端开发中，何时应使用 <table> 展示数据，何时应使用 CSS Grid 或 Flexbox 模拟表格？请从语义、可访问性、渲染性能、响应式适配四个维度进行对比分析。

参考答案：

对比维度	使用 `<table>`	使用 CSS Grid / Flexbox 模拟
语义化	正确语义。浏览器和辅助工具明确知晓这是多维数据表，会启用表格专属导航模式。	丢失表格语义。即使视觉上像表格，屏幕阅读器只会将其读作一系列 `<div>`，无法按行列导航。
可访问性	原生支持。`<th>` + `scope` 提供行列关联，读屏软件可读出每个单元格的上下文表头。	需要大量 ARIA 属性（`role="table"`、`role="row"` 等）手动补全语义，复杂且易出错。
渲染性能	浏览器对 `<table>` 的布局算法经过高度优化，特别是对于固定列宽的静态数据。	Grid 布局更灵活，但在超大量行列（如万行级）时，Grid 的布局计算开销可能大于原生表格。
响应式适配	较弱。原生表格难以在小屏幕上优雅换行，通常只能依赖横向滚动。	极强。Grid 可轻松通过媒体查询改变 `grid-template-columns`，甚至将行转换为卡片式布局。
适用场景	纯粹的数据展示：财报、对比表、规格参数、真正意义上的“表格数据”。	布局需求：仪表板卡片排列、非表格数据但需要网格对齐的 UI 组件、需要复杂响应式的列表。

结论：

当内容本质是结构化、可比较的多维数据时，必须使用 <table>，否则将严重损害可访问性。
当需求是界面布局、网格系统、卡片式排列（即使视觉上有“格子”）时，应使用 CSS Grid 或 Flexbox，避免滥用 <table> 进行布局（这是 1990 年代的反模式）。

课后练习答案

一、概念自测答案

B
- 解析：<ul> 表示无序列表，适用于无顺序关系的并列条目。
C
- 解析：scope="col" 声明该 <th> 是列的表头，作用于下方单元格。scope="row" 则作用于行。
I 和 5
- 解析：type="I" 表示大写罗马数字，start="5" 指定从第 5 项开始，即 V。
A、B、C、D
- 解析：<caption> 提供表格标题；<thead>、<tfoot> 结构化分区；<colgroup> 控制列样式。<header> 是页面级语义标签，不能直接用于 <table> 内部。

二、AI 编程任务参考答案（提示词示例）

示例提示词：
“请为我生成一个财务仪表板使用的季度收入对比表格。具体要求：

表格必须包含 <caption>，文字为：2026 年上半年收入对比（单位：万元）。

使用 <thead> 定义列标题行，包含：业务线、第一季度、第二季度、上半年合计。

使用 <tbody> 包含三条数据行：云计算（850 / 920）、企业软件（620 / 680）、技术服务（410 / 460）。

使用 <tfoot> 定义汇总行：第一列显示 总计，第一季度 汇总为 1880，第二季度 汇总为 2060，上半年合计 汇总为 3940。该汇总单元格需使用 colspan="2" 跨列。

所有 <th> 必须添加正确的 scope 属性（列标题用 scope="col"，每行第一列的业务线名称用 scope="row"）。

将整个表格包裹在 <div style="overflow-x: auto;"> 中以保证移动端可用。

直接输出完整、可复制的 HTML 代码。”

原文作者：WinddSnow

原文链接：https://winddsnow.github.io/2026/04/15/Lists-and-Tables-Structure-and-Semantics/

发表日期：April 15th 2026, 9:00:00 am

更新日期：April 14th 2026, 6:10:56 pm

Next Post

Images-and-Multimedia-HTML-Elements
Previous Post

Hyperlinks-and-Navigation-Best-Practices

CATALOG

1. 第5课：列表与表格