使用HTML建立表格.ppt

使用HTML建立表格.ppt

《使用HTML建立表格.ppt》由会员分享，可在线阅读，更多相关《使用HTML建立表格.ppt（131页珍藏版）》请在冰豆网上搜索。

第第6章章表表格格在在Dreamweaver8中创建和操纵表格中创建和操纵表格6.2布局单元格和表格布局单元格和表格6.4实践与练习：

表格制作与使用实践与练习：

表格制作与使用6.3使用使用HTML建立表格建立表格6.1使用布局单元格和表格使用布局单元格和表格6.5实践与练习：

运用实践与练习：

运用“布局布局”模式制作网模式制作网页页6.6小结小结使用表格可以清晰地显示列成表的数据，使用表格可以清晰地显示列成表的数据，例如图例如图6-1所示的是股票行情的数据列表。

所示的是股票行情的数据列表。

实际上表格的作用不只是显示数据，它还实际上表格的作用不只是显示数据，它还在网页定位上起着重要的作用。

在网页定位上起着重要的作用。

图图6-16-1使用表格显示数据使用表格显示数据6.1使用使用HTML建立表格建立表格表格的建立将利用表格的建立将利用3个最基本的个最基本的HTML标签来完成，它们分别是标签来完成，它们分别是“”标签、标签、“”标签和标签和“”标签。

建立一个标签。

建立一个最基本的表格，必须包含一组最基本的表格，必须包含一组“”和和“”标签、一组标签、一组“”和和“”标签以及一组标签以及一组“”和和“”标签，这也是最简单的单元格表标签，这也是最简单的单元格表格。

格。

“”和和“”标签的作用标签的作用是定义一个表格，是定义一个表格，“”和和“”标标签的作用是定义一行，而签的作用是定义一行，而“”和和“”标签的作用是定义一个单元格。

标签的作用是定义一个单元格。

6.1.1一个最简单的表格一个最简单的表格观察例观察例6-1所示的代码。

所示的代码。

【例例6-1】最简单的表格示例最简单的表格示例单元格单元格单元格单元格1单元格单元格2单元格单元格3单元格单元格4单元格单元格5单元格单元格6图图6-26-2表格表格6.1.2各种表格样式各种表格样式1表格边框的设置表格边框的设置现在来了解一下现在来了解一下“”标签中各标签中各属性的用法，首先是设置表格边框的样式，属性的用法，首先是设置表格边框的样式，如例如例6-2所示。

所示。

【例例6-2】表格边框设置示例表格边框设置示例表格的边框属性表格的边框属性图图6-3表格的边框属性表格的边框属性单元格单元格1单元格单元格2图图6-36-3表格的边框属性表格的边框属性属属性性名名设设置置值值功功能能BorderBorder数字（以像素为单位）数字（以像素为单位）设置表格的外边框粗细设置表格的外边框粗细CellspacingCellspacing数字（以像素为单位）数字（以像素为单位）设置表格的内边框粗细设置表格的内边框粗细CellpaddingCellpadding数字（以像素为单位）数字（以像素为单位）设置文字到单元格内边框设置文字到单元格内边框的距离的距离表表6-16-1控制表格边框的属性及其功能控制表格边框的属性及其功能2表格高宽的控制表格高宽的控制表格的高度和宽度是通过表格的高度和宽度是通过“height”和和“width”两个属性来控制的，如例两个属性来控制的，如例6-3所示。

所示。

【例例6-3】高度和宽度设置示例高度和宽度设置示例表格的长宽表格的长宽课程课程教室教室语文语文东楼东楼1-13表格相关颜色的设置表格相关颜色的设置下面介绍表格边框和背景颜色的设置，下面介绍表格边框和背景颜色的设置，如例如例6-4所示。

所示。

【例例6-4】表格边框和背景颜色设置示例表格边框和背景颜色设置示例表格的颜色设置表格的颜色设置课程课程教室教室语文语文东楼东楼1-1英语英语西楼西楼1-1图图6-46-4表格的长宽表格的长宽图图6-56-5表格的颜色设置表格的颜色设置6.2在在Dreamweaver8中创建和操纵表格中创建和操纵表格Dreamweaver8对表格的控制非常灵对表格的控制非常灵活。

属性面板可以分别控制整个表格、表活。

属性面板可以分别控制整个表格、表格的一行、表格的一列或一个单元格。

属格的一行、表格的一列或一个单元格。

属性面板的控制对象由选中的对象决定。

当性面板的控制对象由选中的对象决定。

当把鼠标指针移到表格的四周时，鼠标指针把鼠标指针移到表格的四周时，鼠标指针的形状变为十字形，这时单击鼠标左键，的形状变为十字形，这时单击鼠标左键，表格四周出现一个框，表示选中整个表格，表格四周出现一个框，表示选中整个表格，这时属性面板如图这时属性面板如图6-6所示。

所示。

图图6-66-6控制整个表格的属性控制整个表格的属性图图6-76-7控制表格一列的属性控制表格一列的属性6.3实践与练习：

表格制作与使用实践与练习：

表格制作与使用6.3.1练习练习1：

制作：

制作“成绩单成绩单”表格表格图图6-86-8“成绩单成绩单”基本表格效果基本表格效果图图6-96-9输入表格标题文字输入表格标题文字图图6-106-10“表格表格”对话框对话框图图6-116-11设置表格设置表格图图6-126-12生成的表格生成的表格图图6-136-13在单元格内输入数据在单元格内输入数据图图6-146-14设置单元格为设置单元格为“居中对齐居中对齐”图图6-156-15“成绩单成绩单”基本表格效果基本表格效果6.3.2练习练习2：

制作：

制作“旅游行程表旅游行程表”立体表格立体表格本例着重练习在本例着重练习在Dreamweaver8中创中创建一个建一个“旅游行程表旅游行程表”，通过对表格边框，通过对表格边框的属性设置来创建一个有立体感的表格。

的属性设置来创建一个有立体感的表格。

本例最终效果如图本例最终效果如图6-16所示。

所示。

图图6-166-16“旅游行程表旅游行程表”立体表格效果立体表格效果图图6-176-17在新文档中输入表格标题在新文档中输入表格标题图图6-186-18“表格表格”对话框对话框图图6-196-19生成的立体表格生成的立体表格图图6-206-20选中表格选中表格图图6-216-21属性面板属性面板图图6-226-22修改属性修改属性图图6-236-23生成的立体效果生成的立体效果图图6-246-24对表格输入数据对表格输入数据图图6-256-25“旅游行程表旅游行程表”立体表格效果立体表格效果6.3.3练习练习3：

制作：

制作“旅游行程表旅游行程表”双线表格双线表格本例着重练习在本例着重练习在Dreamweaver8中创中创建一个建一个“旅游行程表旅游行程表”，通过对表格的边，通过对表格的边框及边框颜色的设置来创建双线表格。

本框及边框颜色的设置来创建双线表格。

本例最终效果如图例最终效果如图6-26所示。

所示。

图图6-266-26“旅游行程表旅游行程表”双线表格效果双线表格效果图图6-276-27在新文档中输入表格标题在新文档中输入表格标题图图6-286-28创建的新表格创建的新表格图图6-296-29选取表格选取表格图图6-306-30设置属性面板设置属性面板“间距间距”图图6-316-31表格效果表格效果图图6-326-32设置边框背景色设置边框背景色图图6-336-33设置后的属性面板设置后的属性面板图图6-346-34双线表格双线表格图图6-356-35“旅游行程表旅游行程表”双线表格效果双线表格效果6.3.4练习练习4：

套用设计方案制作：

套用设计方案制作“会议议程会议议程表表”本例着重练习在本例着重练习在Dreamweaver8中创中创建一个建一个“会议议程表会议议程表”，通过对表格执行，通过对表格执行“格式化表格格式化表格”命令，套用设计方案。

本命令，套用设计方案。

本例最终效果如图例最终效果如图6-36所示。

所示。

图图6-366-36“会议议程表会议议程表”套用设计方案效果套用设计方案效果图图6-376-37在新文档中输入表格标题在新文档中输入表格标题图图6-386-38插入表格插入表格图图6-396-39向表格的单元格中输入文本向表格的单元格中输入文本图图6-406-40选取表格选取表格图图6-416-41“格式化表格格式化表格”对话框对话框图图6-426-42套用设计方案套用设计方案图图6-436-43在格式化对话框中设计新方案在格式化对话框中设计新方案图图6-446-44“会议议程表会议议程表”套用设计方案效果套用设计方案效果6.3.5练习练习5：

用表格制作：

用表格制作“绿叶乡舟绿叶乡舟”网页网页顶部顶部本例着重练习在本例着重练习在Dreamweaver8中创中创建复杂的表格。

主要通过拆分单元格、合建复杂的表格。

主要通过拆分单元格、合并单元格、插入行、插入列等操作，制作并单元格、插入行、插入列等操作，制作一个复杂的表格。

本例最终效果如图一个复杂的表格。

本例最终效果如图6-45所示。

所示。

图图6-456-45“绿叶乡舟绿叶乡舟”网页顶部效果网页顶部效果图图6-466-46创建的表格创建的表格图图6-476-47设置表格属行设置表格属行图图6-486-48合并单元格合并单元格图图6-496-49插入图像后调节列宽插入图像后调节列宽图图6-506-50拆分单元格拆分单元格图图6-516-51“拆分单元格拆分单元格”对话框对话框图图6-526-52拆分单元格后的效果拆分单元格后的效果图图6-536-53单击单元格背景单击单元格背景URLURL按钮按钮图图6-546-54添加背景图添加背景图图图6-556-55输入输入“绿叶乡舟绿叶乡舟”图图6-566-56“绿叶乡舟绿叶乡舟”网页顶部效果网页顶部效果6.4布局单元格和表格布局单元格和表格前面我们介绍了用表格进行网页布局定前面我们介绍了用表格进行网页布局定位的基本方法，它是通过直接设定表格的位的基本方法，它是通过直接设定表格的参数来实现的。

对于简单的情况，这种方参数来实现的。

对于简单的情况，这种方法还可以胜任，如果布局很复杂，用手工法还可以胜任，如果布局很复杂，用手工直接设定表格就会变成一件极其烦琐的工直接设定表格就会变成一件极其烦琐的工作。

因此作。

因此Dreamweaver8为用户提供了方为用户提供了方便的手段来创建和控制网页页面的布局，便的手段来创建和控制网页页面的布局，而本质仍然是通过表格来实现的。

而本质仍然是通过表格来实现的。

为了简化使用表格来创建页面布局的过为了简化使用表格来创建页面布局的过程，程，Dreamweaver8提供了布局视图。

在提供了布局视图。

在布局视图下，用户可以使用表格作为潜在布局视图下，用户可以使用表格作为潜在的结构来设计自己的网页布局，并且可以的结构来设计自己的网页布局，并且可以避免原来使用表格带来的缺陷。

避免原来使用表格带来的缺陷。

例如可以在网页上轻松地画出单元格，例如可以在网页上轻松地画出单元格，然后定制和移动这些单元格到需要的任何然后定制和移动这些单元格到需要的任何地方。

创建的布局可以有固定的宽度或者地方。

创建的布局可以有固定的宽度或者可以占满整个浏览器窗口。

要使用布局视可以占满整个浏览器窗口。

要使用布局视图，必须首先从图，必须首先从Dreamweaver8的标准视的标准视图模式切换到布局视图模式。

图模式切换到布局视图模式。

首先观察首先观察Dreamweaver8的的“插入插入”面板中的面板中的“布局布局”页，如图页，如图6-57所示。

所示。

图图6-576-57“插入插入”面板中的面板中的“布局布局”页页图图6-586-58在布局视图页面中绘制单元格在布局视图页面中绘制单元格6.5使用布局单元格和表格使用布局单元格和表格在布局视图模式下，可以在页面中绘制在布局视图模式下，可以在页面中绘制布局单元格和表格。

如果是先创建布局单布局单元格和表格。

如果是先创建布局单元格，则会自动创建一个布局表格作为它元格，则会自动创建一个布局表格作为它的容器，布局单元格总是存在于布局表格的容器，布局单元格总是存在于布局表格中。

中。

6.5.1绘制布局单元格