---
title: "IT课程 HTML基础 012_列表和表格"
date: 2024-01-13T22:30:00.000Z
tags: ["IT课程", "HTML课程", "CSS课程", "JavaScript课程", "Java课程", "计算机系统与网络", "html列表", "html表格"]
categories: ["学习", "HTML基础"]
canonical: https://www.zhaojian.net/it-course-html-012/
author: 赵健
---

### 列表

HTML列表是在网页中组织和呈现信息的重要元素，通过使用不同类型的列表，可以更好地结构化和展示内容。

HTML 列表有三种类型：
1.  无序列表（Unordered list）：使用`<ul>`元素来创建，每个列表项都要用`<li>`元素来表示。
2.  有序列表（Ordered list）：使用`<ol>`元素来创建，列表项同样用`<li>`元素来表示，不同的是它们会自动添加序号。
3.  定义列表（Definition list）：使用`<dl>`元素创建，包含`<dt>`（定义标题）和`<dd>`（定义描述）元素。

##### 无序列表

无序列表是最常见的列表类型，它在每个列表项前添加一个小圆点（也叫做列表符号）。它使用 `<ul>` 作为列表的容器，而 `<li>` 作为描述具体的列表项。

示例：

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

效果：

![示例效果](/uploads/2024/01/20231218221536.png)
##### 有序列表

相对于无序列表，有序列表的每个列表项会使用数字进行标记。有序列表始使用 `<ol>` 作为列表的容器，同样使用 `<li>` 描述具体的列表项。

示例：

```html
<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>
```

效果：

![示例效果](/uploads/2024/01/20231218221551.png)
##### 定义列表

定义列表由`<dl>`（定义列表）、`<dt>`（定义项）和`<dd>`（定义描述）元素组成。定义列表通常用来展示一组术语和它们的定义。

示例：

```html
<dl>
  <dt>术语1</dt>
  <dd>描述1</dd>
  <dt>术语2</dt>
  <dd>描述2</dd>
</dl>
```

效果：

![示例效果](/uploads/2024/01/20231218221605.png)

> [!小结]
> - 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。


***
### 表格

HTML 表格是一种用于展示结构化数据的强大元素。基本的 HTML 表格由 `<table>` 元素表示，其中包含一些关键的子元素，如 `<tr>`（表格行）、`<th>`（表头单元格）和 `<td>`（表格数据单元格）。

示例：

```html
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>21</td>
    <td>女</td>
  </tr>
</table>
```

效果：

![示例效果](/uploads/2024/01/20231218221629.png)

##### 表格元素：

- `<table>`: 表示整个表格。
- `<thead>`: 定义表格头部部分，其中包含 `<th>` 元素用于表示列的标题。
- `<tr>`: 表格行，包含表头单元格 `<th>`。
- `<th>`: 表头单元格，用于标识列的标题。
- `<tbody>`: 定义表格主体部分，其中每行包含 `<td>` 元素用于表示实际的数据。
- `<td>`: 表格数据单元格，包含实际的数据。
- `<tfoot>`: 定义表格尾部部分，一般用于放置表格的总结、汇总或其他尾部信息。
- `<caption>`：用于为 HTML 表格添加标题，标题通常显示在表格的顶部。
- `<colgroup>`：定义表格列的组
- `<col>`：定义用于表格列的属性。

示例：

```html
<table border="1">
  <caption>这是一个表格的标题</caption>
  <colgroup>
    <col style="width: 50px; background-color: #f2f2f2;">
    <col style="width: 100px; background-color: #ddd;">
    <col style="width: 150px; background-color: #f2f2f2;">
  </colgroup>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">总人数: 2</td>
    </tr>
  </tfoot>
</table>
```

效果：

![示例效果](/uploads/2024/01/20231218221648.png)

##### 表格属性：

- `border`：用于指定表格的边框。值为一个数字，表示边框的宽度。
- `cellpadding`：用于指定单元格之间的间距。值为一个数字，表示间距的大小。
- `cellspacing`：用于指定单元格边框之间的间距。值为一个数字，表示间距的大小。
- `width`：用于指定表格的宽度。值为一个数字，表示宽度。
- `height`：用于指定表格的高度。值为一个数字，表示高度。
- `style`：用于指定表格的样式。

示例：

```html
<table style="border-collapse: collapse; width: 60%; margin: 20px auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
  <caption style="font-size: 1.5em; font-weight: bold; padding: 10px; background-color: #3498db; color: #fff;">这是一个漂亮的表格</caption>
  <colgroup>
    <col style="width: 30%;">
    <col style="width: 30%;">
    <col style="width: 40%;">
  </colgroup>
  <thead>
    <tr>
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">姓名</th>
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">年龄</th>
      <th style="border: 1px solid #ddd; padding: 8px; text-align: left; background-color: #3498db; color: #fff;">城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">张三</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">25</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">北京</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">李四</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">30</td>
      <td style="border: 1px solid #ddd; padding: 8px; text-align: left;">上海</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3" style="border: 1px solid #ddd; padding: 8px; text-align: center; background-color: #3498db; color: #fff;">总人数: 2</td>
    </tr>
  </tfoot>
</table>
```

效果：

![示例效果](/uploads/2024/01/20231218221706.png)
##### 表格合并

表格合并是指将两个或多个单元格合并为一个单元格。表格合并可以用来简化表格布局，或突出显示特定数据。使用 `colspan` 属性来指定单元格跨越的行数，或使用 `rowspan` 属性来指定单元格跨越的列数。属性值为一个数字，表示跨越的行数。

示例：

```html
<table border="1">
  <tr>
    <td>单元格 1</td>
    <td colspan="2">横向合并两列</td>
    <td>单元格 4</td>
  </tr>
  <tr>
    <td rowspan="2">纵向合并两行</td>
    <td>单元格 3</td>
    <td>单元格 4</td>
    <td>单元格 5</td>
  </tr>
  <tr>
    <td>单元格 7</td>
    <td>单元格 8</td>
    <td>单元格 9</td>
  </tr>
</table>
```

效果：

![示例效果](/uploads/2024/01/20231218221729.png)

> [!小结]
> - 表格默认情况下不显示边框。
> - `<tr>` 是 table row 的缩写，表示表格的一行。
> - `<td>`：td 是 table data 的缩写，表示表格的数据单元格。
> - `<th>`：th 是 table header 的缩写，表示表格的表头单元格。
> - 大多数浏览器会把表头显示为粗体居中的文本。
> - 表格内可以包含文本、图片、列表、段落、表单、水平线、表格等等。