使用HTML建立表格PPT资料.ppt

使用HTML建立表格PPT资料.ppt

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

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

【例6-2】表格边框设置示例表格的边框属性图6-3表格的边框属性,单元格1单元格2,图6-3表格的边框属性,表6-1控制表格边框的属性及其功能,2表格高宽的控制,表格的高度和宽度是通过“height”和“width”两个属性来控制的，如例6-3所示。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6.5.1绘制布局单元格,图6-59绘制的表格和单元格,6.5.2绘制布局表格,图6-60在表格的底部显示宽度数值,6.5.3围绕已经存在的表格或者单元格绘制新表格,具体的操作步骤如下。

（1）在布局视图模式下，在“插入”面板的“布局”页中单击绘制布局表格按钮，这样光标就会变成十字的形状（）。

（2）单击并围绕已存在的单元格和表格拖动鼠标。

这样绘制的表格会将围绕的单元格和表格都包含进去，成为这个新创建的布局表格的单元格或者下一级布局表格。

6.5.4绘制嵌套表格,图6-61嵌套表格,6.5.5为布局单元格添加内容,图6-62在表格单元格中添加文本,6.5.6移动或者重新设置布局单元格和表格的大小,在布局中的每个单元格和表格都可以被移动或者重新设置大小，这样就可以方便地调整页面的布局了。

1重新设置单元格的大小,图6-63出现把柄后的单元格,2移动单元格3调整表格大小4移动一个布局表格,6.5.7设置布局宽度,在布局视图中可以有两种设定宽度的方式：

固定宽度和自动伸展。

在列底部区域显示了宽度数值。

固定宽度是一个指定的十进制数值，例如300（像素）。

自动伸展设置了宽度可以根据窗口的宽度而自动调整。

使用了自动伸展命令，布局将总是能够填满浏览器窗口。

图6-64设置列的布局宽度属性,1设置自动伸展宽度,设置自动伸展宽度有两种方法。

（1）单击要设为自动伸展宽度的列底部的数字（也就是显示了该列宽度的数值），然后在出现的（允许自动伸展命令）菜单（以后我们把这个菜单称为该列的底部菜单）中选择“列设置为自动伸展”命令，如图6-65所示。

图6-65选择允许列自动伸展命令,

（2）选择该列，然后在属性面板中选择“自动伸展”选项。

2设置固定宽度列,对于刚刚创建的布局表格和布局单元格而言，表格中的列都是根据初始条件设置的宽度，例如用鼠标拖曳出的宽度。

对于已经被设为自动伸展的列来说，在该列的底部菜单中选择“列设置为固定宽度”命令，就可以把该列转换为固定宽度的列。

这时在该列的底部，可以看到在宽度数值两边是绿色双线。

6.6实践与练习：

运用“布局”模式制作网页,本例通过使用“布局表格”和“布局单元格”制作网页，最终的页面效果如图6-66所示。

图6-66最终效果,1设计页面2绘制表格3插入图像,图6-67创建页面结构,图6-68绘制网页,图6-69分别存储图像,图6-70选择“布局”命令,图6-71启用“布局模式”,图6-72启用“绘制单元格”模式,图6-73绘制单元格,图6-74完成第一个单元格的绘制,图6-75设置单元格的宽、高,图6-76绘制第二个单元格,图6-77修改单元格的尺寸,图6-78完成表格的绘制,图6-79标准模式下的表格,图6-80插入图像,图6-81插入对应图像,图6-82选择图像的插入点,图6-83选择图像路径,图6-84插入背景图像,图6-85完成背景图像的插入,图6-86为单元格填充背景颜色,图6-87添加文字信息,图6-88最后效果,小结,本章的内容是介绍如何在网页中加入表格，并且对表格进行设置，使它能够以各种丰富的样式展现出来。

表格最重要的三个标签分别是“”、“和”，分别用于定义表格、表格中的行和表格单元格。

此外，还有与之相关的一些属性需要记清，比如边框、边距等参数的设置。

表格在网页中的作用除了显示数据以外，还经常被用作网页定位和布局的工具。