第6章 表格在网页中的应用
合集下载
第6章 表格与表单
总结:间距cellspacing的作用
再设置填充为10
<table border="20" cellspacing="10 " cellpadding="10" bordercolor="#0099FF"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
可见：设置表格边框为0时，会使单元格边框也变为0象素， 而设置表格边框为其他数值时，不会影响单元格边框的宽
再设置背景颜色为玫瑰色
<table border="20" bgcolor="#9933CC" bordercolor="#0099FF"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
表格标记
表格是由<table>定义的，行由<tr>定义，单元格 由<td>定义，因此<table>、<tr>、<td>是表格中 三个最基本的标记，必须一起出现。 表格中的单元格<td>能容纳网页中的任何元素，如 图像，文本，列表，表单，表格等。
计算机应用基础第6章Excel2002的功能与使用
第6章 Excel 2002 的功能与使用
4. 图表生成 在Excel中，拥有包括柱形图、饼图、条形图、面积图、 折线图、气泡图以及三维图表等在内的14大类100多种基本 图表，而且具有“图表向导”，可帮助用户创建所需要的图 表。在“图表向导”中，可预览用户选择的效果；而且还能 返回，重新选择。另外，用户还可以使用新的数据地图，将 数据表中与地理有关的数据以地图的方式表示出来，使数据 与地图上的国家或省、市联系在一起。只要看一眼地图，就 可以找到各种数据与地理位置之间的关系。这些以图表方式 表现的数据直观、醒目。
第6章 Excel 2002 的功能与使用
6.1.2 Excel 2002的启动
在Windows 98/2000/NT/XP中，用户可用多种方法启动Excel
2002。
(1) 通过“开始”菜单启动。执行“开始/程序”命令，在相
应的子菜单中单击“
”选项。
(2) 通过桌面快捷图标启动。双击桌面上的“Microsoft Excel”
第6章 Excel 2002 的功能与使用
4. 输入日期和时间 在单元格中输入日期或时间时，单元格自动从“通用”格 式转换为“日期”或“时间”格式。输入日期和时间数据时， 可按照以下规则进行： (1) 若使用12小时制，需输入am或pm，比如5:30:20 pm，也 可输入a或p。但在时间与字母之间必须有一个空格。若未输入 am或pm，则按24小时制处理。若在同一单元格中输入日期和时 间，二者之间用空格分隔，比如05/02/12 17:00。输入字母时， 忽略大小写。 (2) 输入日期时，有多种格式，可以用“/”或“-”连接，也 可以使用年、月、日。比如07/10/23、07-10-23、23-APR-05、 2007年10月23日等。
六年级下册信息技术建立网页表格FrontPage06
使用表格功能表建立表格 使用工具列鈕建立表格 使用手繪表格鈕建立表格 輸入表格的標題文字 在儲存格插入圖片
6-2-1 使用表格功能表建立表格
FrontPage的「表格」功能表提供建立和 編輯表格所需的指令，只需輸入表格列和 欄數，就可以建立網頁表格。
6-2-2 使用工具列鈕建立表格
如果表格尺寸不大的話，可以直接使用 「一般」工具列的【插入表格】鈕快速建 立所需的表格。
6-3-8 刪除儲存格
如果表格尺寸不足可以插入列、欄或儲存 格，相反的操作，如果表格太大，我們一 樣可以刪除不需要的儲存格。
6-4 設定表格屬性
6-4-1 6-4-2 6-4-3 6-4-4 6-4-5 6-4-6 6-4-7 6-4-8
調整表格尺寸 表格的對齊方式 文繞圖的表格編排 儲存格墊充 儲存格間距 表格框線 表格的背景色彩 表格的背景圖片
在儲存格不只可以輸入文字內容，我們可 以將儲存格視為一頁較小尺寸的網頁，能 夠輸入本章前說明的各種網頁元素，例如： 圖片。
6-3 網頁表格的編輯
6-3-1 6-3-2 6-3-3 6-3-4 6-3-5 6-3-6 6-3-7 6-3-8
選取表格、列、欄和儲存格 插入列和欄 插入儲存格 合併儲存格 分割儲存格 平均分配欄寬 平均分配列高 刪除儲存格
6-4-1 調整表格尺寸
當建立表格時同時也會指定表格尺寸，在 輸入儲存格內容時，表格的尺寸也會隨之 調整，不過我們還是可以指定表格尺寸， 或是使用滑鼠拖拉調整表格尺寸。
6-4-2 表格的對齊方式
如果表格的寬度不是瀏覽程式視窗的百分 之一百時，我們可以如同文字段落一般調 整表格的對齊方式。
《网页设计与制作》习题及答案
第1章网页设计基础1.网页文件不包括 ( D )A HTML文件 B多媒体文件 C图像文件 D Dos文件2.网页构成元素按照元素划分为（ABCD ）A 文本B 图像 C超链接 D音频和视频3. HTML文档结构中表示头部信息的（ B）A < body > < /body > B<head></head> c <html></html> D<title></title>4.在HTML文档中，使文本内容强制换行的标签是（B）A<hr> B<br> C<pre> D<hn>5.以下哪个标签语言符合HTML的语法规范（D）A<img src=pic.jpg width=150 height=200/>B<p><div>文字加粗</p></div>C<p align=center>D<hr width=”400” color=”#000000”>6．不属于HTML标记的是（ C ）A.<html>B.<head>C.<color>D.<body>7．为了标记一个HTML文件，应该使用的HTML标记是（ C ）A.<p></p>B.<body></body>C.<html></html >D.<title></ title>二填空1.网页分为（静态网页）和（动态网页）两种类型。
2.HTML中的所有标签都是有一对（<>）围住。
3.HTML网页的标题是通过（<title></title>）标签显示的。
4.（<hr>）是水平线标签，可以在页面生成一条水平线。
网页的排版表格篇
⽹页的排版表格篇⽹页的排版表格篇⽹页离不开表格，决⼤多数的表格都是以表格为主体制作的表格是⽹页的⼀个⾮常重要元素，因为HTML本⾝并没有提供更多的排版⼿段，我们往往就要借助表格实现⽹页的精细排版。
可以说表格是⽹页制作中最为重要的⼀个技巧，表格运⽤得好坏，直接反映了了⽹页设计师的⽔平。
使⽤表格能使你的⽹页变得更加的清楚，使⼈看起来更有条理、更加直观，但它的使⽤有⼀个⼩⼩的缺陷：它会使你的⽹页显⽰的速度变慢⼀点。
我们知道⼀般的⽂字显⽰是逐⾏显⽰的，即⽂字从服务器上传了过来，尽管不全，但它还是会将传到的部分先显⽰出来，以⽅便浏览，⽽⽤了表格就不同了，表格⼀定要等到整个表格的内容全部传过来了之后，才能在客户端的屏幕上显⽰出来，即表格是整个⼀块⼉出现的。
因此我们在使⽤表格的同时要注意，如果表格包含的内容不是很多，就可以利⽤表格来更好的⼯作，但如果表格中包含的内容很多，此时最好别⽤表格结构，否则它会使你的⽹页出来的速度奇慢⽆⽐。
表格是现代⽹页制作的⼀个重要组成部分。
表格之所以重要是因为表格可以实现⽹页的精确排版和定位。
⾸先看表格操作的⼀个实例。
然后来看⼀些表格操作的基本⽅法。
在开始制作表格之前，我们⾸先对表格的各部分的名称做⼀个介绍。
下⾯看看我们使⽤表格制作的页⾯的实例这幅页⾯的排版格式，如果⽤以前我们所讲的对齐⽅式是⽆法实现的。
因此我们需要⽤到表格来做。
实际上是⽤两⾏两列的表格来制作。
1、在插⼊栏中选择按钮或“插⼊”菜单>选“表格”。
系统弹出表格对话框。
⾏：2。
列：2。
其余的参数都保留其默认值。
2、在编辑视图界⾯中⽣成了⼀个表格。
表格右、下及右下⾓的⿊⾊点是调整表格的⾼和宽的调整柄。
当光标移到点上就可以分别调整表格的⾼和宽。
移到表格的边框线上也可以调整。
3、在表格的第⼀格按住左键不放，向下拖拽选中⼆格单元格。
然后在展开的属性⾯板中选择合并单元格按钮（如下图红框所⽰）。
将表格的单元格合并。
如果要分割单元格，则可以⽤合并单元格按钮右边的按钮。
网页设计与制作第6章 表单的使用
❖ 一系列的选项。其中每个选项都是超级链接，选中 每一个选项都将打开一个链接。
❖ 一个跳转按钮。
6.3.7 跳转菜单
❖ 1．添加一个跳转菜单 ❖ 2．修改跳转菜单
第6章 表单的使用
操作题: 新建一个文档，在该文档中建立一个个人资料
的表单。该表单如下图所示。
POST请求。 ❖ 【目标】：指定打开链接文件的框架或窗口。 ❖ 【MIME类型】：指定提交服务器处理的数据的MIME编码方式，与 ❖ POST方法连用的一般是application/x-www-form-urlencode。如果创建 ❖ 的是文件上载区域，则指定multipart/form-data MIME格式。
6.2 表单的创建
(1)表单的HTML基本语法 <form>.. .. .. ..</form>
6.3 表单对象的创建
在创建表单之后，就可以通过表单工具面 栏在表单中插入各种表单对象，也可以通过 相应的菜单在表单中插入相应的表单对象。 在表单中可以插入单行文本域、隐藏文本域、 多行文本域、单选按钮、复选框、单选按钮 组、列表菜单以及跳转菜单等多种表单对象。
❖ 【按钮名称】：设置按钮的名字。按钮名有提交和重置两个 保留名。提交用于将表单信息提交至处理信息的应用或脚本； 重置用于以原始值重新设置所有的表单区。
❖ 【标签】：设置在按钮上显示的文本。
❖ 【动作】：指定在单击这个按钮时发生的事件。选择【提交 表单】单选按钮，将会自动将按钮标签设置为【提交】；选 择【重设表单】阅览单选按钮，将会自动将按钮标签设置为 【重置】；选择【无】单选按钮，则表示在按钮被单击后， 既不提交表单也不重置表单。
6.2 表单的创建
❖ 默认，使用浏览器默认的方法（一般为GET）。 ❖ 选择GET，追加表单值到URL，并发送服务器GET请求， ❖ URL限制长度为819个字符，超出长度的部分会被去掉，所以不要对长 ❖ 表单使用GET方法，也不要用GET方法传送用户名、密码、信用卡账号 ❖ 或其他机密信息，因为GET方法不是传送信息的安全方式。 ❖ 选择POST，在HTTP request的消息正文中发送表单的值，并发送服务器
❖ 一个跳转按钮。
6.3.7 跳转菜单
❖ 1．添加一个跳转菜单 ❖ 2．修改跳转菜单
第6章 表单的使用
操作题: 新建一个文档，在该文档中建立一个个人资料
的表单。该表单如下图所示。
POST请求。 ❖ 【目标】：指定打开链接文件的框架或窗口。 ❖ 【MIME类型】：指定提交服务器处理的数据的MIME编码方式，与 ❖ POST方法连用的一般是application/x-www-form-urlencode。如果创建 ❖ 的是文件上载区域，则指定multipart/form-data MIME格式。
6.2 表单的创建
(1)表单的HTML基本语法 <form>.. .. .. ..</form>
6.3 表单对象的创建
在创建表单之后，就可以通过表单工具面 栏在表单中插入各种表单对象，也可以通过 相应的菜单在表单中插入相应的表单对象。 在表单中可以插入单行文本域、隐藏文本域、 多行文本域、单选按钮、复选框、单选按钮 组、列表菜单以及跳转菜单等多种表单对象。
❖ 【按钮名称】：设置按钮的名字。按钮名有提交和重置两个 保留名。提交用于将表单信息提交至处理信息的应用或脚本； 重置用于以原始值重新设置所有的表单区。
❖ 【标签】：设置在按钮上显示的文本。
❖ 【动作】：指定在单击这个按钮时发生的事件。选择【提交 表单】单选按钮，将会自动将按钮标签设置为【提交】；选 择【重设表单】阅览单选按钮，将会自动将按钮标签设置为 【重置】；选择【无】单选按钮，则表示在按钮被单击后， 既不提交表单也不重置表单。
6.2 表单的创建
❖ 默认，使用浏览器默认的方法（一般为GET）。 ❖ 选择GET，追加表单值到URL，并发送服务器GET请求， ❖ URL限制长度为819个字符，超出长度的部分会被去掉，所以不要对长 ❖ 表单使用GET方法，也不要用GET方法传送用户名、密码、信用卡账号 ❖ 或其他机密信息，因为GET方法不是传送信息的安全方式。 ❖ 选择POST，在HTTP request的消息正文中发送表单的值，并发送服务器
Access数据库6章节报表的了解与使用
报表中的控件分为三种：
◆绑定控件：与表或查询中字段相连，主要用于显示数据库中的数据，如文本框等； ◆未绑定控件：没有数据源，主要用来显示说明性信息，是装饰元素，如分隔线等； ◆计算控件：以表达式作为数据源，表达式中可以使用报表数据源中的字段，也可以使用 其他控件中的数据，甚至是模块代码生成的数据。
边用边学Access2003
组页眉、页脚：输出分组的有关信息，页眉一般常用来设计分组的标题或提示信息。页脚 常用来放置分组的小计、平均值等。
说明：报表页眉的位置在第一页的页面页眉上边，报表页脚则在最后一页的页面页脚之上。 因为页面页眉要打印在每一页的上方，通常会放置必须在每页重复打印的数据，如字段 名。报表页眉在整个报表只打印一次，在第一页的最上方，通常放置报表标题，其下面 才是第一页的页面页眉。 报表最后一页的最后一条记录可能在页内任意处，而报表页脚是紧接着最后一条记录 的，只打印在报表的最后一页，在这一页，报表页脚内容通常会在此页的页面页脚上方， 这一点与设计窗口中显示的情况正好相反。
边用边学Access2003
5.4 使用设计视图报表
添加了控件的报表设计视图
说明：报表页眉的位置在第一页的页面页眉上边，报表页脚则在最后一面的页面页脚之上。因为页面页眉要打印在每一页的上方，通常会 放置必须在每页重复打印的数据，如字段名。报表页眉在整个报表只打印一次，在第一页的最上方，通常放置报表标题，其下面才 是第一页的页面页眉。
边用边学Access2003
操作： 1.以“学生”数据表为来源建立“籍贯学生”报表，按地区输入学生基 本信息，并输出各地区学生数量。 2.为“教师”打印“职代会入场证”，会议地点：校礼堂，会议时间： 本周五下午2：30（入场证包括姓名、性别、职称、单位和照片）。
第6章 表格与表单
注意: cellpadding类似于盒子模型的内边距padding，指的是单元格内部的距离 ，cellspacing则指的是外部单元格与单元格之间的距离。可以结合盒子 模型的内外边距理解cellpadding与cellspacing的不同。
6.1 表格标记
• 6.1.2 <table>标记的属性
4、width与height属性
设置单元格的背景图像 设置单元格横跨的列数（用于合并水平方向 的单元格） 设置单元格竖跨的行数（用于合并竖直方向 的单元格）
rowspan
正整数
6.1 表格标记
• 6.1.4 <td>标记的属性
注意:
让IT教学更简单，让IT学习更有效
1、在<td>标记的属性中，重点掌握colspan和rolspan，其他的属性了解 即可，不建议使用，均可用CSS样式属性替代。 2、当对某一个<td>标记应用width属性设置宽度时，该列中的所有单元 格均会以设置的宽度显示。 3、当对某一个<td>标记应用height属性设置高度时，该行中的所有单元 格均会以设置的高度显示。
6.2 CSS控制表格样式
• 6.2.2 CSS控制单元格边距
让IT教学更简单，让IT学习更有效
– 使用<table>标记的属性美化表格时，可以通过cellpadding和 cellspacing分别控制单元格内容与边框之间的距离以及相邻单元 格边框之间的距离。
注意: 行标记<tr>无内边距属性padding和外边距属性margin，本书不再做 具体的演示，初学者可以自己测试加深理解。
属性名 含义 常用属性值
height
align valign
- 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 —
<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 —