任务1.5　在网页中添加表格

☑学习目标

①能够说出表格的三个基本元素。

②能够使用表格标签对表格的数据结构进行编排，从而呈现数据间的关系。

☑任务描述

根据《百度搜索引擎网页质量白皮书》效果图，制作该白皮书中的表格。

☑知识学习与课堂练习

表格的作用是组织信息。HTML表格就像是电子表格，由行和列构成，每个表格单元格处于行和列的交汇处。

①表格由＜table＞元素来定义，以＜table＞标记开始，＜/table＞标记结束。

②表格中的行以＜tr＞元素来定义，每一行都以＜tr＞标记开始，＜/tr＞标记结束。

③表格中的单元格以＜td＞元素来定义，每个单元格都以＜td＞标记开始，＜/td＞标记结束。

④表格单元格可包含文本、图片和其他HTML元素。

其语法形式如下：

【课堂练习1.5-1】创建简单的两行两列表格。

打开Visual Studio Code软件，在＜body＞标签中输入如下代码：

显示效果如图1.5-1所示。

默认情况下，表格没有边框线，可以使用样式表为其定义边框线、线条样式、粗细和边框颜色。这在后面的章节中会学到。

1.表格的标题（＜caption＞元素）

每一个表格都可以通过＜caption＞元素来对表格的目的做一个简单的说明，＜caption＞元素的内容用来描述表格的特征，并且＜caption＞元素必须紧接着＜table＞元素开始标签后被定义，一个＜table＞元素中仅能包含一个＜caption＞元素。

其语法形式如下：

【课堂练习1.5-2】添加表格标题。

打开Visual Studio Code软件，在＜body＞标签中输入如下代码：

显示效果如图1.5-2所示。

2.表格的表头（th元素）

在表格中还有一种特殊的单元格，称为表头。表格的表头一般位于第1行和第1列，用来配置列标题或行标题，用＜th＞和＜/th＞标签来表示。表格的表头与＜td＞标签使用方法相同，但表头元素中的文本居中和加粗显示。

其语法形式如下：

【课堂练习1.5-3】添加表格表头。

打开Visual Studio Code软件，在＜body＞标签中输入如下代码：

显示效果如图1.5-3所示。

3.跨多行、多列的单元格

单元格可以跨越多个横行或竖列的多个单元格，跨越横行或竖列的数量通过rowspan或colspan属性来对＜th＞或＜td＞元素进行设置。

（1）rowspan属性指定单元格所占的行数

其语法形式如下：

＜td rowspan=跨的行数＞

【课堂练习1.5-4】设置单元格行跨度。

显示效果如图1.5-4所示。

（2）colspan属性指定单元格所占的列数

其语法形式如下：

＜td colspan=跨的列数＞

【课堂练习1.5-5】设置单元格列跨度。

打开Visual Studio Code软件，在＜body＞标签中输入如下代码：

显示效果如图1.5-5所示。

☑任务实施

①打开任务1.4中的index.html文件。

②完成“网页广告单页”中的表格显示效果。

☑任务回顾

在日常生活中，我们对表格式数据已经很熟悉了。这种数据有多种形式，如财务数据、调查数据、事件日历、公交时刻表、电视节目等。在大多数情况下，这类信息都会使用表格进行表示。

☑任务拓展

在未知表格内容的长度而进行打印时，为了在每页的头尾都印出表格表头和页脚标签内容（此功能需浏览器支持）时，需要在table元素的标签内容中配置＜thead＞、＜tfoot＞、＜tbody＞元素。

1.表格表头＜thead＞

＜thead＞元素用来显示表格的表头，为＜table＞元素的子元素，该标签内容中可包含＜tr＞元素与＜tr＞元素的子元素。其用法为＜thead＞…＜/thead＞。

2.表格页脚＜tfoot＞

＜tfoot＞元素用来显示表格的页脚，为＜table＞元素的子元素，该标签内容中可包含＜tr＞元素与＜tr＞元素的子元素。其用法为＜tfoot＞…＜/tfoot＞。

3.表格主体＜tbody＞

＜tbody＞元素用来指定表格主体（表格的数据），为＜table＞元素的子元素，该标签内容中可包含＜tr＞元素与＜tr＞元素的子元素。其用法为＜tbody＞…＜/tbody＞。

【课后练习】使用＜thead＞、＜tfoot＞、＜tbody＞元素完成如图1.5-6所示的效果。