《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》 课件 第6章 HTML5表格

第6章HTML5表格内容提要《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》表格是组织数据的一种有效方法，表格不仅仅用在文字处理上，在网页的作用也非常重要，特别是表现列表数据方面。本章首先介绍HTML5表格的组成，接下来介绍

HTML5表格的标签，然后重点介绍<table>、<tr>和<td>及如何实现嵌套表格，最后通过叮叮书店购物车页面介绍表格的应用。本章要点《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》HTML5表格组成。常用的表格标签<table>、<tr>、<th>和<td>。嵌套表格。6.1表格——表格结构《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》表格是由行和列组成的二维表，每个表格均有若干行，每行有若干列，行和列围成的区域是单元格，单元格的内容是数据，也称数据单元格，数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。表格通过在行和列的标题之间进行视觉关联的方法，可以让信息能够很简单地被解读出来。一个典型的HTML5表格结构包括一个标题、头部、主体和脚部。标签6.1表格——表格表格由<table>来定义，行由<tr>定义，单元格由<td>定义，这三个标签是表格常用的标签。《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》6.1表格——表格标签《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》例6.1

table.html使用表格标签实现了一个典型的表格。HTML5表格主要用于表格数据，但很多人习惯用

HTML5表格来实现网页布局，建议不要这样做，这是因为:表格会产生很多标签，这会导致代码变得难于编写、维护和调试。表格不能自动响应。正常使用的布局结构标签（如<article>和<div>等），默认的宽度是父元素的100%，而表格的默认大小是根据单元格的内容决定的。表格布局减少了视觉受损用户的可访问性。6.2常用表格标签——<table>标签《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》<table>标签定义表格，简单的HTML5表格由<table>以及一个或多个<tr>、<th>或<td>元素组成，<tr>定义表格行，<th>定义标题单元格，<td>定义数据单元格。更复杂的HTML5表格也可能包括<caption>、<col>、<colgroup>、<thead>、<tfoot>以及<tbody>元素。6.2常用表格标签——<tr>标签《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》<tr>定义HTML5表格中的行，<tr>包含一个或多个<th>或<td>元素。6.2常用表格标签——<th>标签《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》HTML5表格单元格有标题单元格和数据单元格。<th>定义HTML5表格中的标题单元格，表格的标题是特殊的单元格，通常在行或列的开始处。可以使用scope属性来说明标题单元格是列标题还是行标题，如果值为“row”，表示标题与其

所属行的所有单元格相关，如果值为“col”，表示标题与其所属列的所有单元格相关。scope属性会让表格变得更加无障碍，每个标题与相同行或列中的所有数据相关联，这样屏幕阅读设备能一次读出一列或一行的数据。用来帮助屏幕阅读设备更好地理解那些标题单元格到底是列标题还是行标题。6.2常用表格标签——<th>标签《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》HTML5表格的<table>和单元格（<th>和<td>）

都有自己的边框线，默认边框线宽度为0，表格显示没有边框，可以使用CSS样式进行设置。例6.2

table-border.html中，把表格周围的边框设置为3px宽，单元格的边框设置为1px宽。为了符合Web标准，示例中直接使用CSS样式设置边框。标签colspan和rowspan属性用于建立不规范表格，

所谓不规范表格是单元格的个数不等于行乘以列的数值。6.2常用表格标签——<td><td>定义HTML5表格中的数据单元格。《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》6.2常用表格标签——<td>标签如下图3行3列的表格共有9个单元格，左图所示是一个规范表格，右图所示是一个不规范表格，右图中第一行的第2、3两个单元格合并为一个单元格，即第一行第2个单元格横跨2列，把第一行第3个单元格位置占据了。第二行的第3个单元格和第三行的第3个单元格两个单元格合并为一个单元格，即第二行第3个单元格横跨2行，把第三行第3个单元格位置占据了。例6.3

table-td.html实现下图所示的不规范表格《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》6.2常用表格标签——<colgroup>和<col>标签如果想让表格中每一列的单元格样式都一样，可以使用<colgroup>和<col>标签。<colgroup>标签用于对表格中的列进行组合，以便对其样式进行格式化。<col>标签为表格中一个或多个列定义属性值，只能在<table>或<colgroup>元素中使用<col>标签。<col>标签常用属性。span属性规定<col>元素应该横跨的列数。在默认情况下，它只能影响一列。《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》6.2常用表格标签——<colgroup>和<col>标签《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》<col>元素是空元素，必须在<tr>元素内部<td>元素里，才能使用<col>。。修改例6.2

table-border.html

，为表格中的四个列设置三种不同的背景色。例子中“background-color:hsl(236,51%,90%);”是样式声明，定义单元格背景色。6.2常用表格标签——<caption>标签《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》使用<caption>标签可以为表格增加一个标题，<caption>标签需放在<table>标签的下面。标题是对表格内容的描述，对那些希望可以通过标题，来决定是否需要了解更详细表格内容的快速浏览者来说，是非常有用的。6.2常用表格标签——<thead>、<tbody>和<tfoot>标签《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》<thead>标签定义表格的头部，<tbody>标签定义表格主体，<tfoot>标签定义表格的脚部。<thead>应该与<tbody>和<tfoot>结合起来使用。如果使用<thead>、<tbody>以及<tfoot>元素，就必须全部使用。它们出现的次序是：<thead>、<tbody>、<tfoot>，必须在<table>内部使用这些标签，<thead>内部必须拥有<tr>标签。6.3嵌套表格《HTML5+CSS3+ES6贯穿式项目实战-微课视频版》在一个表格的单元格里插入一个完整的表格，称为嵌套表格，一般不建议这样做，因为这种做法会使标记看上去很难理解，对使用屏幕阅读的用户来说，可访问性也降低。例6.4

table-nesting.html在表格右下角一个合并的单元格中嵌套了另一个完整的表格。6.4叮叮书店购物车页面的建立启动Visual

Studio

Code，打开叮叮书店项目，新建文件cart1.html，在cart1.html中，使用5行5列的表格显示购物车的内容，第1行为表格标题行，最后1行为统计行。《HTML5+CSS3+ES6贯穿式项目实战-微课视