PHP小码农

Appearance

列表与表格 ​

本节将介绍 HTML 中用于组织结构化数据的两种重要元素：列表（List）和表格（Table）。学完本节，你将掌握无序列表、有序列表和定义列表的使用方式，以及表格的基本构建方法。

前置知识

阅读本节前，建议先了解：链接与图片

基础概念 ​

列表和表格都是用于组织结构化信息的 HTML 元素。列表适合展示项目集合（如导航菜单、步骤说明、特性清单），表格适合展示行列交叉的二维数据（如价格对比、成绩统计、日程安排）。

HTML 提供三种列表类型：无序列表（Unordered List） 使用 <ul> 标签，适合没有顺序要求的项目；有序列表（Ordered List） 使用 <ol> 标签，适合有先后顺序的项目；定义列表（Description List） 使用 <dl> 标签，适合术语和解释的配对。表格通过 <table>、<tr>（行）、<th>（表头）和 <td>（单元格）标签构建。

无序列表 ​

无序列表用于展示没有特定顺序的项目集合，浏览器通常在每项前面显示一个圆点标记。

基本语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>无序列表示例</title>
</head>
<body>
  <h1>无序列表</h1>

  <!-- 无序列表：ul 包裹多个 li -->
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
</body>
</html>

嵌套列表 ​

列表可以嵌套，形成层级结构：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>嵌套列表示例</title>
</head>
<body>
  <h1>嵌套列表</h1>

  <!-- 二级嵌套 -->
  <ul>
    <li>前端技术
      <!-- 子列表嵌套在父 li 中 -->
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </li>
    <li>后端技术
      <ul>
        <li>Node.js</li>
        <li>Python</li>
        <li>Java</li>
      </ul>
    </li>
    <li>数据库
      <ul>
        <li>MySQL</li>
        <li>MongoDB</li>
        <li>Redis</li>
      </ul>
    </li>
  </ul>
</body>
</html>

有序列列表 ​

有序列表用于展示有特定顺序的项目集合，浏览器会自动为每项添加编号。

基本语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>有序列表示例</title>
</head>
<body>
  <h1>有序列表</h1>

  <!-- 有序列表：ol 包裹多个 li，自动编号 -->
  <ol>
    <li>打开文本编辑器</li>
    <li>编写 HTML 代码</li>
    <li>保存为 .html 文件</li>
    <li>在浏览器中打开</li>
  </ol>
</body>
</html>

有序列表的 type 和 start 属性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>有序列表属性示例</title>
</head>
<body>
  <h1>有序列表的 type 和 start</h1>

  <!-- type="A"：使用大写字母编号 -->
  <h2>大写字母编号</h2>
  <ol type="A">
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
  </ol>

  <!-- type="i"：使用小写罗马数字编号 -->
  <h2>罗马数字编号</h2>
  <ol type="i">
    <li>第一个章节</li>
    <li>第二个章节</li>
    <li>第三个章节</li>
  </ol>

  <!-- start="5"：从第 5 个编号开始 -->
  <h2>自定义起始编号</h2>
  <ol start="5">
    <li>第五项</li>
    <li>第六项</li>
    <li>第七项</li>
  </ol>

  <!-- reversed：倒序编号（HTML5 新增） -->
  <h2>倒序编号</h2>
  <ol reversed>
    <li>最后一项</li>
    <li>倒数第二项</li>
    <li>倒数第三项</li>
  </ol>
</body>
</html>

有序列表 type 属性值 ​

值说明示例效果
1（默认）阿拉伯数字1, 2, 3
A大写字母A, B, C
a小写字母a, b, c
I大写罗马数字I, II, III
i小写罗马数字i, ii, iii

不推荐使用 type 属性

虽然可以通过 type 属性改变编号样式，但现代开发中推荐使用 CSS 的 list-style-type 属性来控制。HTML 的 type 属性主要用于在不支持 CSS 的场景（如邮件客户端）中提供降级方案。

定义列表 ​

定义列表用于展示术语和描述的配对，适合词汇表、FAQ 等。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>定义列表示例</title>
</head>
<body>
  <h1>定义列表</h1>

  <!-- dl 包裹 dt（术语）和 dd（描述） -->
  <dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language，超文本标记语言，用于构建网页结构。</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets，层叠样式表，用于控制网页的视觉样式。</dd>

    <dt>JavaScript</dt>
    <dd>一种编程语言，用于实现网页的交互行为和动态效果。</dd>
  </dl>

  <hr>

  <!-- 一个 dt 可以对应多个 dd -->
  <h2>多重描述</h2>
  <dl>
    <dt>Web 前端</dt>
    <dd>指用户直接看到和交互的网页界面部分。</dd>
    <dd>核心技术包括 HTML、CSS 和 JavaScript。</dd>
    <dd>常用框架有 React、Vue、Angular。</dd>
  </dl>
</body>
</html>

列表元素对照表 ​

元素全称用途项目标记
<ul>Unordered List无序列表容器圆点（默认）
<ol>Ordered List有序列表容器数字编号（默认）
<li>List Item列表项取决于父元素
<dl>Description List定义列表容器无标记
<dt>Description Term术语/名称无标记
<dd>Description Details术语描述缩进显示

表格 ​

表格用于展示二维结构化数据，由行和列交叉组成。

基本结构 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表格示例</title>
</head>
<body>
  <h1>表格基础</h1>

  <!-- table：表格容器 -->
  <!-- tr：表格行（Table Row） -->
  <!-- th：表头单元格（Table Header） -->
  <!-- td：数据单元格（Table Data） -->
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>25</td>
      <td>广州</td>
    </tr>
  </table>
</body>
</html>

表格的语义化结构 ​

对于较复杂的表格，应该使用 <thead>、<tbody> 和 <tfoot> 来划分区域：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>语义化表格示例</title>
</head>
<body>
  <h1>语义化表格</h1>

  <table>
    <!-- thead：表头区域 -->
    <thead>
      <tr>
        <th>产品</th>
        <th>第一季度</th>
        <th>第二季度</th>
        <th>第三季度</th>
        <th>第四季度</th>
      </tr>
    </thead>

    <!-- tbody：数据区域 -->
    <tbody>
      <tr>
        <td>产品 A</td>
        <td>120 万</td>
        <td>150 万</td>
        <td>180 万</td>
        <td>200 万</td>
      </tr>
      <tr>
        <td>产品 B</td>
        <td>80 万</td>
        <td>95 万</td>
        <td>110 万</td>
        <td>130 万</td>
      </tr>
      <tr>
        <td>产品 C</td>
        <td>50 万</td>
        <td>60 万</td>
        <td>55 万</td>
        <td>70 万</td>
      </tr>
    </tbody>

    <!-- tfoot：表尾区域（常用于汇总） -->
    <tfoot>
      <tr>
        <th>合计</th>
        <th>250 万</th>
        <th>305 万</th>
        <th>345 万</th>
        <th>400 万</th>
      </tr>
    </tfoot>
  </table>
</body>
</html>

表格元素对照表 ​

元素全称用途
<table>—表格容器
<thead>Table Head表头区域分组
<tbody>Table Body数据区域分组
<tfoot>Table Foot表尾区域分组
<tr>Table Row表格行
<th>Table Header表头单元格（加粗居中）
<td>Table Data数据单元格
<caption>—表格标题/说明

表格的 caption 和合并单元格 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表格高级示例</title>
</head>
<body>
  <h1>表格的高级用法</h1>

  <table>
    <!-- caption：表格标题，应紧跟在 table 标签后 -->
    <caption>2024 年各区域销售数据（单位：万元）</caption>

    <thead>
      <tr>
        <th>区域</th>
        <th>上半年</th>
        <th>下半年</th>
        <th>全年合计</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>华北</td>
        <!-- colspan="2"：合并 2 列 -->
        <td colspan="2">合并的上半年下半年数据</td>
        <td>500</td>
      </tr>
      <tr>
        <!-- rowspan="2"：合并 2 行 -->
        <td rowspan="2">华东</td>
        <td>300</td>
        <td>400</td>
        <td>700</td>
      </tr>
      <tr>
        <td>350</td>
        <td>450</td>
        <td>800</td>
      </tr>
      <tr>
        <td>华南</td>
        <td>200</td>
        <td>250</td>
        <td>450</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <th>总计</th>
        <th colspan="2">---</th>
        <th>2450</th>
      </tr>
    </tfoot>
  </table>
</body>
</html>

合并单元格属性 ​

属性作用使用位置说明
colspan="n"横向合并 n 列<th> 或 <td>当前单元格占据 n 列宽度
rowspan="n"纵向合并 n 行<th> 或 <td>当前单元格占据 n 行高度

合并单元格注意事项

使用 colspan 或 rowspan 后，被合并的单元格位置不需要对应的 <td> 或 <th> 标签。例如 rowspan="2" 意味着下一行的对应位置不需要再写 <td>。

列表与表格的实际应用 ​

导航菜单（使用列表） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>导航菜单示例</title>
</head>
<body>
  <!-- 导航菜单本质是一个无序列表 -->
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/products">产品</a></li>
      <li>
        <!-- 嵌套列表作为子菜单 -->
        <a href="/services">服务</a>
        <ul>
          <li><a href="/services/design">设计</a></li>
          <li><a href="/services/development">开发</a></li>
          <li><a href="/services/consulting">咨询</a></li>
        </ul>
      </li>
      <li><a href="/about">关于</a></li>
      <li><a href="/contact">联系</a></li>
    </ul>
  </nav>
</body>
</html>

数据表格 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>课程表示例</title>
</head>
<body>
  <h1>课程表</h1>

  <table>
    <caption>2024 春季学期课程安排</caption>

    <thead>
      <tr>
        <th>时间</th>
        <th>周一</th>
        <th>周二</th>
        <th>周三</th>
        <th>周四</th>
        <th>周五</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>8:00 - 9:40</td>
        <td>高等数学</td>
        <td>英语</td>
        <td>高等数学</td>
        <td>物理</td>
        <td>体育</td>
      </tr>
      <tr>
        <td>10:00 - 11:40</td>
        <td>编程基础</td>
        <td>线性代数</td>
        <td>编程基础</td>
        <td>英语</td>
        <td>选修</td>
      </tr>
      <tr>
        <td>14:00 - 15:40</td>
        <td>物理实验</td>
        <td>编程实验</td>
        <td>物理</td>
        <td>线性代数</td>
        <td>---</td>
      </tr>
      <tr>
        <td>16:00 - 17:40</td>
        <td>选修</td>
        <td>---</td>
        <td>选修</td>
        <td>---</td>
        <td>社团活动</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

实战示例 ​

示例：产品特性对比页 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端框架对比</title>
</head>
<body>
  <header>
    <h1>前端框架对比</h1>
    <p>三大主流框架的核心特性一览。</p>
  </header>

  <main>
    <!-- 特性列表 -->
    <section>
      <h2>共同特性</h2>
      <ul>
        <li>组件化开发模式</li>
        <li>虚拟 DOM 机制</li>
        <li>丰富的生态系统</li>
        <li>强大的社区支持</li>
        <li>支持 TypeScript</li>
        <li>服务端渲染（SSR）能力</li>
      </ul>
    </section>

    <hr>

    <!-- 对比表格 -->
    <section>
      <h2>详细对比</h2>

      <table>
        <caption>React vs Vue vs Angular 核心对比</caption>

        <thead>
          <tr>
            <th>特性</th>
            <th>React</th>
            <th>Vue</th>
            <th>Angular</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>开发者</td>
            <td>Meta（Facebook）</td>
            <td>Evan You 及社区</td>
            <td>Google</td>
          </tr>
          <tr>
            <td>首次发布</td>
            <td>2013 年</td>
            <td>2014 年</td>
            <td>2016 年</td>
          </tr>
          <tr>
            <td>语言</td>
            <td>JavaScript（JSX）</td>
            <td>JavaScript（模板）</td>
            <td>TypeScript</td>
          </tr>
          <tr>
            <td>学习曲线</td>
            <td>中等</td>
            <td>较低</td>
            <td>较高</td>
          </tr>
          <tr>
            <td>状态管理</td>
            <td>Redux / Zustand</td>
            <td>Pinia / Vuex</td>
            <td>RxJS / NgRx</td>
          </tr>
          <tr>
            <td>路由方案</td>
            <td>React Router</td>
            <td>Vue Router</td>
            <td>Angular Router</td>
          </tr>
          <tr>
            <td>包大小（min）</td>
            <td>约 42 KB</td>
            <td>约 33 KB</td>
            <td>约 143 KB</td>
          </tr>
        </tbody>
      </table>
    </section>

    <hr>

    <!-- 推荐场景 -->
    <section>
      <h2>推荐使用场景</h2>

      <dl>
        <dt>React</dt>
        <dd>适合大型应用、需要灵活架构的团队。</dd>
        <dd>React Native 可用于移动端开发。</dd>

        <dt>Vue</dt>
        <dd>适合中小型项目、快速上手的新手。</dd>
        <dd>文档友好、渐进式引入。</dd>

        <dt>Angular</dt>
        <dd>适合企业级应用、TypeScript 重度使用者。</dd>
        <dd>完整的框架，包含路由、表单、HTTP 等工具。</dd>
      </dl>
    </section>

    <footer>
      <p><small>数据截至 2024 年初，各框架持续迭代中。</small></p>
    </footer>
  </main>
</body>
</html>

注意事项 ​

  • 列表不要用于缩进——列表应该只用于展示项目集合，不要为了制造文本缩进而滥用列表
  • 表格不要用于布局——在 CSS Flexbox 和 Grid 出现之前，表格被广泛用于页面布局，现在已不推荐。表格应仅用于展示数据
  • colspan 和 rowspan 合并单元格时，确保对应的 <td> 不被重复声明
  • 有序列表的 type 属性在现代开发中应通过 CSS 的 list-style-type 控制
  • 表格的 <caption> 应紧跟 <table> 标签之后，在其他子元素之前
  • 列表项 <li> 只能嵌套在 <ul>、<ol> 或 <menu> 中
  • <dt> 和 <dd> 只能嵌套在 <dl> 中

最佳实践 ​

  • 使用 <ul> 展示无序项目，使用 <ol> 展示有步骤或排名的项目
  • 嵌套列表时，子列表应放在父级 <li> 的内部，而非外部
  • 表格使用 <thead>、<tbody>、<tfoot> 语义化分组
  • 为表格添加 <caption> 标题说明
  • 使用 scope 属性增强表头单元格的语义（如 <th scope="col">、<th scope="row">）
  • 复杂表格添加 aria-label 或 <figcaption> 辅助说明
  • 列表和表格都应保持数据的一致性和完整性

下一节

继续学习：浏览器与环境准备

参考链接 ​