列表与表格

列表

列表是网页中最常用的一种数据排列方式，我们在浏览网页时，会到看到各种列表的身影，如下图所示。

在 HTML 中，列表共有3种：有序列表、无序列表和定义列表。

在有序列表中，列表项之间有先后顺序之分。在无序列表中，列表项之间是没有先后顺序之分的。而定义列表是一组带有特殊含义的列表，一个列表项中包含“条件”和“列表”两部分。

有序列表

在 HTML 中，有序列表中的各个列表项是有顺序的。有序列表从 <ol> 开始，到 </ol> 结束。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序。

语法：

html

<ol>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ol>

说明：

ol，即 ordered list（有序列表）；li，即 list（列表项）。

在该语法中，<ol> 和 </ol> 标志着有序列表的开始和结束，而 <li> 和 </li> 标签表示这是一个列表项。一个有序列表可以包含多个列表项。

注意：ol 标签和 li 标签是配合一起使用，不可以单独使用，而且 <ol> 标签的子标签只能是 li 标签，不能是其他标签。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>有序列表</title>
  </head>
  <body>
    <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>jQuery</li>
      <li>Vue.js</li>
    </ol>
  </body>
</html>

浏览器预览效果如下图所示。

HTML
CSS
JavaScript
jQuery
Vue.js

表项的顺序能不能用“a、b、c”这种英文字母的形式来表示顺序呢？当然可以！这就需要用到下面介绍的 type 属性了。

type 属性

在 HTML 中，我们可以使用 type 属性来改变列表项符号。默认情况下，有序列表使用数字作为列表项符号。

语法：

html

<ol type="属性值">
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ol>

说明：

在有序列表中， type 属性取值如下表所示。

属性值	列表项符号
1	阿拉伯数字：1、2、3……
a	小写英文字母：a、b、c……
A	大写英文字母：A、B、C……
i	小写罗马数字：i、ii、iii……
I	大写罗马数字：I、II、III……

对于有序列表的列表项符号，等学了 CSS 之后，我们可以放弃 type 属性，而使用 list-style-type 属性。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>type属性</title>
  </head>
  <body>
    <ol type="a">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>jQuery</li>
      <li>Vue.js</li>
    </ol>
  </body>
</html>

浏览器预览效果如下图所示。

HTML
CSS
JavaScript
jQuery
Vue.js

无序列表

无序列表，很好理解，有序列表的列表项是有一定顺序的，而无序列表的列表项是没有顺序的。默认情况下，无序列表的列表项符号是 ●，不过可以通过 type 属性来改变其样式。

html

<ul>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ul>

说明：

ul，即 unordered list（无序列表）。li，即 list（列表项）。

在该语法中，使用 <ul></ul> 标签表示一个无序列表的开始和结束，<li> 表示这是一个列表项。一个无序列表可以包含多个列表项。

注意， ul 标签和 li 标签也是配合一起使用，不可以单独使用，而且 ul 标签的子标签也只能是 li 标签，不能是其他标签。这一点跟有序列表是一样的。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>无序列表</title>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>jQuery</li>
      <li>Vue.js</li>
    </ul>
  </body>
</html>

浏览器预览效果如下图所示。

HTML
CSS
JavaScript
jQuery
Vue.js

type 属性

跟有序列表一样，我们也可以使用 type 属性来定义列表项符号。

语法：

html

<ul type="属性值">
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ul>

说明：

在无序列表中， type 属性取值如下表所示。

属性值	列表项符号
disc	实心圆●（默认值）
circle	空心圆○
square	正方形■

跟有序列表一样，对于无序列表的列表项符号，等学了 CSS 之后，我们可以放弃 type 属性，而使用 list-style-type 属性。

表格

表格简介

表格在实际开发中用得非常多，因为使用表格可以更清晰地排列数据，如下图所示。

基本结构

在 HTML 中，一个表格一般会由以下3个部分组成。

表格：table 标签
行：tr 标签
单元格：td 标签

语法：

html

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

效果：

单元格1	单元格2
单元格3	单元格4

说明：

tr，指的是 table row（表格行）；td，指的是 table data cell（表格单元格）。

<table> 和 </table> 表示整个表格的开始和结束，<tr> 和 </tr> 表示行的开始和结束，而 <td> 和</td> 表示单元格的开始和结束。

在表格中，有多少组 <tr></tr> ，就表示有多少行。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>表格基本结构</title>
    <!--这里使用 `CSS` 为表格加上边框-->
    <style>
      table,
      tr,
      td {
        border: 1px solid silver;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>HTML</td>
        <td>CSS</td>
      </tr>
      <tr>
        <td>JavaScript</td>
        <td>jQuery</td>
      </tr>
    </table>
  </body>
</html>

浏览器预览效果如下图所示。

分析：

默认情况下，表格是没有边框的。在这个例子中，我们使用 CSS 加入边框，是想让大家更清楚地看到一个表格结构。对于表格的边框、颜色、大小等，我们在 CSS 中会学到，这里不需要理解那一句 CSS 代码。

在 HTML 学习中，我们只需要知道表格用什么标签就行了。记住，学习 HTML 时，只管结构就行了，学习 CSS 时，再考虑样式。

完整结构（了解）

一个表格的“完整结构”不仅仅只有 table、tr、td，还包括 caption、th 等。

表格标题：caption

在 HTML 中，表格一般都会有一个标题，我们可以使用 caption 标签来实现。

语法：

html

<table>
  <caption>
    表格标题
  </caption>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

说明：

一个表格只能有一个标题，也就是只能有一个 caption 标签。在默认情况下，标题都是位于整个表格内的第一行。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>表格标题</title>
    <!--这里使用 `CSS` 为表格加上边框-->
    <style>
      table,
      tr,
      td {
        border: 1px solid silver;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        考试成绩表
      </caption>
      <tr>
        <td>小明</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
      </tr>
      <tr>
        <td>小红</td>
        <td>90</td>
        <td>90</td>
        <td>90</td>
      </tr>
      <tr>
        <td>小杰</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
      </tr>
    </table>
  </body>
</html>

浏览器预览效果如下图所示。

分析：

默认情况下，表格是没有边框的。在这个例子中，我们使用 CSS 加入边框是想让大家更清楚地看到一个表格结构。

表头单元格：th

在 HTML 中，单元格其实有两种：表头单元格，使用 th 标签；表行单元格，使用 td 标签。

th，指的是 table header cell（表头单元格）。td，指的是table data cell（表行单元格）。

语法：

html

<table>
  <caption>
    表格标题
  </caption>
  <tr>
    <th>表头单元格1</th>
    <th>表头单元格2</th>
  </tr>
  <tr>
    <td>表行单元格1</td>
    <td>表行单元格2</td>
  </tr>
  <tr>
    <td>表行单元格3</td>
    <td>表行单元格4</td>
  </tr>
</table>

说明：

th 和 td 在本质上都是单元格，但是并不代表两者可以互换，两者具有以下两种区别。

当然，对于表头单元格，我们可能会使用 td 来代替 th，但是不建议这样做。因为在 “HTML语义化” 这一节我们已经明确说过了：学习 HTML 的目的就是，在需要的地方用到正确的标签（也就是语义化）。

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>表头单元格</title>
    <!--这里使用 `CSS` 为表格加上边框-->
    <style>
      table,
      tr,
      td,
      th {
        border: 1px solid silver;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        考试成绩表
      </caption>
      <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>英语</th>
        <th>数学</th>
      </tr>
      <tr>
        <td>小明</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
      </tr>
      <tr>
        <td>小红</td>
        <td>90</td>
        <td>90</td>
        <td>90</td>
      </tr>
      <tr>
        <td>小杰</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
      </tr>
    </table>
  </body>
</html>

浏览器预览效果如下图所示。

分析：

默认情况下，表格是没有边框的。在这个例子中，我们使用 CSS 加入边框是想让大家更清楚地看到一个表格结构。

表格语义化

一个完整的表格包含：table、caption、tr、th、td。为了更深一地对表格进行语义化， HTML 引入了 thead、tbody 和 tfoot 标签。

thead、tbody 和 tfoot 把表格划分为3部分：表头、表身、表脚。有了这些标签，表格语义更加良好，结构更加清晰，也更具有可读性和可维护性。

语法：

html

<table>
  <caption>
    表格标题
  </caption>
  <!--表头-->
  <thead>
    <tr>
      <th>表头单元格1</th>
      <th>表头单元格2</th>
    </tr>
  </thead>
  <!--表身-->
  <tbody>
    <tr>
      <td>表行单元格1</td>
      <td>表行单元格2</td>
    </tr>
    <tr>
      <td>表行单元格3</td>
      <td>表行单元格4</td>
    </tr>
  </tbody>
  <!--表脚-->
  <tfoot>
    <tr>
      <td>标准单元格5</td>
      <td>标准单元格6</td>
    </tr>
  </tfoot>
</table>

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>表格语义化</title>
    <!--这里使用 `CSS` 为表格加上边框-->
    <style>
      table,
      tr,
      td,
      th {
        border: 1px solid silver;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        考试成绩表
      </caption>
      <thead>
        <tr>
          <th>姓名</th>
          <th>语文</th>
          <th>英语</th>
          <th>数学</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>小明</td>
          <td>80</td>
          <td>80</td>
          <td>80</td>
        </tr>
        <tr>
          <td>小红</td>
          <td>90</td>
          <td>90</td>
          <td>90</td>
        </tr>
        <tr>
          <td>小杰</td>
          <td>100</td>
          <td>100</td>
          <td>100</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>平均</td>
          <td>90</td>
          <td>90</td>
          <td>90</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

浏览器预览效果如下图所示。

分析：

表脚（tfoot）往往用于统计数据的。对于thead、tbody和 tfoot 标签，不一定全部都上，例如 tfoot 就很少用。一般情况下，我们都是根据实际需要来使用这些标签。

thead、tbody和 tfoot 标签也是表格中非常重要的标签，它从语义上区分了表头、表身和表脚，很多人容易忽略它们。

此外，thead、tbody和 tfoot 除了使得代码更具有语义之外，还有另外一个重要作用：方便分块来控制表格的 CSS 样式。

常见问题：

1、对于表格的显示效果来说，thead、tbody和 tfoot 标签加了跟没加是一样的啊，为什么还要用呢？

单纯从显示效果来说，确实如此。曾经作为初学者时，我也有过这样的疑问。但是加了之后，会让你的代码更具有逻辑性，并且还可以很好地结合 CSS 来分块控制样式。

合并行：rowspan

在设计表格时，有时我们需要将“横向的 N 个单元格”或者“纵向的 N 个单元格”合并成一个单元格（类似 word 的表格合并），这个时候就需要用到“合并行”或“合并列”。这一节，我们先来介绍一下合并行。

在 HTML 中，我们可以使用 rowspan 属性来合并行。所谓的合并行，指的是将“纵向的 N 个单元格”合并。

语法：

html

<td rowspan="跨越的行数"></td>

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>rowspan 属性</title>
    <style>
      table,
      tr,
      td {
        border: 1px solid silver;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>姓名:</td>
        <td>小明</td>
      </tr>
      <tr>
        <td rowspan="2">喜欢水果:</td>
        <td>苹果</td>
      </tr>
      <tr>
        <td>香蕉</td>
      </tr>
    </table>
  </body>
</html>

浏览器预览效果如下图所示。

分析：

这里为了简化例子就不直接用标准语义来写了，但是小伙伴们再实际开发中要记得语义化。在这个例子中，如果我们将 rowspan="2" 删除后，此时预览效果就变成如下图所示。

所谓的合并行，其实就是将表格相邻的 N 个行合并。在这个例子中，rowspan="2"实际上是让加上rowspan 属性的这个 td 标签跨越两行。

合并列：colspan

在 HTML 中，我们可以使用 colspan 属性来合并列。所谓的合并列，指的是将“横向的 N 个单元格”合并。

语法：

html

<td colspan="跨越的列数"></td>

举例：

html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>colspan属性</title>
    <style>
      table,
      tr,
      td {
        border: 1px solid silver;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td colspan="2">前端开发技术</td>
      </tr>
      <tr>
        <td>HTML</td>
        <td>CSS</td>
      </tr>
      <tr>
        <td>JavaScript</td>
        <td>jQuery</td>
      </tr>
    </table>
  </body>
</html>

浏览器预览效果如下图所示。

分析：

如果我们 colspan="2"删除后，此时预览效果就变成如下图所示。

列表与表格 ​

列表 ​

有序列表 ​

type 属性 ​

无序列表 ​

type 属性 ​

表格 ​

表格简介 ​

基本结构 ​

完整结构（了解） ​

表格标题：caption ​

表头单元格：th ​

表格语义化 ​

合并行：rowspan ​

合并列：colspan ​

列表与表格

列表

有序列表

type 属性

无序列表

type 属性

表格

表格简介

基本结构

完整结构（了解）

表格标题：caption

表头单元格：th

表格语义化

合并行：rowspan

合并列：colspan