第6章 表格在网页中的应用
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
4. 表头标签<th>
<th></th>标签对为表格特有的表示表头单元格的标签，在Dreamweaver的设计界 面中创建表格时可以选择表头所在的位置。scope为<th>标签的属性，表示定义表头， "col"为属性值，表示将当前列的所有单元格和表头单元格联系起来。
5. 标题标签<caption>
<caption></caption>标签对为table表格特有的表示标题的标签，同<th>标签不同的 是，<caption>标签不需要合并，它本身就只有一列，同时<caption>标签的位置是默认 居中的。
— 27 —
案例二 制作月历——使用CSS控制表格进阶
— 10 —
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤
步骤 04
设置表头（<th>标签）样式。在步骤3输入的代码下方输入如下代码。
th{ background-image:url(image/title.gif); /*设置表头背景图像为title.gif */ background-repeat:repeat-x; /*设置表头背景图像为横向重复*/ height:25px; /*设置表头高度为25像素（与背景图像的高度相同）*/ line-height:25px; /*设置表头行高为25像素（与表头高度一致，使文字居中）*/ color:#FFFFFF; /*设置表头文字颜色为白色（也可以写成color:white;）*/ border:1px solid #5F5F5F; /*设置表头边框1px，样式为直线，颜色为#5F5F5F*/ padding:0 2px 0; /*设置单元格内边距大小为上：0，左右：2像素，下：0*/ }
— 11 —
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤
步骤 05
设置表格单元格样式。 在步骤4输入的代码下 方输入如下代码。此 时在浏览器中预览网 页，可看到表格效果。
td{ border:1px solid #5F5F5F; height:25px; line-height:25px; padding-left:5px; }
标 签 <body></body> <table></table> <tr></tr> <td></td> <th></th>
— 8—
描 述 网页主体标签 表格标签 行标签 普通单元格标签 表头单元格（表格标题）标签
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤 2. 设置CSS样式
body{ }
步骤 03
设置表格边框和宽度等样式，并使表格整体居中对齐。在步骤2输入的代码下方输 入如下代码。 /*设置表格边框合并*/ /*设置表格宽度为800像素*/ /*设置表格与页面边界的间距为自动，此时表格会自动居中*/
table{ border-collapse:collapse; width:800px; margin:0px auto; }
— 17 —
案例一 制作2012年世界杯分组表——构建和美化表格 提示
在Dreamweaver的设计界面中，在要 选择的单元格上拖动鼠标可选中相应的单元格； 按住【Ctrl】键依次单击要选择的单元格，也 可同时选中多个单元格；单击网页文档底部状 态栏中的相应标签 ，可选中整个表格，或选 中插入点所在的行或单元格。
案例步骤
标 签
描 述
<body></body>
<table></table> <tr></tr> <td></td> <th></th> <caption></caption>
网页主体标签
表格标签 表格行标签 普通单元格标签 表头单元格标签 表格标题标签
— 26 —
提示
<caption></caption>
.row{ background-color:#D7D7D7; color:#000000; } /*设置背景颜色*/ /*设置文字颜色*/
— 13 —
案例一 制作2012年世界杯分组表——构建和美化表格
支撑知识点 一、表格的HTML标签
与其他HTML元素一样，表格也是由标签组成的。
1.
表格主体标签<table>
— 20 —
目录页
Contents Page
第6章 表格在网页中的应用
案例一 制作2012年世界杯分组表——构建和美化表格 案例二 制作童话故事页面——设置网页元素背景 案例二 制作月历——使用CSS控制表格进阶
— 21 —
案例二 制作月历——使用CSS控制表格进阶
案例说明
本案例要制作一个表格形 式的月历（以2015年7月 为例）。此月历的显示效 果为：6月及8月的部分日 期背景颜色为灰色，而7 月的日期背景颜色为白色； 当将鼠标指针移到单元格 上时单元格背景颜色会发 生变化。
— 18 —
案例一 制作2012年世界杯分组表——构建和美化表格
三、使用CSS设置表格或单元格颜色
使用CSS设置单元格内文字颜色，以及表格或单元 格背景的方法与设置文字颜色和网页元素背景的方法 相同。例如，可以使用color属性设置单元格内文字颜 色；使用background-color属性设置单元格、行或表格 背景颜色；使用background-image属性设置表格、行或 单元格背景图像。
— 1—
目录页
Contents Page
第6章 表格在网页中的应用
案例一 制作2012年世界杯分组表——构建和美化表格 案例二 制作月历——使用CSS控制表格进阶
— 2—
案例一 制作2012年世界杯分组表——构建和美化表格
案例说明
本案例通过制作2012年世界杯分组表，来学习与表格相关的HTML标签，掌握构建 表格结构，以及使用CSS美化表格的操作（如设置单元格高度、宽度、颜色和边框等）。
是表格的标题标签，由于是单
独的标签，所以可以方便地使 用CSS样式来设置表格标题的 显示效果。
案例二 制作月历——使用CSS控制表格进阶
案例步骤 2. 设置CSS样式
步骤 01
指定在页面中引入CSS样式的方法。本例使用内嵌样式，在<head></head>标签对之间 输入如下代码。
<style type="text/css"> <!---> </style>
colspan属性：用来合并行，语法： colspan=“数字”。例如：<td colspan=“3”></td>， 表示将1行中的3个单元格合并为一个。 rowspan属性：用来合并列，语法： rowspan="数字"。例如：<td rowspan="3"></td>，表示将一列中的3个单元 格合并为一个。
— 19 —
案例一 制作2012年世界杯分组表——构建和美化表格
四、使用CSS设置表格或单元格大小和边框
使用CSS设置表格或单元格大小和边框等的方法，与设置图像和其他块元素的方 法相同。例如，可以使用width属性设置整个表格或单元格宽度；使用height属性设置 整个表格或行的高度；使用border属性设置表格或单元格的边框。如代码 table{ border:1px solid red;}，表示设置整个表格的边框粗细为1像素，实线，红色。 如果使用CSS只设置了表格（<table>标签）的边框，则设置的是整个表格的外边 框，此时各单元格并不会受到影响，因此还需要单独为单元格设置相应的边框。
— 23 —
案例二 制作月历——使用CSS控制表格进阶
案例步骤
步骤 03
添加数据并修改表头。依次单击每一个单元格，输入数据。这样，一个初步的月历表 格即创建完成。
— 24 —
案例二 制作月历——使用CSS控制表格进阶
案例步骤
步骤 04
为了在使用CSS修饰表格时能更方便准确，为该表格添加id属性，id名为data，并删除 其他多余的代码，此时的代码如下。
<table></table>标签对为表格的主体标签，表格的其他组成元素，如行标签、单 元格标签等都包含在<table></table>标签对之间。
— 14 —
案例一 制作2012年世界杯分组表——构建和美化表格
2. 行标签<tr>
<tr></tr>标签对为表格的行标签，表格有多少行，就有多少个<tr></tr>标签对。 在每行中可以包含多个单元格。
步骤 01
指定在页面中引入CSS样式的方法。本例使用内嵌样式，在<head></head>标签对之间 输入如下代码。
<style type="text/css"> <!---> </style>
— 9—
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤
步骤 02
设置整体页面文字大小。在步骤1输入的<style type="text/css"></style>标签对之间输 入如下代码。 font-size:14px; /*设置整体页面文字大小为14像素*/
— 22 —
案例二 制作月历——使用CSS控制表格进阶
案例步骤
1.
步骤 01 步骤 02
构建HTML结构
打开“文件”面板，在已拷贝的文件夹“第6章\task2”中新建一个名为“yueli-lx.html” 的网页文档，并将其打开。 在设计界面 中单击“插 入”面板 “常用”类 别中的“表 格”按钮， 创建表格。
/*设置单元格边框粗细、样式和颜色*/ /*设置单元格高度为25像素*/ /*设置单元格行高为25像素，以使文字居中对齐*/ /*设置单元格左侧内边距为5像素*/
— 12 —
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤
步骤 06
设置前面定义的类名为row的表格行的背景色和文字颜色， 得到一个单双行颜色不同的表格。
— 7—
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤
步骤 06 步骤 07
在Dreamweaver的代码界面中分别在表格中的第1，3，5，7行（不包括表头的单数 行）标签对<tr></tr>中添加一个类（class）名row。 此时的表格没有做任何修饰。涉及的HTML标签如表6-1所示。
— 3—
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤 1. 构建HTML结构
将本书附赠的“素材与实例\第6章”文件夹拷贝至本地磁盘创建的My Web站点的根 目录中。 启动Dreamweaver CC，打开“文件”面板，在刚拷贝的文件夹“第6章\task1”中新建 一个名为WorldCup-lx.html的网页文档，并双击打开。
— 16 —
案例一 制作2012年世界杯分组表——构建和美化表格
二、合并和拆分单元格
要合并单元格，可先选中要合并的多个单元格，然后单击属性检查器中的“合并 单元格”按钮；要拆分单元格，可将插入点置于要拆分的单元格中，然后单击属性检 查器中的“拆分单元格”按钮，在弹出的对话框中选择需要拆分为的单元格类型，并 输入要拆分为的行数和列数，然后单击“确定”按钮即可。
3. 单元格标签<td>
<td></td>标签对为表格的单元格标签，其包含在<tr></tr>标签对中。单元格用于 存放表格要显示的内容，可以是任意的HTML内容，这些内容位于<td></td>标签对之间。 在表格的一行中可以包含多个单元格。
— 15 —
案例一 制作2012年世界杯分组表——构建和美化表格
步骤 01 步骤 02
— 4—
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤
步骤 03
在设计视图中定 位插入点，然后 单击“插入”面 板“常用”类别 中的“表格”按 钮，打开“表格” 对话框，设置各 项参数，单击 “确定”分组表——构建和美化表格
<table id="data">
步骤 05
表格上面2行和最后2行的部分单元格背景色较深，需要单独处理。为此，在对应的单 元格<td>标签中添加class属性，class名为nouse，即在对应单元格的标签对中输入 class=“nouse”属性。
— 25 —
案例二 制作月历——使用CSS控制表格进阶
案例步骤
步骤 04
添加数据。使用鼠标依次单击每个单元格，输入数据。
步骤 05
修改表头。在设计界面中使用拖动方式选中表格第1行，然后右击所选行，在弹出的 快捷菜单中选择“表格(B)”>“合并单元格(M)”，此时所选单元格合并为一个单元格。
— 6—
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤
<th></th>标签对为表格特有的表示表头单元格的标签，在Dreamweaver的设计界 面中创建表格时可以选择表头所在的位置。scope为<th>标签的属性，表示定义表头， "col"为属性值，表示将当前列的所有单元格和表头单元格联系起来。
5. 标题标签<caption>
<caption></caption>标签对为table表格特有的表示标题的标签，同<th>标签不同的 是，<caption>标签不需要合并，它本身就只有一列，同时<caption>标签的位置是默认 居中的。
— 27 —
案例二 制作月历——使用CSS控制表格进阶
— 10 —
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤
步骤 04
设置表头（<th>标签）样式。在步骤3输入的代码下方输入如下代码。
th{ background-image:url(image/title.gif); /*设置表头背景图像为title.gif */ background-repeat:repeat-x; /*设置表头背景图像为横向重复*/ height:25px; /*设置表头高度为25像素（与背景图像的高度相同）*/ line-height:25px; /*设置表头行高为25像素（与表头高度一致，使文字居中）*/ color:#FFFFFF; /*设置表头文字颜色为白色（也可以写成color:white;）*/ border:1px solid #5F5F5F; /*设置表头边框1px，样式为直线，颜色为#5F5F5F*/ padding:0 2px 0; /*设置单元格内边距大小为上：0，左右：2像素，下：0*/ }
— 11 —
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤
步骤 05
设置表格单元格样式。 在步骤4输入的代码下 方输入如下代码。此 时在浏览器中预览网 页，可看到表格效果。
td{ border:1px solid #5F5F5F; height:25px; line-height:25px; padding-left:5px; }
标 签 <body></body> <table></table> <tr></tr> <td></td> <th></th>
— 8—
描 述 网页主体标签 表格标签 行标签 普通单元格标签 表头单元格（表格标题）标签
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤 2. 设置CSS样式
body{ }
步骤 03
设置表格边框和宽度等样式，并使表格整体居中对齐。在步骤2输入的代码下方输 入如下代码。 /*设置表格边框合并*/ /*设置表格宽度为800像素*/ /*设置表格与页面边界的间距为自动，此时表格会自动居中*/
table{ border-collapse:collapse; width:800px; margin:0px auto; }
— 17 —
案例一 制作2012年世界杯分组表——构建和美化表格 提示
在Dreamweaver的设计界面中，在要 选择的单元格上拖动鼠标可选中相应的单元格； 按住【Ctrl】键依次单击要选择的单元格，也 可同时选中多个单元格；单击网页文档底部状 态栏中的相应标签 ，可选中整个表格，或选 中插入点所在的行或单元格。
案例步骤
标 签
描 述
<body></body>
<table></table> <tr></tr> <td></td> <th></th> <caption></caption>
网页主体标签
表格标签 表格行标签 普通单元格标签 表头单元格标签 表格标题标签
— 26 —
提示
<caption></caption>
.row{ background-color:#D7D7D7; color:#000000; } /*设置背景颜色*/ /*设置文字颜色*/
— 13 —
案例一 制作2012年世界杯分组表——构建和美化表格
支撑知识点 一、表格的HTML标签
与其他HTML元素一样，表格也是由标签组成的。
1.
表格主体标签<table>
— 20 —
目录页
Contents Page
第6章 表格在网页中的应用
案例一 制作2012年世界杯分组表——构建和美化表格 案例二 制作童话故事页面——设置网页元素背景 案例二 制作月历——使用CSS控制表格进阶
— 21 —
案例二 制作月历——使用CSS控制表格进阶
案例说明
本案例要制作一个表格形 式的月历（以2015年7月 为例）。此月历的显示效 果为：6月及8月的部分日 期背景颜色为灰色，而7 月的日期背景颜色为白色； 当将鼠标指针移到单元格 上时单元格背景颜色会发 生变化。
— 18 —
案例一 制作2012年世界杯分组表——构建和美化表格
三、使用CSS设置表格或单元格颜色
使用CSS设置单元格内文字颜色，以及表格或单元 格背景的方法与设置文字颜色和网页元素背景的方法 相同。例如，可以使用color属性设置单元格内文字颜 色；使用background-color属性设置单元格、行或表格 背景颜色；使用background-image属性设置表格、行或 单元格背景图像。
— 1—
目录页
Contents Page
第6章 表格在网页中的应用
案例一 制作2012年世界杯分组表——构建和美化表格 案例二 制作月历——使用CSS控制表格进阶
— 2—
案例一 制作2012年世界杯分组表——构建和美化表格
案例说明
本案例通过制作2012年世界杯分组表，来学习与表格相关的HTML标签，掌握构建 表格结构，以及使用CSS美化表格的操作（如设置单元格高度、宽度、颜色和边框等）。
是表格的标题标签，由于是单
独的标签，所以可以方便地使 用CSS样式来设置表格标题的 显示效果。
案例二 制作月历——使用CSS控制表格进阶
案例步骤 2. 设置CSS样式
步骤 01
指定在页面中引入CSS样式的方法。本例使用内嵌样式，在<head></head>标签对之间 输入如下代码。
<style type="text/css"> <!---> </style>
colspan属性：用来合并行，语法： colspan=“数字”。例如：<td colspan=“3”></td>， 表示将1行中的3个单元格合并为一个。 rowspan属性：用来合并列，语法： rowspan="数字"。例如：<td rowspan="3"></td>，表示将一列中的3个单元 格合并为一个。
— 19 —
案例一 制作2012年世界杯分组表——构建和美化表格
四、使用CSS设置表格或单元格大小和边框
使用CSS设置表格或单元格大小和边框等的方法，与设置图像和其他块元素的方 法相同。例如，可以使用width属性设置整个表格或单元格宽度；使用height属性设置 整个表格或行的高度；使用border属性设置表格或单元格的边框。如代码 table{ border:1px solid red;}，表示设置整个表格的边框粗细为1像素，实线，红色。 如果使用CSS只设置了表格（<table>标签）的边框，则设置的是整个表格的外边 框，此时各单元格并不会受到影响，因此还需要单独为单元格设置相应的边框。
— 23 —
案例二 制作月历——使用CSS控制表格进阶
案例步骤
步骤 03
添加数据并修改表头。依次单击每一个单元格，输入数据。这样，一个初步的月历表 格即创建完成。
— 24 —
案例二 制作月历——使用CSS控制表格进阶
案例步骤
步骤 04
为了在使用CSS修饰表格时能更方便准确，为该表格添加id属性，id名为data，并删除 其他多余的代码，此时的代码如下。
<table></table>标签对为表格的主体标签，表格的其他组成元素，如行标签、单 元格标签等都包含在<table></table>标签对之间。
— 14 —
案例一 制作2012年世界杯分组表——构建和美化表格
2. 行标签<tr>
<tr></tr>标签对为表格的行标签，表格有多少行，就有多少个<tr></tr>标签对。 在每行中可以包含多个单元格。
步骤 01
指定在页面中引入CSS样式的方法。本例使用内嵌样式，在<head></head>标签对之间 输入如下代码。
<style type="text/css"> <!---> </style>
— 9—
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤
步骤 02
设置整体页面文字大小。在步骤1输入的<style type="text/css"></style>标签对之间输 入如下代码。 font-size:14px; /*设置整体页面文字大小为14像素*/
— 22 —
案例二 制作月历——使用CSS控制表格进阶
案例步骤
1.
步骤 01 步骤 02
构建HTML结构
打开“文件”面板，在已拷贝的文件夹“第6章\task2”中新建一个名为“yueli-lx.html” 的网页文档，并将其打开。 在设计界面 中单击“插 入”面板 “常用”类 别中的“表 格”按钮， 创建表格。
/*设置单元格边框粗细、样式和颜色*/ /*设置单元格高度为25像素*/ /*设置单元格行高为25像素，以使文字居中对齐*/ /*设置单元格左侧内边距为5像素*/
— 12 —
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤
步骤 06
设置前面定义的类名为row的表格行的背景色和文字颜色， 得到一个单双行颜色不同的表格。
— 7—
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤
步骤 06 步骤 07
在Dreamweaver的代码界面中分别在表格中的第1，3，5，7行（不包括表头的单数 行）标签对<tr></tr>中添加一个类（class）名row。 此时的表格没有做任何修饰。涉及的HTML标签如表6-1所示。
— 3—
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤 1. 构建HTML结构
将本书附赠的“素材与实例\第6章”文件夹拷贝至本地磁盘创建的My Web站点的根 目录中。 启动Dreamweaver CC，打开“文件”面板，在刚拷贝的文件夹“第6章\task1”中新建 一个名为WorldCup-lx.html的网页文档，并双击打开。
— 16 —
案例一 制作2012年世界杯分组表——构建和美化表格
二、合并和拆分单元格
要合并单元格，可先选中要合并的多个单元格，然后单击属性检查器中的“合并 单元格”按钮；要拆分单元格，可将插入点置于要拆分的单元格中，然后单击属性检 查器中的“拆分单元格”按钮，在弹出的对话框中选择需要拆分为的单元格类型，并 输入要拆分为的行数和列数，然后单击“确定”按钮即可。
3. 单元格标签<td>
<td></td>标签对为表格的单元格标签，其包含在<tr></tr>标签对中。单元格用于 存放表格要显示的内容，可以是任意的HTML内容，这些内容位于<td></td>标签对之间。 在表格的一行中可以包含多个单元格。
— 15 —
案例一 制作2012年世界杯分组表——构建和美化表格
步骤 01 步骤 02
— 4—
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤
步骤 03
在设计视图中定 位插入点，然后 单击“插入”面 板“常用”类别 中的“表格”按 钮，打开“表格” 对话框，设置各 项参数，单击 “确定”分组表——构建和美化表格
<table id="data">
步骤 05
表格上面2行和最后2行的部分单元格背景色较深，需要单独处理。为此，在对应的单 元格<td>标签中添加class属性，class名为nouse，即在对应单元格的标签对中输入 class=“nouse”属性。
— 25 —
案例二 制作月历——使用CSS控制表格进阶
案例步骤
步骤 04
添加数据。使用鼠标依次单击每个单元格，输入数据。
步骤 05
修改表头。在设计界面中使用拖动方式选中表格第1行，然后右击所选行，在弹出的 快捷菜单中选择“表格(B)”>“合并单元格(M)”，此时所选单元格合并为一个单元格。
— 6—
案例一 制作2012年世界杯分组表——构建和美化表格
案例步骤