返回

新手进阶：掌握 HTML 列表与表格，打造井然有序的网页

前端

HTML 的列表与表格：信息组织的利器

作为一名网页设计师，组织内容是至关重要的。而 HTML 的列表和表格正是让您的内容井然有序、清晰美观的利器。

3.1 创建无序和有序列表：信息的时尚搭配师

无序和有序列表是展示相关信息序列的绝佳方式。无序列表使用项目符号（如圆点），而有序列表则使用数字或字母来标识项目。

3.1.1 无序列表：

<ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul>

3.1.2 有序列表：

<ol>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol>

3.2 创建表格：数据的结构化展示

表格是组织和展示数据的强大工具，可以将信息分门别类，便于阅读和理解。表格由行和列组成，每个单元格包含一个数据项。

3.2.1 创建表头：

表头是表格的第一行，它定义了每一列的内容。

<thead>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
  </tr>
</thead>

3.2.2 创建表格单元格：

表格单元格是表格中包含数据的单元。

<tbody>
  <tr>
    <td>约翰·史密斯</td>
    <td>25</td>
    <td>软件工程师</td>
  </tr>
  <tr>
    <td>玛丽·琼斯</td>
    <td>30</td>
    <td>医生</td>
  </tr>
</tbody>

3.3 综合案例：打造一个井然有序的网页

现在，让我们将这些知识付诸实践，创建一个井然有序的网页。假设我们想要创建一个关于汽车的网页，其中包含汽车类型、价格和功能的列表。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>汽车类型</h1>
  <ul>
    <li>轿车</li>
    <li>SUV</li>
    <li>皮卡</li>
    <li>跑车</li>
  </ul>
  <table>
    <thead>
      <tr>
        <th>类型</th>
        <th>价格范围</th>
        <th>功能</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>轿车</td>
        <td>$20,000 - $40,000</td>
        <td>舒适、燃油效率高</td>
      </tr>
      <tr>
        <td>SUV</td>
        <td>$30,000 - $60,000</td>
        <td>宽敞、多功能</td>
      </tr>
      <tr>
        <td>皮卡</td>
        <td>$25,000 - $50,000</td>
        <td>载重能力强、耐用</td>
      </tr>
      <tr>
        <td>跑车</td>
        <td>$50,000 以上</td>
        <td>速度快、操控性好</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

结论

通过掌握 HTML 列表和表格，您可以将您的网页内容组织得井然有序，让读者轻松理解和获取信息。通过灵活运用无序和有序列表，以及构建清晰明了的表格，您可以创建信息丰富、赏心悦目的网页，让您的用户享受愉悦的阅读体验。