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 —
