列表与表格

并列几条信息、二维数据展示,是网页里最常见的两种内容形态。这一章讲怎么用列表(ul/ol/dl)和表格(table)正确地组织它们。

1. 无序列表 ul 和有序列表 ol

列表分两种:无序列表 ul(圆点,默认)和有序列表 ol(自动加序号)。每一项用 li(list item)包裹:

<!-- 无序列表 ul:圆点(默认),用得最多 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>葡萄</li>
</ul>

<!-- 有序列表 ol:自动加序号 1.2.3. -->
<ol>
  <li>打开冰箱</li>
  <li>把大象放进去</li>
  <li>关上冰箱</li>
</ol>

怎么选?简单原则:顺序重要吗? 重要用 ol(步骤、排名、流程),不重要用 ul(特性、菜单、标签云)。

2. ol 的常用属性

有序列表可以通过属性控制起始数字、序号类型:

<ol start="5">
  <li>从 5 开始计数</li>
  <li>这一项是 6</li>
</ol>

<!-- reversed:倒序 -->
<ol reversed>
  <li>第一项(显示为 3)</li>
  <li>第二项(显示为 2)</li>
  <li>第三项(显示为 1)</li>
</ol>

<!-- type:改成字母或罗马数字 -->
<ol type="A">    <!-- A. B. C. -->
<ol type="a">    <!-- a. b. c. -->
<ol type="I">    <!-- I. II. III. 罗马数字 -->
<ol type="i">    <!-- i. ii. iii. 小写罗马 -->

<!-- 单项改序号 -->
<ol>
  <li>第一项</li>
  <li value="10">跳到 10</li>
  <li>这一项是 11</li>
</ol>

这些属性很少用,但偶尔做教程目录、合同条款时会用到。

3. 嵌套列表

列表可以嵌套,做成多级目录。关键是内层 ul 必须放在外层 li 里面,不能直接放在 ul 里:

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>白菜</li>
      <li>萝卜</li>
    </ul>
  </li>
</ul>
<!-- 嵌套时,内层 ul 必须放在 li 里面 -->

这是新手最容易写错的地方——记住"内容(包括子列表)都属于当前 li"。

4. 定义列表 dl

还有一种特殊的列表,用于"术语 + 解释"的成对信息,如词典、 FAQ。用 dl(description list):

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言,网页的骨架。</dd>

  <dt>CSS</dt>
  <dd>层叠样式表,负责外观。</dd>

  <dt>JavaScript</dt>
  <dd>脚本语言,负责交互。</dd>
</dl>
<!-- dl = description list 描述列表
     dt = description term 术语
     dd = description detail 详细说明 -->

一个 dt 可以配多个 dd(一个术语有多条解释),反之亦然。做名词解释、 FAQ 折叠面板时很好用。

5. 列表使用场景

导航菜单、商品特性、步骤说明、面包屑、评论列表……列表在网页里几乎无处不在。养成一个习惯:需要并列几条信息时,第一反应是"用列表"而不是"用一堆 div"。这样代码更语义化、CSS 更好写、SEO 更友好。

6. 表格 table 基本结构

展示二维数据(行列)用 table。完整结构包含 thead(表头)、tbody(表体)、tfoot(表尾),每行 tr,每个单元格 td(普通)或 th(表头,默认加粗居中):

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>22</td>
      <td>上海</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>2 人</td>
      <td>-</td>
    </tr>
  </tfoot>
</table>

几个要点:

thead / tbody / tfoot 是语义分组,让浏览器和读屏软件知道"这是表头、那是数据"。tbody 即使不写,浏览器也会自动补一个。
th 表示"表头单元格",重要的语义:加粗、居中,且读屏软件会朗读每行数据时带上对应表头。无障碍必备。
th 可以加 scope="col"(列头)或 scope="row"(行头),明确语义。

7. 合并单元格 colspan 和 rowspan

需要把几个单元格合并成一个时用 colspan(横向合并)和 rowspan(纵向合并):

<table>
  <tr>
    <th>姓名</th>
    <th colspan="2">联系方式</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>电话:138...</td>
    <td>邮箱:xm@...</td>
  </tr>
  <tr>
    <td colspan="3">备注:以上信息保密</td>
  </tr>
</table>
<!-- colspan 横向合并单元格;
     rowspan 纵向合并(数字是跨几行) -->

合并单元格是表格里最容易出错的地方,新手常常算错列数导致表格错位。数清楚每行 td 的总宽度是否一致(合并算 N,就少写 N-1 个 td)。

8. 表格的常见陷阱

表格虽简单,但有几个坑:

别用 table 做页面布局:上世纪大家用 table 排版,现在已经是反模式。布局该用 div + CSS,响应式才好做。
表格只用于真正的数据:成绩单、价格对比、销售数据。一篇新闻不要硬塞进表格。
响应式表格难做:小屏幕上表格会溢出,常见解法是 CSS 让表格横向滚动(overflow-x: auto),或重排成"卡片式"。
表格嵌套别太深:超过两层嵌套说明结构设计有问题。

9. 实战示例:一个销售数据表

把所有概念组合起来,做一个真实场景的表格:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>22</td>
      <td>上海</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>合计</td>
      <td>2 人</td>
      <td>-</td>
    </tr>
  </tfoot>
</table>

结构清晰:表头让数据一目了然,合计行单独放在 tfoot 便于维护。

10. 给表格加 CSS

原生的 table 没有边框和间距,看着很丑。常见的 CSS 样式:

border-collapse 设为 collapse:合并相邻单元格的边框(默认是分开的,看着像双线)。
给 th 和 td 设 padding 和 border:加内边距和边框。
用 nth-child 选中 tbody 的偶数行:加背景色,提高可读性(斑马纹)。
给 th 设 background:表头背景色。

小结

这一章你学会了三种列表(ul、ol、dl)和表格的完整结构,知道了什么时候用列表、什么时候用表格。记住几个原则:并列信息用列表、二维数据用表格、页面布局永远不用 table。下一篇我们看网页交互的入口——表单。

← 上一篇链接与图片

下一篇表单 →

✈️💬