HTML5+CSS3网页设计实例教程
第4章 表格与列表
第22页
如何线性化表格
在一个屏幕阅读器被用于阅读表格时，它 通常会对其进行线性化，意思是说阅读器 会从第一行起，自左向右朗读行中的单元 ，一个接一个，直到移动到下一行之前， 然后继续这样读，直到阅读器读完了表格 中的每一行。
HTML5+CSS3网页设计实例教程
HTML5+CSS3网页设计实例教程
列表的显示效果
第4章 表格与列表
第28页
有序列表
在有序列表中，不是在每项前放置圆点，而 是可以使用数字(1、2、3)、字母(A、B、 C)或罗马数字(i、ii、iii)来前置标识它们。
有序列表项位于<ol>元素中。之后每一个列 表项都应嵌套于<ol>元素内，并且包含在 <li>开标签和</li>闭标签之间。
► 使用start特性修改有序列表的起始数字 ► 使用reversed特性实现列表顺序倒数 ► 使用type特性指定序列标记
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第29页
定义列表
定义列表是一种特殊类型的列表，它的列 表项由术语和随后的简短文字定义或描述 组成。定义列表包含在<dl>元素内。之后 在<dl>元素内部包含了交替出现的<dt>和 <dd>元素。
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第2页
本章的学习目标
了解表格的概念及在HTML中使用的方法 掌握基本表格元素与特性 了解创建易访问表格的方法 掌握各种形式列表的实现
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第3页
主要内容
4.1 表格介绍 4.2 基本表格元素与特性 4.3 为表格添加标题 4.4 表格区域分组 4.5 嵌套表格 4.6 易访问表格 4.7 使用列表 4.8 表格应用实例 4.9 本章小结
使用<colgroup>元素进行列分组
如果两个或更多列是相互关联的，则可以 使用<colgroup>元素解释这些列应该被归 到同一组中。
HTML5+CSS3网页设计实例教程
使用<colgroup>元素进行列分组
第4章 表格与列表
第17页
使用<col>元素在列间共享样式
<col>元素为<colgroup>中的列指定特性( 如列内单元的宽度与对齐方式)。与 <colgroup>元素不同，<col>元素不隐含 任何解构性分组，因此被更多地用于呈现 目的。
第2行 第4列
第3行 第4列
第4行 第1列
第4行 第2列
第4行 第3列
第4行 第4列
第5行
第5行
第5行
第5行
表格由行和列所组成
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第5页
主要内容
4.1 表格介绍 4.2 基本表格元素与特性 4.3 为表格添加标题 4.4 表格区域分组 4.5 嵌套表格 4.6 易访问表格 4.7 使用列表 4.8 表格应用实例 4.9 本章小结
对于<td>及<th>元素，二者都可以包含一 个叫做colspan的特性，该特性使表格单元 可以跨越多于一个列。
HTML5+CSS3网页设计实例教程
第4章 表格与列表
有span特性跨域行
rowspan特性的作用于colspan特性很类似 ，只是它在相反的方向上工作：rowspan 使单元可以纵向跨越单元行。
HTML5+CSS3网页设计实例教程
第4章 表格与列表
rowspan特性的效果
第15页
将表格分解为表头、表体及表尾
某些情况下，可能需要将表体（装载大部 分表格数据的地方）与表头或者甚至表尾 区分出来。
HTML5+CSS3网页设计实例教程
本例在FireFox浏览器中的效果
第4章 表格与列表
第16页
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第4页
4.1 表格介绍
想要使用表格，需要以“网格”(grid)模式去思考。
列
第1列
第2列
行 第3列
第4列
第1行 第1列
第1行 第2列
第1行 第3列
第1行 第4列
第2行 第1列
第3行 第1列
第2行 第2列
第3行 第2列
第2行 第3列
第3行 第3列
第4章 表格与列表
列表嵌套
第31页
主要内容
4.1 表格介绍 4.2 基本表格元素与特性 4.3 为表格添加标题 4.4 表格区域分组 4.5 嵌套表格 4.6 易访问表格 4.7 使用列表 4.8 表格应用实例 4.9 本章小结
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第32页
4.8 表格应用实例
HTML5+CSS3网页设计实例教程
使用<col>元素在列间共享样式
第4章 表格与列表
第18页
主要内容
4.1 表格介绍 4.2 基本表格元素与特性 4.3 为表格添加标题 4.4 表格区域分组 4.5 嵌套表格 4.6 易访问表格 4.7 使用列表 4.8 表格应用实例 4.9 本章小结
HTML5+CSS3网页设计实例教程
<table>元素是所有表格的包含元素。它可以包含 以下特性：
所有通用特性
面向脚本的基本事件特性
► dir特性 ► <tr>元素包含表格行 ► <td>与<th>元素表示表格单元 ► colspan特性 ► headers特性 ► rowspan特性 ► scope特性
HTML5+CSS3网页设计实例教程
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第11页
主要内容
4.1 表格介绍 4.2 基本表格元素与特性 4.3 为表格添加标题 4.4 表格区域分组 4.5 嵌套表格 4.6 易访问表格 4.7 使用列表 4.8 表格应用实例 4.9 本章小结
HTML5+CSS3网页设计实例教程
第4章 表格与列表
在进行文字排版时，经常需要用到列表效果。在本 章中，介绍了如何在HTML中创建如下3种类型的 列表：
► 无序列表：比如项目列表 ► 有序列表：使用有序数字或字母而非圆点 ► 定义列表：使你可以指定术语及其定义
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第35页
第4章 表格与列表
第23页
使用id、scope及headers特性
在创建单元表头时，在<th>元素中添加 scope特性有助于指定该表头应用于哪些单 元。如果将其赋值为row，就指定了该元素 是所在行的表头；而当值为column时，就 表明它是所在列的表头。
headers特性所扮演的角色与scope特性正 相反。因为它在<td>元素中用于指定哪些 表头对应于该单元。该特性的值是一个由 空格分隔的表头单元id特性值列表。
第12页
4.4 表格区域分组
使用rowspan及colspan特性使单元跨越多 个行或列。
将表格分割为三个区域：表头、表体以及 表尾。
使用<colgroup>元素对列分组。 使用<col>元素在不相关列之间共享特性。
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第13页
使用colspan特性跨越列
第4章 表格与列表
第19页
4.5 嵌套表格
可以在表格单元中包含标记，只要该元素 全部包含于单元内即可。将另一个表格整 体放置于一个表格单元内，从而创建了一 个所谓的“嵌套表格”(nested table)。
HTML5+CSS3网页设计实例教程
一个周末活动计划的表格
第4章 表格与列表
第20页
主要内容
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第24页
创建易访问表格
为Example Café网站创建一个新页面，提 供一个周末烹饪课程的时间表。一共2天上 午和下午的课程。
HTML5+CSS3网页设计实例教程
一个周末烹饪课程的时间表
第4章 表格与列表
第25页
主要内容
4.1 表格介绍 4.2 基本表格元素与特性 4.3 为表格添加标题 4.4 表格区域分组 4.5 嵌套表格 4.6 易访问表格 4.7 使用列表 4.8 表格应用实例 4.9 本章小结
4.1 表格介绍 4.2 基本表格元素与特性 4.3 为表格添加标题 4.4 表格区域分组 4.5 嵌套表格 4.6 易访问表格 4.7 使用列表 4.8 表格应用实例 4.9 本章小结
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第21页
4.6 易访问表格
表格本身可以包含大量数据，并能对这些信 息提供一种很有帮助的视觉呈现形式。在查 看一张表格时，很容易就可以通过上下左右 扫描，在行与列之间找到一个特定的值，或 者比较一定范围的值。
HTML5+CSS3网页设计实例教程
第4章 表格与列表
第34页
4.9 本章小结
在本章中，介绍了表格在创建页面时可以成为怎样 的强大工具，以及所有表格如何基于一种网格模式 ，并使用4种基本元素：<table>，包含每一个表格 ；<tr>，包含表格的行；<td>，包含表格数据的一 个单元；以及<th>，表示一个包含表头的单元。