HTML5+CSS3网页设计实例教程-第4章-表格与列表.ppt

1、HTML5+CSS3网页设计实例教程第4章 表格与列表第第4章章 表格与列表表格与列表本章概述 本章的学习目标主要内容HTML5+CSS3网页设计实例教程第4章 表格与列表第2页本章概述本章概述l表格以行和列显示信息，它们被普遍用于显示所表格以行和列显示信息，它们被普遍用于显示所有适合网格结构的数据，如列车时刻表、电视节有适合网格结构的数据，如列车时刻表、电视节目表、财务报告以及体育赛事结果。列表可以有目表、财务报告以及体育赛事结果。列表可以有序地编排一些信息资源，使其结构化和条理化，序地编排一些信息资源，使其结构化和条理化，以方便浏览者更加快捷地获取信息。本章将主要以方便浏览者更加快捷地获取

2、信息。本章将主要介绍何时使用表格以及创建它们所需要的标记。介绍何时使用表格以及创建它们所需要的标记。本章还介绍如何在本章还介绍如何在HTML中创建中创建3种类型的列表。种类型的列表。HTML5+CSS3网页设计实例教程第4章 表格与列表第3页本章的学习目标本章的学习目标l了解表格的概念及在了解表格的概念及在HTML中使用的方法中使用的方法l掌握基本表格元素与特性掌握基本表格元素与特性l了解创建易访问表格的方法了解创建易访问表格的方法l掌握各种形式列表的实现掌握各种形式列表的实现HTML5+CSS3网页设计实例教程第4章 表格与列表第4页主要内容主要内容4.1 表格介绍表格介绍4.2 基本表格元

3、素与特性基本表格元素与特性4.3 为表格添加标题为表格添加标题4.4 表格区域分组表格区域分组4.5 嵌套表格嵌套表格4.6 易访问表格易访问表格4.7 使用列表使用列表4.8 表格应用实例表格应用实例4.9 本章小结本章小结HTML5+CSS3网页设计实例教程第4章 表格与列表第5页4.1 表格介绍表格介绍l想要使用表格，需要以想要使用表格，需要以“网格网格”(grid)模式去思考。模式去思考。行 第 1 行 第 1 行 第 1 行 第 1 行 第 2 行 第 2 行 第 2 行 第 2 行 第 3 行 第 3 行 第 3 行 第 3 行 第 4 行 第 4 行 第 4 行 第 4 行 第

4、5 行 第 5 行 第 5 行 第 5 行 列 第 1 列 第 1 列 第 1 列 第 1 列 第 1 列 第 2 列 第 2 列 第 2 列 第 2 列 第 2 列 第 3 列 第 3 列 第 3 列 第 3 列 第 3 列 第 4 列 第 4 列 第 4 列 第 4 列 第 4 列 表格由行和列所组成HTML5+CSS3网页设计实例教程第4章 表格与列表第6页主要内容主要内容4.1 表格介绍表格介绍4.2 基本表格元素与特性基本表格元素与特性4.3 为表格添加标题为表格添加标题4.4 表格区域分组表格区域分组4.5 嵌套表格嵌套表格4.6 易访问表格易访问表格4.7 使用列表使用列表4.8

5、 表格应用实例表格应用实例4.9 本章小结本章小结HTML5+CSS3网页设计实例教程第4章 表格与列表第7页4.2 基本表格元素与特性基本表格元素与特性l前面已经介绍了基本表格是如何工作的，本节将前面已经介绍了基本表格是如何工作的，本节将对这些元素稍微加以描述，并将介绍它们可包含对这些元素稍微加以描述，并将介绍它们可包含的特性。其中一些特性可用于创建更加复杂的表的特性。其中一些特性可用于创建更加复杂的表格布局。格布局。HTML5+CSS3网页设计实例教程第4章 表格与列表第8页元素创建表格元素创建表格l元素是所有表格的包含元素。它可以包含元素是所有表格的包含元素。它可以包含以下特性：以下特性

6、：l所有通用特性所有通用特性l面向脚本的基本事件特性面向脚本的基本事件特性dir特性特性元素包含表格行元素包含表格行与与元素表示表格单元元素表示表格单元colspan特性特性headers特性特性rowspan特性特性scope特性特性HTML5+CSS3网页设计实例教程第4章 表格与列表第9页创建基本表格创建基本表格l我们已经了解了表格的基础元素与特性，现在可我们已经了解了表格的基础元素与特性，现在可以创建一个显示关于以创建一个显示关于Example Caf经营时间信息经营时间信息的表格。的表格。展示营业时间的表格HTML5+CSS3网页设计实例教程第4章 表格与列表第10页主要内容主要内容

7、4.1 表格介绍表格介绍4.2 基本表格元素与特性基本表格元素与特性4.3 为表格添加标题为表格添加标题4.4 表格区域分组表格区域分组4.5 嵌套表格嵌套表格4.6 易访问表格易访问表格4.7 使用列表使用列表4.8 表格应用实例表格应用实例4.9 本章小结本章小结HTML5+CSS3网页设计实例教程第4章 表格与列表第11页4.3 为表格添加标题为表格添加标题l无论表格是用于显示某特定试验的结果还是无论表格是用于显示某特定试验的结果还是某一特定市场的股票指数，抑或今晚的电视某一特定市场的股票指数，抑或今晚的电视节目？每一个表格都应该拥有一个标题，这节目？每一个表格都应该拥有一个标题，这样网

8、站访问者才能知道表格的用途。样网站访问者才能知道表格的用途。l即使周围的文本描述了表格的内容，使用即使周围的文本描述了表格的内容，使用元素赋予表格一个正式的标题仍元素赋予表格一个正式的标题仍然是一项良好的习惯。默认情况下，多数浏然是一项良好的习惯。默认情况下，多数浏览器在表格之上的中央位置显示该元素的内览器在表格之上的中央位置显示该元素的内容。容。HTML5+CSS3网页设计实例教程第4章 表格与列表第12页主要内容主要内容4.1 表格介绍表格介绍4.2 基本表格元素与特性基本表格元素与特性4.3 为表格添加标题为表格添加标题4.4 表格区域分组表格区域分组4.5 嵌套表格嵌套表格4.6 易访

9、问表格易访问表格4.7 使用列表使用列表4.8 表格应用实例表格应用实例4.9 本章小结本章小结HTML5+CSS3网页设计实例教程第4章 表格与列表4.4 表格区域分组表格区域分组l使用使用rowspan及及colspan特性使单元跨越多特性使单元跨越多个行或列。个行或列。l将表格分割为三个区域：表头、表体以及将表格分割为三个区域：表头、表体以及表尾。表尾。l使用使用元素对列分组。元素对列分组。l使用使用元素在不相关列之间共享特性。元素在不相关列之间共享特性。第13页HTML5+CSS3网页设计实例教程第4章 表格与列表使用使用colspan特性跨越列特性跨越列l对于对于及及元素，二者都可以

10、包含一元素，二者都可以包含一个叫做个叫做colspan的特性，该特性使表格单元的特性，该特性使表格单元可以跨越多于一个列。可以跨越多于一个列。第14页有三个列的表格HTML5+CSS3网页设计实例教程第4章 表格与列表使用使用rowspan特性跨域行特性跨域行lrowspan特性的作用于特性的作用于colspan特性很类似特性很类似，只是它在相反的方向上工作：，只是它在相反的方向上工作：rowspan使单元可以纵向跨越单元行。使单元可以纵向跨越单元行。第15页rowspan特性的效果HTML5+CSS3网页设计实例教程第4章 表格与列表将表格分解为表头、表体及表尾将表格分解为表头、表体及表尾l

11、某些情况下，可能需要将表体（装载大部某些情况下，可能需要将表体（装载大部分表格数据的地方）与表头或者甚至表尾分表格数据的地方）与表头或者甚至表尾区分出来。区分出来。第16页本例在FireFox浏览器中的效果HTML5+CSS3网页设计实例教程第4章 表格与列表使用使用元素进行列分组元素进行列分组l如果两个或更多列是相互关联的，则可以如果两个或更多列是相互关联的，则可以使用使用元素解释这些列应该被归元素解释这些列应该被归到同一组中。到同一组中。第17页使用元素进行列分组HTML5+CSS3网页设计实例教程第4章 表格与列表使用使用元素在列间共享样式元素在列间共享样式l元素为元素为中的列指定特性中

12、的列指定特性(如列内单元的宽度与对齐方式如列内单元的宽度与对齐方式)。与。与元素不同，元素不同，元素不隐含元素不隐含任何解构性分组，因此被更多地用于呈现任何解构性分组，因此被更多地用于呈现目的。目的。第18页使用元素在列间共享样式HTML5+CSS3网页设计实例教程第4章 表格与列表第19页主要内容主要内容4.1 表格介绍表格介绍4.2 基本表格元素与特性基本表格元素与特性4.3 为表格添加标题为表格添加标题4.4 表格区域分组表格区域分组4.5 嵌套表格嵌套表格4.6 易访问表格易访问表格4.7 使用列表使用列表4.8 表格应用实例表格应用实例4.9 本章小结本章小结HTML5+CSS3网页

13、设计实例教程第4章 表格与列表第20页4.5 嵌套表格嵌套表格l可以在表格单元中包含标记，只要该元素可以在表格单元中包含标记，只要该元素全部包含于单元内即可。将另一个表格整全部包含于单元内即可。将另一个表格整体放置于一个表格单元内，从而创建了一体放置于一个表格单元内，从而创建了一个所谓的个所谓的“嵌套表格嵌套表格”(nested table)。一个周末活动计划的表格HTML5+CSS3网页设计实例教程第4章 表格与列表第21页主要内容主要内容4.1 表格介绍表格介绍4.2 基本表格元素与特性基本表格元素与特性4.3 为表格添加标题为表格添加标题4.4 表格区域分组表格区域分组4.5 嵌套表格嵌

14、套表格4.6 易访问表格易访问表格4.7 使用列表使用列表4.8 表格应用实例表格应用实例4.9 本章小结本章小结HTML5+CSS3网页设计实例教程第4章 表格与列表第22页4.6 易访问表格易访问表格l表格本身可以包含大量数据，并能对这些信表格本身可以包含大量数据，并能对这些信息提供一种很有帮助的视觉呈现形式。在查息提供一种很有帮助的视觉呈现形式。在查看一张表格时，很容易就可以通过上下左右看一张表格时，很容易就可以通过上下左右扫描，在行与列之间找到一个特定的值，或扫描，在行与列之间找到一个特定的值，或者比较一定范围的值。者比较一定范围的值。HTML5+CSS3网页设计实例教程第4章 表格与

15、列表如何线性化表格如何线性化表格l在一个屏幕阅读器被用于阅读表格时，它在一个屏幕阅读器被用于阅读表格时，它通常会对其进行线性化，意思是说阅读器通常会对其进行线性化，意思是说阅读器会从第一行起，自左向右朗读行中的单元会从第一行起，自左向右朗读行中的单元，一个接一个，直到移动到下一行之前，一个接一个，直到移动到下一行之前，然后继续这样读，直到阅读器读完了表格然后继续这样读，直到阅读器读完了表格中的每一行。中的每一行。第23页HTML5+CSS3网页设计实例教程第4章 表格与列表使用使用id、scope及及headers特性特性l在创建单元表头时，在在创建单元表头时，在元素中添加元素中添加scope

16、特性有助于指定该表头应用于哪些特性有助于指定该表头应用于哪些单元。如果将其赋值为单元。如果将其赋值为row，就指定了该元，就指定了该元素是所在行的表头；而当值为素是所在行的表头；而当值为column时，时，就表明它是所在列的表头。就表明它是所在列的表头。lheaders特性所扮演的角色与特性所扮演的角色与scope特性正特性正相反。因为它在相反。因为它在元素中用于指定哪些元素中用于指定哪些表头对应于该单元。该特性的值是一个由表头对应于该单元。该特性的值是一个由空格分隔的表头单元空格分隔的表头单元id特性值列表。特性值列表。第24页HTML5+CSS3网页设计实例教程第4章 表格与列表创建易访问

17、表格创建易访问表格l为为Example Caf网站创建一个新页面，提网站创建一个新页面，提供一个周末烹饪课程的时间表。一共供一个周末烹饪课程的时间表。一共2天上天上午和下午的课程。午和下午的课程。第25页一个周末烹饪课程的时间表HTML5+CSS3网页设计实例教程第4章 表格与列表第26页主要内容主要内容4.1 表格介绍表格介绍4.2 基本表格元素与特性基本表格元素与特性4.3 为表格添加标题为表格添加标题4.4 表格区域分组表格区域分组4.5 嵌套表格嵌套表格4.6 易访问表格易访问表格4.7 使用列表使用列表4.8 表格应用实例表格应用实例4.9 本章小结本章小结HTML5+CSS3网页设

18、计实例教程第4章 表格与列表4.7 使用列表使用列表l无序列表：比如项目列表无序列表：比如项目列表l有序列表：使用有序数字或字母而非圆点有序列表：使用有序数字或字母而非圆点l定义列表：使你可以指定术语及其定义定义列表：使你可以指定术语及其定义第27页HTML5+CSS3网页设计实例教程第4章 表格与列表使用使用元素创建无序列表元素创建无序列表l如果想要创建一个项目列表，应该将其写在如果想要创建一个项目列表，应该将其写在元素中。需要写下的每一项或每一行都元素中。需要写下的每一项或每一行都应该位于开标签应该位于开标签和闭标签和闭标签之间。之间。第28页列表的显示效果HTML5+CSS3网页设计实例

19、教程第4章 表格与列表有序列表有序列表l在有序列表中，不是在每项前放置圆点，而在有序列表中，不是在每项前放置圆点，而是可以使用数字是可以使用数字(1、2、3)、字母、字母(A、B、C)或罗马数字或罗马数字(i、ii、iii)来前置标识它们。来前置标识它们。l有序列表项位于有序列表项位于元素中。之后每一个列元素中。之后每一个列表项都应嵌套于表项都应嵌套于元素内，并且包含在元素内，并且包含在开标签和开标签和闭标签之间。闭标签之间。使用使用start特性修改有序列表的起始数字特性修改有序列表的起始数字使用使用reversed特性实现列表顺序倒数特性实现列表顺序倒数使用使用type特性指定序列标记特性

20、指定序列标记第29页HTML5+CSS3网页设计实例教程第4章 表格与列表定义列表定义列表l定义列表是一种特殊类型的列表，它的列定义列表是一种特殊类型的列表，它的列表项由术语和随后的简短文字定义或描述表项由术语和随后的简短文字定义或描述组成。定义列表包含在组成。定义列表包含在元素内。之后元素内。之后在在元素内部包含了交替出现的元素内部包含了交替出现的和和元素。元素。第30页定义列表HTML5+CSS3网页设计实例教程第4章 表格与列表列表嵌套列表嵌套l可以在一个列表中嵌套另可以在一个列表中嵌套另一列表。例如，将一个带一列表。例如，将一个带有独立序列的编号列表放有独立序列的编号列表放入一个对应列

21、表项中。除入一个对应列表项中。除非使用非使用start特性另行指定特性另行指定起始序列号，每一个嵌套起始序列号，每一个嵌套列表都将独立排序。每一列表都将独立排序。每一个新列表都置于一个个新列表都置于一个元素内。元素内。第31页列表嵌套HTML5+CSS3网页设计实例教程第4章 表格与列表第32页主要内容主要内容4.1 表格介绍表格介绍4.2 基本表格元素与特性基本表格元素与特性4.3 为表格添加标题为表格添加标题4.4 表格区域分组表格区域分组4.5 嵌套表格嵌套表格4.6 易访问表格易访问表格4.7 使用列表使用列表4.8 表格应用实例表格应用实例4.9 本章小结本章小结HTML5+CSS3

22、网页设计实例教程第4章 表格与列表4.8 表格应用实例表格应用实例l在本例的表格上显示在本例的表格上显示了当天的主要市场上了当天的主要市场上蔬菜的市场价格信息蔬菜的市场价格信息。在设计时，主要用。在设计时，主要用到了分组、表头以及到了分组、表头以及单元格合并，放入单单元格合并，放入单元格文字和图片信息元格文字和图片信息等。等。第33页本例在Google Chrome中浏览效果HTML5+CSS3网页设计实例教程第4章 表格与列表第34页主要内容主要内容4.1 表格介绍表格介绍4.2 基本表格元素与特性基本表格元素与特性4.3 为表格添加标题为表格添加标题4.4 表格区域分组表格区域分组4.5

23、嵌套表格嵌套表格4.6 易访问表格易访问表格4.7 使用列表使用列表4.8 表格应用实例表格应用实例4.9 本章小结本章小结HTML5+CSS3网页设计实例教程第4章 表格与列表第35页4.9 本章小结本章小结l在本章中，介绍了表格在创建页面时可以成为怎样在本章中，介绍了表格在创建页面时可以成为怎样的强大工具，以及所有表格如何基于一种网格模式的强大工具，以及所有表格如何基于一种网格模式，并使用，并使用4种基本元素：种基本元素：，包含每一个表格，包含每一个表格；，包含表格的行；，包含表格的行；，包含表格数据的一，包含表格数据的一个单元；以及个单元；以及，表示一个包含表头的单元。，表示一个包含表头的单元。l在进行文字排版时，经常需要用到列表效果。在本在进行文字排版时，经常需要用到列表效果。在本章中，介绍了如何在章中，介绍了如何在HTML中创建如下中创建如下3种类型的种类型的列表：列表：无序列表：比如项目列表无序列表：比如项目列表有序列表：使用有序数字或字母而非圆点有序列表：使用有序数字或字母而非圆点定义列表：使你可以指定术语及其定义定义列表：使你可以指定术语及其定义