使用HTML建立表格.ppt

第6章表 格,使用表格可以清晰地显示列成表的数据，例如图6-1所示的是股票行情的数据列表。实际上表格的作用不只是显示数据，它还在网页定位上起着重要的作用。,图6-1 使用表格显示数据,6.1 使用HTML建立表格,表格的建立将利用3个最基本的HTML标签来完成，它们分别是“”标签、“”标签和“”标签。建立一个最基本的表格，必须包含一组“”和“”标签、一组“”和“”标签以及一组“”和“”标签，这也是最简单的单元格表格。,“”和“”标签的作用是定义一个表格，“”和“”标签的作用是定义一行，而“”和“”标签的作用是定义一个单元格。,6.1.1 一个最简单的表格,观察例6-1所示的代码。【例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 最后效果,小 结,本章的内容是介绍如何在网页中加入表格，并且对表格进行设置，使它能够以各种丰富的样式展现出来。表格最重要的三个标签分别是“”、“和”，分别用于定义表格、表格中的行和表格单元格。此外，还有与之相关的一些属性需要记清，比如边框、边距等参数的设置。表格在网页中的作用除了显示数据以外，还经常被用作网页定位和布局的工具。,