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

1、第4章 表格与列表本章概述 本章的学习目标主要内容第2页本章概述表格以行和列显示信息，它们被普遍用于显示所有适合网格结构的数据，如列车时刻表、电视节目表、财务报告以及体育赛事结果。列表可以有序地编排一些信息资源，使其结构化和条理化，以方便浏览者更加快捷地获取信息。本章将主要介绍何时使用表格以及创建它们所需要的标记。本章还介绍如何在HTML中创建3种类型的列表。第3页本章的学习目标了解表格的概念及在HTML中使用的方法掌握基本表格元素与特性了解创建易访问表格的方法掌握各种形式列表的实现第4页主要内容4.1 表格介绍4.2 基本表格元素与特性4.3 为表格添加标题4.4 表格区域分组4.5 嵌套表

2、格4.6 易访问表格4.7 使用列表4.8 表格应用实例4.9 本章小结第5页4.1 表格介绍想要使用表格，需要以“网格”(grid)模式去思考。表格由行和列所组成第6页主要内容4.1 表格介绍4.2 基本表格元素与特性4.3 为表格添加标题4.4 表格区域分组4.5 嵌套表格4.6 易访问表格4.7 使用列表4.8 表格应用实例4.9 本章小结第7页4.2 基本表格元素与特性前面已经介绍了基本表格是如何工作的，本节将对这些元素稍微加以描述，并将介绍它们可包含的特性。其中一些特性可用于创建更加复杂的表格布局。第8页元素创建表格元素是所有表格的包含元素。它可以包含以下特性：所有通用特性面向脚本的

3、基本事件特性dir特性元素包含表格行与元素表示表格单元colspan特性headers特性rowspan特性scope特性第9页创建基本表格我们已经了解了表格的基础元素与特性，现在可以创建一个显示关于Example Caf经营时间信息的表格。展示营业时间的表格第10页主要内容4.1 表格介绍4.2 基本表格元素与特性4.3 为表格添加标题4.4 表格区域分组4.5 嵌套表格4.6 易访问表格4.7 使用列表4.8 表格应用实例4.9 本章小结第11页4.3 为表格添加标题无论表格是用于显示某特定试验的结果还是某一特定市场的股票指数，抑或今晚的电视节目？每一个表格都应该拥有一个标题，这样网站访问

4、者才能知道表格的用途。即使周围的文本描述了表格的内容，使用元素赋予表格一个正式的标题仍然是一项良好的习惯。默认情况下，多数浏览器在表格之上的中央位置显示该元素的内容。第12页主要内容4.1 表格介绍4.2 基本表格元素与特性4.3 为表格添加标题4.4 表格区域分组4.5 嵌套表格4.6 易访问表格4.7 使用列表4.8 表格应用实例4.9 本章小结4.4 表格区域分组使用rowspan及colspan特性使单元跨越多个行或列。将表格分割为三个区域：表头、表体以及表尾。使用元素对列分组。使用元素在不相关列之间共享特性。第13页使用colspan特性跨越列对于及元素，二者都可以包含一个叫做col

5、span的特性，该特性使表格单元可以跨越多于一个列。第14页有三个列的表格使用rowspan特性跨域行rowspan特性的作用于colspan特性很类似，只是它在相反的方向上工作：rowspan使单元可以纵向跨越单元行。第15页rowspan特性的效果将表格分解为表头、表体及表尾某些情况下，可能需要将表体（装载大部分表格数据的地方）与表头或者甚至表尾区分出来。第16页本例在FireFox浏览器中的效果使用元素进行列分组如果两个或更多列是相互关联的，则可以使用元素解释这些列应该被归到同一组中。第17页使用元素进行列分组使用元素在列间共享样式元素为中的列指定特性(如列内单元的宽度与对齐方式)。与元

6、素不同，元素不隐含任何解构性分组，因此被更多地用于呈现目的。第18页使用元素在列间共享样式第19页主要内容4.1 表格介绍4.2 基本表格元素与特性4.3 为表格添加标题4.4 表格区域分组4.5 嵌套表格4.6 易访问表格4.7 使用列表4.8 表格应用实例4.9 本章小结第20页4.5 嵌套表格可以在表格单元中包含标记，只要该元素全部包含于单元内即可。将另一个表格整体放置于一个表格单元内，从而创建了一个所谓的“嵌套表格”(nested table)。一个周末活动计划的表格第21页主要内容4.1 表格介绍4.2 基本表格元素与特性4.3 为表格添加标题4.4 表格区域分组4.5 嵌套表格4.

7、6 易访问表格4.7 使用列表4.8 表格应用实例4.9 本章小结第22页4.6 易访问表格表格本身可以包含大量数据，并能对这些信息提供一种很有帮助的视觉呈现形式。在查看一张表格时，很容易就可以通过上下左右扫描，在行与列之间找到一个特定的值，或者比较一定范围的值。如何线性化表格在一个屏幕阅读器被用于阅读表格时，它通常会对其进行线性化，意思是说阅读器会从第一行起，自左向右朗读行中的单元，一个接一个，直到移动到下一行之前，然后继续这样读，直到阅读器读完了表格中的每一行。第23页使用id、scope及headers特性在创建单元表头时，在元素中添加scope特性有助于指定该表头应用于哪些单元。如果将

8、其赋值为row，就指定了该元素是所在行的表头；而当值为column时，就表明它是所在列的表头。headers特性所扮演的角色与scope特性正相反。因为它在元素中用于指定哪些表头对应于该单元。该特性的值是一个由空格分隔的表头单元id特性值列表。第24页创建易访问表格为Example Caf网站创建一个新页面，提供一个周末烹饪课程的时间表。一共2天上午和下午的课程。第25页一个周末烹饪课程的时间表第26页主要内容4.1 表格介绍4.2 基本表格元素与特性4.3 为表格添加标题4.4 表格区域分组4.5 嵌套表格4.6 易访问表格4.7 使用列表4.8 表格应用实例4.9 本章小结4.7 使用列表

9、无序列表：比如项目列表有序列表：使用有序数字或字母而非圆点定义列表：使你可以指定术语及其定义第27页使用元素创建无序列表如果想要创建一个项目列表，应该将其写在元素中。需要写下的每一项或每一行都应该位于开标签和闭标签之间。第28页列表的显示效果有序列表在有序列表中，不是在每项前放置圆点，而是可以使用数字(1、2、3)、字母(A、B、C)或罗马数字(i、ii、iii)来前置标识它们。有序列表项位于元素中。之后每一个列表项都应嵌套于元素内，并且包含在开标签和闭标签之间。使用start特性修改有序列表的起始数字使用reversed特性实现列表顺序倒数使用type特性指定序列标记第29页定义列表定义列表

10、是一种特殊类型的列表，它的列表项由术语和随后的简短文字定义或描述组成。定义列表包含在元素内。之后在元素内部包含了交替出现的和元素。第30页定义列表列表嵌套可以在一个列表中嵌套另一列表。例如，将一个带有独立序列的编号列表放入一个对应列表项中。除非使用start特性另行指定起始序列号，每一个嵌套列表都将独立排序。每一个新列表都置于一个元素内。第31页列表嵌套第32页主要内容4.1 表格介绍4.2 基本表格元素与特性4.3 为表格添加标题4.4 表格区域分组4.5 嵌套表格4.6 易访问表格4.7 使用列表4.8 表格应用实例4.9 本章小结4.8 表格应用实例在本例的表格上显示了当天的主要市场上蔬菜的市场价格信息。在设计时，主要用到了分组、表头以及单元格合并，放入单元格文字和图片信息等。第33页本例在Google Chrome中浏览效果第34页主要内容4.1 表格介绍4.2 基本表格元素与特性4.3 为表格添加标题4.4 表格区域分组4.5 嵌套表格4.6 易访问表格4.7 使用列表4.8 表格应用实例4.9 本章小结第35页4.9 本章小结在本章中，介绍了表格在创建页面时可以成为怎样的强大工