第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的消息正文中发送表单的值，并发送服务器

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

Dreamweaver CS6网页设计与制作标准教程 (6)

6.1 表格的简单操作
课堂案例——布艺沙发网页表格的组成
插入表格
表格各元素的属性在表格中插入内容
选择表格元素
复制、粘贴表格删除表格和表格内容
缩放表格
合并和拆分单元格增加和删除表格的行和列
6.1.1 课堂案例——布艺沙发网页
使用“属性”面板，设置页面边距及页面标题；使用“表格”
按钮，插入表格效果；使用“图像”按钮，插入图像。
6.1.6 选择表格元素
先选择表格元素，然后对其进行操作。一次可以选择整个表格、多行或多列，也可以选择一个或多个单元格。
选择整个表格
选择整个表格有以下几种方法。
将鼠标指针放到表格的四周边缘，鼠标指针右下角出现图标，单击鼠标左键即可选中整个表格。将插入点放到表格中的任意单元格中，然后在文档窗口左下角的标签栏中选择<table>标签令。在任意单元格中单击鼠标右键，在弹出的菜单中选择“表格 > 选择表格”命令。。将插入点放到表格中，然后选择“修改 > 表格 > 选择表格”命
选择不相邻的单元格按住Ctrl键的同时单击某个单元格即选中该单元格，当再次单
击这个单元格时则取消对它的选择。
6.1.7 复制、粘贴表格
在Dreamweaver CS6中复制表格的操作如同在Word中一样。可以对表格中的多个单元格进行复制、剪切、粘贴操作，并保留原单元格的格式，也可以仅对单元格的内容进行操作。
导入Word文档过程图
将网页中的表格导入到其他网页或Word文档中（1）将网页内的表格数据导出选择“文件 > 导出 > 表格”命令，弹出“导出表格”对话框，根据需要设置参数，单击“导出”按钮，弹出“表格导出为”对话框，输入保存导出数据的文件名称，单击“保存”按钮完成设置。

Web习题参考答案

《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。

2）WWW是建立在客户机／服务器模型之上的。

3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。

4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。

5）WWW浏览提供界面友好的信息查询接口。

(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。

它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。

图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。

动画：动画是动态的图形，添加动画可以使网页更加生动。

常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。

网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。

表格：在网页中使用表格可以控制网页中信息的结构布局。

超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。

表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。

其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。

Web应用程序设计案例教程第6章

3. 利用DataGrid控件输出后台数据库中的数据 4. DataGrid控件分页功能 ☺利用DataGrid控件进行分页，只要设置其分页属性并编写其分页事件过程的程序代码即可。 5. DataGrid控件排序功能 ☺DataGrid控件除了可以分页外，还可以进行排序。 ☺DataGrid控件本身并不具有排序的能力，所有的排序工作都必须在DataView中进行。
4
6.1.3 DataGrid控件
DataGrid控件是一个二维的数据网络，用来以表格形式显示数据源的数据和以列为单位设定各列的操作类型。 1. DataGrid控件的属性设置 ☺HorizontalAlign及GridLines属性可以设置的值 ☺HorizontalAlign Center 水平居中HorizontalAlign Left 水平向左HorizontalAlign Right 水平向右 ☺GridLines None 没有网格线 ☺GridLines Horizontal 产生水平网格线 ☺GridLines Vertical 产生垂直网格线 GridLines Both DataGrid控件允许以各种方式指定要显示的列。为了更精确地控制列的内容和布局，可以定义所示的列类型。 ☺BoundColumn(绑定列)显示绑定到数据源的列 ☺ButtonColumn(按钮列)为列中每个项显示一个命令按钮 ☺EditCommandColumn(编辑列)显示一列，该列包含列中各个项的编辑命令 ☺HyperLinkColumn(超链接列)将列中各项的内容显示为超链接形式 ☺TemplateColumn(模板列)按照指定的模板显示列中的各项
5
6.1.3 DataGrid控件
2. DataGrid控件的【属性生成器】 ☺在集成开发环境中，提供了一个【属性生成器】，使程序设计者通过简单直观的生成器，轻松完成DataGrid显示格式和操作模式的设计，具体操作过程如下。

《HTML CSS JavaScript网页制作三合一案例教程》教学课件 06第六章

16
案例二制作月历——使用CSS控制表格进阶
案例步骤
为便于理解，我们将本案例分为两局部进行制作，第1局部使用<table> 和其他表格组成标签，构建2021年9月份的月历内容及其结构；第2局部使用CSS来美化这个表格，并做到当将鼠标指针移到单元格上时有颜色变化的效果。
构建HTML1结构构建CSS样2式
3px;
左边距为3像素（顺时针方向）
21 支撑知识点
二、使用CSS合并表格边框
使用CSS设置单元格边框时，假设为每个单元格都设置边框宽度为1px，那么当两个单元格相邻的时候，相邻边的边框宽度实际上是 1px+1px=2px。为防止此情况发生，或为了防止单元格之间出现空隙，可使用border-collapse属性将表格相邻的边框合并。
案例说明
在网页设计中，表格占有很重要的地位。在Div+CSS布局方式出现之前，大局部网页都是用表格进行布局和分类显示数据的。现在，表格在网页制作中主要用来显示后台数据。将后台数据显示在一个表格中，不但可以使数据看起来更容易阅读，也可以让整个页面美观合理〔本书不涉及后台操作，所以本章中所有的数据均直接书写在页面的HTML代码中〕。本案例中，我们通过制作图6-1所示的2021年世界杯分组表，来学习与表格相关的HTML标签，掌握构建表格结构，以及使用CSS美化表格的操作〔如设置单元格高度、宽度、颜色和边框等〕。
13
合并单元格后，在Dreamweaver的代码界面中可看到系统自动为相应单元格添加了colspan或rowspan属性。因此，我们也可直接在代码视图中通过为单元格标签添加这两个属性来合并单元格。
➢ colspan属性：用来合并行，语法：colspan=“数字〞。例如：<td colspan=“3〞></td>，表示将1行中的3个单元格合并为一个。 ➢ rowspan属性：用来合并列，语法：rowspan="数字"。例如：<td rowspan="3"></td>，表示将一列中的3个单元格合并为一个。

第6章网页的排版布局

(8) 表格排序表格是一种常见的处理数据的形式，表格是一种常见的处理数据的形式，它可以对表格中的数据进行简单的分析，可以对表格中的数据进行简单的分析，例如表格排序等。表格排序等。方法：选择“命令排序表格命令，排序表格” 方法：选择“命令|排序表格”命令，打开“排序表格”对话框。打开“排序表格”对话框。说明：在进行排序时，说明：在进行排序时，先按主排序列进行排序，行排序，当主排序列相同再按次排序列进行排序。排序。
6.4 使用布局表格
为了简化使用表格进行页面布局的过程，为了简化使用表格进行页面布局的过程， Dreamweaver 8.0提供了布局视图模式。提供了布局视图模式。提供了布局视图模式
布局视图模式仍以表格为基础，布局视图模式仍以表格为基础，但克服了表格的一些缺陷，具有移动灵活的优点。表格的一些缺陷，具有移动灵活的优点。在布局视图模式中，在布局视图模式中，可以轻松地在页面上绘制布局表格和单元格，面上绘制布局表格和单元格，然后可以根据需要定制或移动单元格到理想的位置，据需要定制或移动单元格到理想的位置，进行页面的合理布局。进行页面的合理布局。
(3)删除行或列删除行或列方法一：选定要删除的行或列，方法一：选定要删除的行或列，执行编辑|清除命令或按Delete键。清除” “编辑清除”命令或按键方法二：在要删除的行或列上，方法二：在要删除的行或列上，单击鼠标右键，在弹出的快捷菜单中选择“表格| 标右键，在弹出的快捷菜单中选择“表格| 删除行(删除列命令。删除列)命令删除行(删除列)命令。说明：删除行或列时，说明：删除行或列时，如果选择的不是整行或整列的单元格，那么执行“编辑|清除清除” 整行或整列的单元格，那么执行“编辑清除” 命令或按delete键，只会删除单元格中的内容，命令或按键只会删除单元格中的内容，而不会删除单元格。而不会删除单元格。

网页设计与开发第6章试卷及答案

《网页设计与开发第6章》试卷一、选择题1）在HTML文件中，可以让表格显示边框线，例如:〈table border=5〉，5代表边框线的粗细，它的单位是（）.A．cmB．pixelC．gridD．dot答案： B2）在HTML语言中，下列( )是专属于td、th元素的属性。

A．bgcolorB．alignC．colspanD．background答案: C3）关于HTML表格说法错误的是( ）。

A．表格的width属性可以设置为像素值或百分比B．表格的height属性可以设置为像素值或者百分比C．如果不指定border属性，表格默认宽度为1D．表格和单元格的背景色可以同时设置答案： D4）下列（）设置能使单元格显示边框.A．在<td〉中添加border属性B．在<table〉中添加border属性C．在〈tr>中添加border属性D．以上全都可以答案： A5)在HTML文件中，给表格添加行的标签是（）。

A．<tr〉</tr〉B．〈td〉〈/td〉C．〈th〉〈/th〉D．以上都正确答案: A6）跨多列的单元格的HTML代码为（ )。

A．〈th colspan=#>B．〈th rowspan=＃〉C．〈td colspan=＃>D．<td rowspan=#>答案: C7）设置表格的单元格填充为0的HTML代码是( )。

A．〈table cellspacing=0>B．〈table height=0>C．<table border=0>D．〈table cellpadding=0〉答案： D8)表示表头的背景色彩的HTML是( ）。

A．<tr color=#>B．〈tr bgcolor=#〉C．<th bgcolor=#〉D．<th color=＃〉答案: C9）表示表头的背景图像的HTML是（ ).A．〈tr backgound=#>B．〈th backgound =＃>C．<th src=#〉D．<tr src=＃>答案： B10）关于表格的描述正确的一项是（）。

第6章利用表格排版页面

标题：提供一个显示在表格外的表格标题。
对齐标题：指定表格标题相对于表格的显示位置。包括默认、顶部、底部、左、右五个选项。
摘要：给出该表格的说明。在页面编辑时可以读取摘要内容，但是该不会显示在用户的浏览器中。
6.2 编辑表格
6.2.1 在表格单元中添加内容（1）输入文字
在表格单元格中可以插入文字、图像和其他对象（如嵌套表格）等。单击任意一个单元格，即可在该单元格中输入文本。此时，单元格宽度会随着键入文本自动扩展。
（2）拆分单元格
当需要对单个单元格进行拆分时，可以使用拆分单元格。倘若选中多个单元格进行拆分单元格操作，操作仅对第一个单元格有效。选中需要合并的单元格后，请执行下列操作之一：
①选择菜单栏【修改】→【表格】→【拆分单元格】。
②在展开的属性面板中，单击“拆分单元格” 。
然后在弹出的拆分单元格对话框中选择拆分的行数或者列数。
6.2.3 使用扩展表格模式
在Dreamweaver CS3中，可以使用扩展表格模式更容易的编辑表格。“扩展表格” 模式临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，我们可以选择表格中的项目或者精确地放置插入点。这样，我们就可以更准确的将插入点放置在图像的左边或右边，从而避免无意中选中该图像或表格单元格。
第6章利用表格排版页面
6.1 插入表格
表格是用于在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。
Dreamweaver CS3提供了两种查看和操作表格的方式：“标准”模式（在该模式下，表格显示为行和列的网格）和“布局”模式（允许您在将表格用作基础结构的同时在页面上绘制方框、调整方框的大小以及移动方框）。我们先来学习在标准模式下的表格操作。

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>
— 9—
案例一制作2012年世界杯分组表——构建和美化表格
案例步骤
步骤 02
设置整体页面文字大小。在步骤1输入的<style type="text/css"></style>标签对之间输入如下代码。 font-size:14px; /*设置整体页面文字大小为14像素*/
— 22 —

第6章 表格在网页中的应用

第6章 表格与表单

计算机应用基础第6章Excel2002的功能与使用

六年级下册信息技术建立网页表格FrontPage06

《网页设计与制作》习题及答案

网页的排版表格篇

网页设计与制作第6章 表单的使用

Access数据库6章节报表的了解与使用

第6章 表格与表单

Dreamweaver CS6网页设计与制作标准教程 (6)

Web习题参考答案

Web应用程序设计案例教程第6章

《HTML CSS JavaScript网页制作三合一案例教程》教学课件 06第六章

第6章 网页的排版布局

网页设计与开发第6章试卷及答案

第6章利用表格排版页面

第6章表格在网页中的应用

第6章表格与表单

网页设计与制作第6章表单的使用

第6章表格与表单

第6章网页的排版布局