HTML5网页设计与制作教学课件第七章使用表格
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第7章
使用表格
第7章 使用表格
在生活中表格随处可见，如账表、明细表、成绩表 、数据表等，在网页中也是一样。制作网页的时候， <table>表格标签是最常用的，也是最必不可少的工具 。表格拥有特殊的结构和布局模型，能够比较醒目地 描述数据间的关系，如果借助 CSS设计表格样式，可 以帮助用户在阅读数据时更便捷、更轻松。
【拓展练习】
使用border-spacing属性分离单元格时，应该注意三个问题。
第一，早期版本的IE浏 览器不支持该属性，要定义 相同效果的样式，就需要同 时结合 HTML的cellspacing属性来设置。
第二，当使用border-spacing
属性时，应确保数据单元格之间的相
互独立性，不能再使用border-
【拓展练习】
利用CSS的padding属性可以更灵活地定制单元格补白区域的大小，也可以根据需要定义不同边 上的补白。使用padding属性还可以为表格定义补白，此时可以增加表格外框与单元格的距离。以上 面的示例为基础，重新定义内部样式表，在<head>标签内的<style type="text/css">标签中清除 其他表格样式，添加如下样式。
新建一个网页，保存为 test.html，在 <body>内使用 <table>、<tr>、<th>和<td>标签
设计一个简单的表格，然后使用HTML的colspan、rowspan属性合并相邻单元格中的相同项目，
代码如下所示。
7.1 设计表格结构
7.1.2 设计表格附加结构
【随堂练习 】
在IE浏览器中预览演示效果，如图7-4所示。
为了更方便地控制这些结构，CSS使用display属性定义了各种对应的显示模型（即显示类型）， 这样就可以为其他标识语言（如 XML语言）和不同元素定义表格结构，并控制它们的显示样式。这 里主要通过display属性进行定义，并映射到对应的表格结构中。该属性用法如下所示。
7.3设计复杂表格样式
7.3.2 定义表格列和行的样式
7.1.1 搭建表格基本结构
以Excel数据表格为例，读者可以很清晰地了解表格的组成部分，如图7-1所示。
图7-1 表格结构分析
7.1 设计表格结构
7.1.1 搭建表格基本结构
【随堂练习 】
启动Dreamweaver，新建一个网页，保存为test.html，在<body>内使用<table>、<tr>、
【拓展学习 】
要实现数据表格列分组，可以使用 <colgroup>和<col>标签来实现，它们可以定义表格列
和表格列组，二者是可选的。
● <colgroup>标签定义 表格列的分组。利用该 标签可以对列进行组合， 以便进行格式化。该标 签只有在<table>标签内 部使用才是合法的。
●<col>标签为表格中一个或多个列 定义属性值。如需对全部列应用样式， <col>标签很有用，这样就不须对各 个单元和各行重复应用样式了。该标 签可在 <colgroup>标签中使用，也 可以独立使用。
渲染，而延伸到其他列的单元格将被剪裁。
<th>和<td>标签设计一个简单的表格。其中表格包含11行3列，第一行为标1.1 搭建表格基本结构
【随堂练习 】
在IE浏览器中预览演示效果，如图7-2所示。
图7-2 表格的基本结构
7.1 设计表格结构
7.1.1 搭建表格基本结构
【拓展练习1 】
在上面随堂练习的基础上， 设计表格宽度满屏显示，定义 高度为300px，显示边框，并 定义边框线粗为2px，通过 frame和rules属性组合使用， 让表格仅显示上下外表格边框， 左右表格外边框不显示，同时 不显示表格内部边框线。设计 此表格的HTML代码如下。
其中，show表示显示边 框，该值为默认值；hide表示 隐藏边框。
7.2 定义表格样式
7.2.3 定义空单元格样式
【拓展练习】
使用empty-cells属性时，应注意三个问题。 第二，如果表格数据行中所有单元格的empty-cells属性取值都为
hide，而且都没有任何可视内容，那么整行就等于设置了“display: none”。
01
声明时，border属性才有效。
●background：定义指定列或列组中单元格的
02
背景，但是只有在单元格和行中设置了透明背景
● width：定义指定列或列组
的最小宽度。
03
时适用。 ● visibility：当设置一个列的visibility为
04
collapse时，那么该列中所有的单元格都不会被
在IE浏览器中预览演示效果，如图7-8所示。
图7-8 使用CSS定义表格边框
7.2 定义表格样式
7.2.1 定义表格边框样式
【拓展练习】 例如，针对上面示例出现的问题，为table元素定义如下样式，则浏览器在解析数据表格时会自
动合并单元格边框，显示效果如图7-9所示。
图7-9 使用CSS合并单元格边框
表格能够描述数据之间的关系，它也能够实现网页布 局。
7.3设计复杂表格样式
7.3.1 使用CSS定义表格结构
表格布局模型是建立在数据表格的结构模型基础之上的呈现模型。一个完整的表格结构包含一个 可选的标题以及任意行的单元格。当多行单元格被构建，则根据表格结构模型会自动派生出列，每 行中第一个单元格属于第一列，第二个单元格属于第二列，依此类推。行和列可以在结构上被分组 ，并利用这个分组使用CSS控制多行或多列的显示样式。简单地说，表格结构模型包含了表格、标题 、行、行组、列、列组和单元格。
代码见书本P226
7.1 设计表格结构
7.1.3 表格结构分组
【拓展练习1 】
在IE浏览器中预览演示效果，如图7-6所示。
图7-6 对表格列进行分组
7.2 定义表格样式
7.2.1 定义表格边框样式
传统布局中主要使用HTML的border属性来定义数据表格 的边框，但是这种方法存在很多弊端，无法灵活定制表格样式， 虽然结合 HTML的frame和rules属性也可以设计更多的表格边 框样式，但是这些样式都显得很单调。
7.1.3 表格结构分组
【随堂练习 】
新建一个网页，保存为test.html，在<body>内使用<thead>、<tbody>和<tfooter>标签 对表格行进行分组。
在IE浏览器中预览演示效果，如图7-5所示。
代码见书本P225
图7-5 对表格行进行分组
7.1 设计表格结构
7.1.3 表格结构分组
学习要点
学习要点
01 ●了解与表格相关的标签，以及这些标签的使用 02 ●了解CSS定义表格样式的常用属性
03 ●理解CSS表格的布局模型
训练要点
●能够使用HTML标签快速制作表格结构
要点
●能够使用CSS设计表格样式
●能够根据表格布局模型解决表格布局中遇到的各种疑难问题
7.1 设计表格结构
3
4
7.1 设计表格结构
7.1.3 表格结构分组
【拓展练习1 】
步骤1 在上面随堂练习的基础上，在 <table>标签中添加<colgroup>和 <col>标签，对数据表格列进行分组。 其中第一列和第二列为一组，第三列为 一组，共分为两组，代码如下所示。
步骤2 在<head>标签内添加<style type="text/css">标签，定义一个内部 样式表，然后输入下面的样式代码，分 别为列组1和列组2定义两个类样式，为 前两列和最后一列设计不同的背景色， 代码如下所示。
7.2 定义表格样式
7.2.2 定义单元格间距样式
为了兼容HTML的cellspacing属性，CSS定义了border-spacing属性，该属性能够分离单元格之 间的间距，属性用法如下所示。
length表示由浮点数字和 单位标识符组成的长度值，不 可为负值。
7.2 定义表格样式
7.2.2 定义单元格间距样式
● colspan属性，合 并多列单元格，为该 属性指定一个值（数 值大于等于0，且为 整数），表示要合并 的单元格数目。
1
2
●rowspan属性，合并多行 单元格，为该属性指定一个 值（数值大于等于0，且为整 数），表示要合并的单元格 数目。
7.1 设计表格结构
7.1.2 设计表格附加结构
【随堂练习 】
如果使用 CSS的border属性，则可以为 table和td元素定 义任意边上的边框样式，这在以前是不敢想象的。传统布局中 要定制个性边框，只能借助多层表格嵌套，并结合背景图像来 实现，所要付出的代价就是以牺牲HTML结构的语义性和易用性 为前提。
7.2 定义表格样式
7.2.1 定义表格边框样式
第三，border-spacing属性
collapse来定义合并单元格边框。 不能使用CSS的margin属性来代
替。对于td元素来说，不支持
margin属性，但是可以为单元格
定义补白，此时padding属性与
单元格的cellpadding属性功能是
相同的。
7.2 定义表格样式
7.2.2 定义单元格间距样式
单元格位于表格行和列的交叉点上，根据表格布局模型，单元格应该从属于行，而不是列，或者 说单元格是行的子对象，但绝对不是列的子对象。
通过设置列的属性可以影响列包含的单元格显示样式。列和列组元素所支持的标准属性如下。
● border：定义指定列或列组的边框。只有当
table被定义了“border-collapse:collapse”
【随堂练习】 在上一节拓展练习的基础上，清除
<table>标签中定义的border、frame和 rules属性，并删除使用<colgroup>和 <col>标签定义的列分组。
在<head>标签内添加 <style type="text/css">标签，定义一个内部样式 表，然后输入下面的样式代码，定义表格边 框样式，代码如下所示。
7.1.1 搭建表格基本结构
表格通过使用<table>、<tr>和<td>（或<th>）三个标签构成网页中的数据表示方式。
● <table>标签，定义表格外框。 ● <tr>标签，定义表格行。
● <th>标签，定义表格标题头。
● <td>标签，定义表格单元格，即表格的具体数据 存储单元。
7.1 设计表格结构
2
5
1
6
表格是HTML中最常用的对象，在网页设计中使用 表格显示或统计数据屡见不鲜。最简单的表格结构由 <table>、<tr>以及<td>三个标签组成，在HTML中 每个标签都有自己的语义功能，用户应该根据需要恰当 使用这些标签。使用表格比较安全，它在CSS布局中很 少出现问题。
7.1 设计表格结构
7.1 设计表格结构
7.1.1 搭建表格基本结构
【拓展练习1 】
在IE浏览器中预览演示效果，如图7-3所示。
图7-3 美化的表格结构
7.1 设计表格结构
7.1.2 设计表格附加结构
如果表格中某项数据是相同的，可通过跨越多行或者多列实现数据合并。使用HTML的 rowspan属性和colspan属性可以实现多行和多列合并的效果。HTML的colspan、rowspan属 性通常用在<td>和<th>标签中，具体用法如下。
图7-4 合并相邻单元格
7.1 设计表格结构
7.1.3 表格结构分组
表格内容可以被分组管理，这样方便网 页设计师进行区域化控制，以方便数据显示、 样式控制，也更有利于搜索引擎的检索。如 果页面设置表头和表尾为静止，表格主体滚 动，这样Web设计师就可以将很长的表格 数据放在有限的空间里进行显示。
7.1 设计表格结构
7.2 定义表格样式
7.2.2 定义单元格间距样式
【拓展练习】 在IE浏览器中预览演示效果，如图7-11所示。
图7-11 定义单元格添加补白效果
7.2 定义表格样式
7.2.3 定义空单元格样式
如果表格单元格的边框处于分离状态（即单元格边框处于非合并状态下），可以使用 CSS的 empty-cells属性来控制空单元格是否显示。该属性用法如下。
第一，empty-cells 属性控制没有可视内容的 单元格周围边框的显示。
第三，标准浏览器默 认显示空单元格的边框。 早期IE浏览器不支持该属 性，且始终不会显示空单 元格的边框。
7.3设计复杂表格样式
表格是存储数据的最佳模型，这种模型被称为关系模 型，类似的还有网状模型和文件模型等。表格结构都是由 一个可选的标题头开始，后面跟随一行或许多行数据，每 一行数据由一个或多个单元格组成，并可以区分为表头和 数据单元格。
使用表格
第7章 使用表格
在生活中表格随处可见，如账表、明细表、成绩表 、数据表等，在网页中也是一样。制作网页的时候， <table>表格标签是最常用的，也是最必不可少的工具 。表格拥有特殊的结构和布局模型，能够比较醒目地 描述数据间的关系，如果借助 CSS设计表格样式，可 以帮助用户在阅读数据时更便捷、更轻松。
【拓展练习】
使用border-spacing属性分离单元格时，应该注意三个问题。
第一，早期版本的IE浏 览器不支持该属性，要定义 相同效果的样式，就需要同 时结合 HTML的cellspacing属性来设置。
第二，当使用border-spacing
属性时，应确保数据单元格之间的相
互独立性，不能再使用border-
【拓展练习】
利用CSS的padding属性可以更灵活地定制单元格补白区域的大小，也可以根据需要定义不同边 上的补白。使用padding属性还可以为表格定义补白，此时可以增加表格外框与单元格的距离。以上 面的示例为基础，重新定义内部样式表，在<head>标签内的<style type="text/css">标签中清除 其他表格样式，添加如下样式。
新建一个网页，保存为 test.html，在 <body>内使用 <table>、<tr>、<th>和<td>标签
设计一个简单的表格，然后使用HTML的colspan、rowspan属性合并相邻单元格中的相同项目，
代码如下所示。
7.1 设计表格结构
7.1.2 设计表格附加结构
【随堂练习 】
在IE浏览器中预览演示效果，如图7-4所示。
为了更方便地控制这些结构，CSS使用display属性定义了各种对应的显示模型（即显示类型）， 这样就可以为其他标识语言（如 XML语言）和不同元素定义表格结构，并控制它们的显示样式。这 里主要通过display属性进行定义，并映射到对应的表格结构中。该属性用法如下所示。
7.3设计复杂表格样式
7.3.2 定义表格列和行的样式
7.1.1 搭建表格基本结构
以Excel数据表格为例，读者可以很清晰地了解表格的组成部分，如图7-1所示。
图7-1 表格结构分析
7.1 设计表格结构
7.1.1 搭建表格基本结构
【随堂练习 】
启动Dreamweaver，新建一个网页，保存为test.html，在<body>内使用<table>、<tr>、
【拓展学习 】
要实现数据表格列分组，可以使用 <colgroup>和<col>标签来实现，它们可以定义表格列
和表格列组，二者是可选的。
● <colgroup>标签定义 表格列的分组。利用该 标签可以对列进行组合， 以便进行格式化。该标 签只有在<table>标签内 部使用才是合法的。
●<col>标签为表格中一个或多个列 定义属性值。如需对全部列应用样式， <col>标签很有用，这样就不须对各 个单元和各行重复应用样式了。该标 签可在 <colgroup>标签中使用，也 可以独立使用。
渲染，而延伸到其他列的单元格将被剪裁。
<th>和<td>标签设计一个简单的表格。其中表格包含11行3列，第一行为标1.1 搭建表格基本结构
【随堂练习 】
在IE浏览器中预览演示效果，如图7-2所示。
图7-2 表格的基本结构
7.1 设计表格结构
7.1.1 搭建表格基本结构
【拓展练习1 】
在上面随堂练习的基础上， 设计表格宽度满屏显示，定义 高度为300px，显示边框，并 定义边框线粗为2px，通过 frame和rules属性组合使用， 让表格仅显示上下外表格边框， 左右表格外边框不显示，同时 不显示表格内部边框线。设计 此表格的HTML代码如下。
其中，show表示显示边 框，该值为默认值；hide表示 隐藏边框。
7.2 定义表格样式
7.2.3 定义空单元格样式
【拓展练习】
使用empty-cells属性时，应注意三个问题。 第二，如果表格数据行中所有单元格的empty-cells属性取值都为
hide，而且都没有任何可视内容，那么整行就等于设置了“display: none”。
01
声明时，border属性才有效。
●background：定义指定列或列组中单元格的
02
背景，但是只有在单元格和行中设置了透明背景
● width：定义指定列或列组
的最小宽度。
03
时适用。 ● visibility：当设置一个列的visibility为
04
collapse时，那么该列中所有的单元格都不会被
在IE浏览器中预览演示效果，如图7-8所示。
图7-8 使用CSS定义表格边框
7.2 定义表格样式
7.2.1 定义表格边框样式
【拓展练习】 例如，针对上面示例出现的问题，为table元素定义如下样式，则浏览器在解析数据表格时会自
动合并单元格边框，显示效果如图7-9所示。
图7-9 使用CSS合并单元格边框
表格能够描述数据之间的关系，它也能够实现网页布 局。
7.3设计复杂表格样式
7.3.1 使用CSS定义表格结构
表格布局模型是建立在数据表格的结构模型基础之上的呈现模型。一个完整的表格结构包含一个 可选的标题以及任意行的单元格。当多行单元格被构建，则根据表格结构模型会自动派生出列，每 行中第一个单元格属于第一列，第二个单元格属于第二列，依此类推。行和列可以在结构上被分组 ，并利用这个分组使用CSS控制多行或多列的显示样式。简单地说，表格结构模型包含了表格、标题 、行、行组、列、列组和单元格。
代码见书本P226
7.1 设计表格结构
7.1.3 表格结构分组
【拓展练习1 】
在IE浏览器中预览演示效果，如图7-6所示。
图7-6 对表格列进行分组
7.2 定义表格样式
7.2.1 定义表格边框样式
传统布局中主要使用HTML的border属性来定义数据表格 的边框，但是这种方法存在很多弊端，无法灵活定制表格样式， 虽然结合 HTML的frame和rules属性也可以设计更多的表格边 框样式，但是这些样式都显得很单调。
7.1.3 表格结构分组
【随堂练习 】
新建一个网页，保存为test.html，在<body>内使用<thead>、<tbody>和<tfooter>标签 对表格行进行分组。
在IE浏览器中预览演示效果，如图7-5所示。
代码见书本P225
图7-5 对表格行进行分组
7.1 设计表格结构
7.1.3 表格结构分组
学习要点
学习要点
01 ●了解与表格相关的标签，以及这些标签的使用 02 ●了解CSS定义表格样式的常用属性
03 ●理解CSS表格的布局模型
训练要点
●能够使用HTML标签快速制作表格结构
要点
●能够使用CSS设计表格样式
●能够根据表格布局模型解决表格布局中遇到的各种疑难问题
7.1 设计表格结构
3
4
7.1 设计表格结构
7.1.3 表格结构分组
【拓展练习1 】
步骤1 在上面随堂练习的基础上，在 <table>标签中添加<colgroup>和 <col>标签，对数据表格列进行分组。 其中第一列和第二列为一组，第三列为 一组，共分为两组，代码如下所示。
步骤2 在<head>标签内添加<style type="text/css">标签，定义一个内部 样式表，然后输入下面的样式代码，分 别为列组1和列组2定义两个类样式，为 前两列和最后一列设计不同的背景色， 代码如下所示。
7.2 定义表格样式
7.2.2 定义单元格间距样式
为了兼容HTML的cellspacing属性，CSS定义了border-spacing属性，该属性能够分离单元格之 间的间距，属性用法如下所示。
length表示由浮点数字和 单位标识符组成的长度值，不 可为负值。
7.2 定义表格样式
7.2.2 定义单元格间距样式
● colspan属性，合 并多列单元格，为该 属性指定一个值（数 值大于等于0，且为 整数），表示要合并 的单元格数目。
1
2
●rowspan属性，合并多行 单元格，为该属性指定一个 值（数值大于等于0，且为整 数），表示要合并的单元格 数目。
7.1 设计表格结构
7.1.2 设计表格附加结构
【随堂练习 】
如果使用 CSS的border属性，则可以为 table和td元素定 义任意边上的边框样式，这在以前是不敢想象的。传统布局中 要定制个性边框，只能借助多层表格嵌套，并结合背景图像来 实现，所要付出的代价就是以牺牲HTML结构的语义性和易用性 为前提。
7.2 定义表格样式
7.2.1 定义表格边框样式
第三，border-spacing属性
collapse来定义合并单元格边框。 不能使用CSS的margin属性来代
替。对于td元素来说，不支持
margin属性，但是可以为单元格
定义补白，此时padding属性与
单元格的cellpadding属性功能是
相同的。
7.2 定义表格样式
7.2.2 定义单元格间距样式
单元格位于表格行和列的交叉点上，根据表格布局模型，单元格应该从属于行，而不是列，或者 说单元格是行的子对象，但绝对不是列的子对象。
通过设置列的属性可以影响列包含的单元格显示样式。列和列组元素所支持的标准属性如下。
● border：定义指定列或列组的边框。只有当
table被定义了“border-collapse:collapse”
【随堂练习】 在上一节拓展练习的基础上，清除
<table>标签中定义的border、frame和 rules属性，并删除使用<colgroup>和 <col>标签定义的列分组。
在<head>标签内添加 <style type="text/css">标签，定义一个内部样式 表，然后输入下面的样式代码，定义表格边 框样式，代码如下所示。
7.1.1 搭建表格基本结构
表格通过使用<table>、<tr>和<td>（或<th>）三个标签构成网页中的数据表示方式。
● <table>标签，定义表格外框。 ● <tr>标签，定义表格行。
● <th>标签，定义表格标题头。
● <td>标签，定义表格单元格，即表格的具体数据 存储单元。
7.1 设计表格结构
2
5
1
6
表格是HTML中最常用的对象，在网页设计中使用 表格显示或统计数据屡见不鲜。最简单的表格结构由 <table>、<tr>以及<td>三个标签组成，在HTML中 每个标签都有自己的语义功能，用户应该根据需要恰当 使用这些标签。使用表格比较安全，它在CSS布局中很 少出现问题。
7.1 设计表格结构
7.1 设计表格结构
7.1.1 搭建表格基本结构
【拓展练习1 】
在IE浏览器中预览演示效果，如图7-3所示。
图7-3 美化的表格结构
7.1 设计表格结构
7.1.2 设计表格附加结构
如果表格中某项数据是相同的，可通过跨越多行或者多列实现数据合并。使用HTML的 rowspan属性和colspan属性可以实现多行和多列合并的效果。HTML的colspan、rowspan属 性通常用在<td>和<th>标签中，具体用法如下。
图7-4 合并相邻单元格
7.1 设计表格结构
7.1.3 表格结构分组
表格内容可以被分组管理，这样方便网 页设计师进行区域化控制，以方便数据显示、 样式控制，也更有利于搜索引擎的检索。如 果页面设置表头和表尾为静止，表格主体滚 动，这样Web设计师就可以将很长的表格 数据放在有限的空间里进行显示。
7.1 设计表格结构
7.2 定义表格样式
7.2.2 定义单元格间距样式
【拓展练习】 在IE浏览器中预览演示效果，如图7-11所示。
图7-11 定义单元格添加补白效果
7.2 定义表格样式
7.2.3 定义空单元格样式
如果表格单元格的边框处于分离状态（即单元格边框处于非合并状态下），可以使用 CSS的 empty-cells属性来控制空单元格是否显示。该属性用法如下。
第一，empty-cells 属性控制没有可视内容的 单元格周围边框的显示。
第三，标准浏览器默 认显示空单元格的边框。 早期IE浏览器不支持该属 性，且始终不会显示空单 元格的边框。
7.3设计复杂表格样式
表格是存储数据的最佳模型，这种模型被称为关系模 型，类似的还有网状模型和文件模型等。表格结构都是由 一个可选的标题头开始，后面跟随一行或许多行数据，每 一行数据由一个或多个单元格组成，并可以区分为表头和 数据单元格。