1、1 第6章表格 2 3 4 使用表格可以清晰地显示列成表的数据 例如图6 1所示的是股票行情的数据列表 实际上表格的作用不只是显示数据 它还在网页定位上起着重要的作用 5 图6 1使用表格显示数据 6 6 1使用HTML建立表格 表格的建立将利用3个最基本的HTML标签来完成 它们分别是 标签 标签和 标签 建立一个最基本的表格 必须包含一组 和 标签 一组 和 标签以及一组 和 标签 这也是最简单的单元格表格 7 和 标签的作用是定义一个表格 和 标签的作用是定义一行 而 和 标签的作用是定义一个单元格 8 6 1 1一个最简单的表格 观察例6 1所示的代码 例6 1 最简单的表格示例单元格
2、 9 单元格1单元格2单元格3单元格4 10 单元格5单元格6 11 图6 2表格 12 6 1 2各种表格样式 1 表格边框的设置现在来了解一下 标签中各属性的用法 首先是设置表格边框的样式 如例6 2所示 13 例6 2 表格边框设置示例表格的边框属性图6 3表格的边框属性 14 单元格1单元格2 15 图6 3表格的边框属性 16 表6 1控制表格边框的属性及其功能 17 2 表格高宽的控制 表格的高度和宽度是通过 height 和 width 两个属性来控制的 如例6 3所示 18 例6 3 高度和宽度设置示例表格的长宽 19 课程教室语文 20 东楼1 1 21 3 表格相关颜色的设
3、置 下面介绍表格边框和背景颜色的设置 如例6 4所示 22 例6 4 表格边框和背景颜色设置示例表格的颜色设置 23 课程教室 24 语文东楼1 1英语西楼1 1 25 26 图6 4表格的长宽 27 图6 5表格的颜色设置 28 6 2在Dreamweaver8中创建和操纵表格 Dreamweaver8对表格的控制非常灵活 属性面板可以分别控制整个表格 表格的一行 表格的一列或一个单元格 属性面板的控制对象由选中的对象决定 当把鼠标指针移到表格的四周时 鼠标指针的形状变为十字形 这时单击鼠标左键 表格四周出现一个框 表示选中整个表格 这时属性面板如图6 6所示 29 图6 6控制整个表格的属
4、性 30 图6 7控制表格一列的属性 31 6 3实践与练习 表格制作与使用 6 3 1练习1 制作 成绩单 表格 32 图6 8 成绩单 基本表格效果 33 图6 9输入表格标题文字 34 图6 10 表格 对话框 35 图6 11设置表格 36 图6 12生成的表格 37 图6 13在单元格内输入数据 38 图6 14设置单元格为 居中对齐 39 图6 15 成绩单 基本表格效果 40 6 3 2练习2 制作 旅游行程表 立体表格 本例着重练习在Dreamweaver8中创建一个 旅游行程表 通过对表格边框的属性设置来创建一个有立体感的表格 本例最终效果如图6 16所示 41 图6 16
5、旅游行程表 立体表格效果 42 图6 17在新文档中输入表格标题 43 图6 18 表格 对话框 44 图6 19生成的立体表格 45 图6 20选中表格 46 图6 21属性面板 47 图6 22修改属性 48 图6 23生成的立体效果 49 图6 24对表格输入数据 50 图6 25 旅游行程表 立体表格效果 51 6 3 3练习3 制作 旅游行程表 双线表格 本例着重练习在Dreamweaver8中创建一个 旅游行程表 通过对表格的边框及边框颜色的设置来创建双线表格 本例最终效果如图6 26所示 52 图6 26 旅游行程表 双线表格效果 53 图6 27在新文档中输入表格标题 54 图
6、6 28创建的新表格 55 图6 29选取表格 56 图6 30设置属性面板 间距 57 图6 31表格效果 58 图6 32设置边框背景色 59 图6 33设置后的属性面板 60 图6 34双线表格 61 图6 35 旅游行程表 双线表格效果 62 6 3 4练习4 套用设计方案制作 会议议程表 本例着重练习在Dreamweaver8中创建一个 会议议程表 通过对表格执行 格式化表格 命令 套用设计方案 本例最终效果如图6 36所示 63 图6 36 会议议程表 套用设计方案效果 64 图6 37在新文档中输入表格标题 65 图6 38插入表格 66 图6 39向表格的单元格中输入文本 67
7、 图6 40选取表格 68 图6 41 格式化表格 对话框 69 图6 42套用设计方案 70 图6 43在格式化对话框中设计新方案 71 图6 44 会议议程表 套用设计方案效果 72 6 3 5练习5 用表格制作 绿叶乡舟 网页顶部 本例着重练习在Dreamweaver8中创建复杂的表格 主要通过拆分单元格 合并单元格 插入行 插入列等操作 制作一个复杂的表格 本例最终效果如图6 45所示 73 图6 45 绿叶乡舟 网页顶部效果 74 图6 46创建的表格 75 图6 47设置表格属行 76 图6 48合并单元格 77 图6 49插入图像后调节列宽 78 图6 50拆分单元格 79 图6
8、 51 拆分单元格 对话框 80 图6 52拆分单元格后的效果 81 图6 53单击单元格背景URL按钮 82 图6 54添加背景图 83 图6 55输入 绿叶乡舟 84 图6 56 绿叶乡舟 网页顶部效果 85 6 4布局单元格和表格 前面我们介绍了用表格进行网页布局定位的基本方法 它是通过直接设定表格的参数来实现的 对于简单的情况 这种方法还可以胜任 如果布局很复杂 用手工直接设定表格就会变成一件极其烦琐的工作 因此Dreamweaver8为用户提供了方便的手段来创建和控制网页页面的布局 而本质仍然是通过表格来实现的 86 为了简化使用表格来创建页面布局的过程 Dreamweaver8提供
9、了布局视图 在布局视图下 用户可以使用表格作为潜在的结构来设计自己的网页布局 并且可以避免原来使用表格带来的缺陷 87 例如可以在网页上轻松地画出单元格 然后定制和移动这些单元格到需要的任何地方 创建的布局可以有固定的宽度或者可以占满整个浏览器窗口 要使用布局视图 必须首先从Dreamweaver8的标准视图模式切换到布局视图模式 88 首先观察Dreamweaver8的 插入 面板中的 布局 页 如图6 57所示 89 图6 57 插入 面板中的 布局 页 90 图6 58在布局视图页面中绘制单元格 91 6 5使用布局单元格和表格 在布局视图模式下 可以在页面中绘制布局单元格和表格 如果是
10、先创建布局单元格 则会自动创建一个布局表格作为它的容器 布局单元格总是存在于布局表格中 92 6 5 1绘制布局单元格 图6 59绘制的表格和单元格 93 6 5 2绘制布局表格 图6 60在表格的底部显示宽度数值 94 6 5 3围绕已经存在的表格或者单元格绘制新表格 具体的操作步骤如下 1 在布局视图模式下 在 插入 面板的 布局 页中单击绘制布局表格按钮 这样光标就会变成十字的形状 2 单击并围绕已存在的单元格和表格拖动鼠标 这样绘制的表格会将围绕的单元格和表格都包含进去 成为这个新创建的布局表格的单元格或者下一级布局表格 95 6 5 4绘制嵌套表格 图6 61嵌套表格 96 6 5
11、5为布局单元格添加内容 图6 62在表格单元格中添加文本 97 6 5 6移动或者重新设置布局单元格和表格的大小 在布局中的每个单元格和表格都可以被移动或者重新设置大小 这样就可以方便地调整页面的布局了 1 重新设置单元格的大小 98 图6 63出现把柄后的单元格 99 2 移动单元格3 调整表格大小4 移动一个布局表格 100 6 5 7设置布局宽度 在布局视图中可以有两种设定宽度的方式 固定宽度和自动伸展 在列底部区域显示了宽度数值 固定宽度是一个指定的十进制数值 例如300 像素 自动伸展设置了宽度可以根据窗口的宽度而自动调整 使用了自动伸展命令 布局将总是能够填满浏览器窗口 101 图
12、6 64设置列的布局宽度属性 102 1 设置自动伸展宽度 设置自动伸展宽度有两种方法 1 单击要设为自动伸展宽度的列底部的数字 也就是显示了该列宽度的数值 然后在出现的 允许自动伸展命令 菜单 以后我们把这个菜单称为该列的底部菜单 中选择 列设置为自动伸展 命令 如图6 65所示 103 图6 65选择允许列自动伸展命令 104 2 选择该列 然后在属性面板中选择 自动伸展 选项 105 2 设置固定宽度列 对于刚刚创建的布局表格和布局单元格而言 表格中的列都是根据初始条件设置的宽度 例如用鼠标拖曳出的宽度 对于已经被设为自动伸展的列来说 在该列的底部菜单中选择 列设置为固定宽度 命令 就可
13、以把该列转换为固定宽度的列 这时在该列的底部 可以看到在宽度数值两边是绿色双线 106 6 6实践与练习 运用 布局 模式制作网页 本例通过使用 布局表格 和 布局单元格 制作网页 最终的页面效果如图6 66所示 107 图6 66最终效果 108 1 设计页面2 绘制表格3 插入图像 109 图6 67创建页面结构 110 图6 68绘制网页 111 图6 69分别存储图像 112 图6 70选择 布局 命令 113 图6 71启用 布局模式 114 图6 72启用 绘制单元格 模式 115 图6 73绘制单元格 116 图6 74完成第一个单元格的绘制 117 图6 75设置单元格的宽 高
14、 118 图6 76绘制第二个单元格 119 图6 77修改单元格的尺寸 120 图6 78完成表格的绘制 121 图6 79标准模式下的表格 122 图6 80插入图像 123 图6 81插入对应图像 124 图6 82选择图像的插入点 125 图6 83选择图像路径 126 图6 84插入背景图像 127 图6 85完成背景图像的插入 128 图6 86为单元格填充背景颜色 129 图6 87添加文字信息 130 图6 88最后效果 131 小结 本章的内容是介绍如何在网页中加入表格 并且对表格进行设置 使它能够以各种丰富的样式展现出来 表格最重要的三个标签分别是 和 分别用于定义表格 表格中的行和表格单元格 此外 还有与之相关的一些属性需要记清 比如边框 边距等参数的设置 表格在网页中的作用除了显示数据以外 还经常被用作网页定位和布局的工具
