第5章 表格的设计与 制作

内容提要 表格的创建、编辑 表格的属性设置 特效表格的制作 布局表格的基本操作 表格和布局表格的应用

5.1 表格的创建 在 HTML 代码中创建表格 1. 表格的组成 行、列、单元格 2. 表格的基本标签 在 HTML 文档中，创建表格使用的基本标签有 、 、 和 ，这些标签的具体含义及 用法如表 5-1 所示： 第 5 章 表格 的设计与制作

5.1 表格的创建 第 5 章 表格 的设计与制作 标签说明 定义一个表格，成对出现 定义表格中一行，成对出现，嵌套在 table 标 签内 定义表格中一列，成对出现，嵌套在 tr 标签内 定义表头单元格，成对出现，嵌套在 tr 标签内， 文本黑体居中 表 5-1 创 建表格使用的基本 标签

5.1 表格的创建 例 5-1 ：用 html 语言实现定义一个如图 5-1 所示的 2 行 2 列的表格。 图 行 2 列基本表格网页效果 第 5 章 表格 的设计与制作

5.1 表格的创建 代码如下： 表格的基本标记 第一行第一列 第一行第二列 第二行第一列 第二行第二列 第 5 章 表格 的设计与制作

5.1 表格的创建 3. 表格的属性 表格标记也有一些常见的属性，应用它们可以设置表格的边框、 宽度、高度、背景等，常用的表格属性的含义及用法如下： （ 1 ） border ：此属性定义表格的边框。 （ 2 ） cellspacing ：单元格间距。 （ 3 ） cellpadding ：单元格边距。 （ 4 ） width ：表格的宽度。 （ 5 ） height ：表格的高度。 （ 6 ） bgcolor ：表格的背景色。 （ 7 ） bordercolor ：表格的边框颜色 （ 8 ） bordercolorlight ：亮边框颜色，当 border 值不为 0 时设置此值有 效。 第 5 章 表格 的设计与制作

（ 9 ） bordercolordark ：暗边框颜色，当 border 值不为 0 时设置 有效。 （ 10 ） align ：设定表格在窗口中的对齐方式，也可以用来为 某一行或某一个单元格内容设置水平对其方式，其值有 left （左对齐，默认）、 center （居中）以及 right （右对齐）。 （ 11 ） valign ：指定某一行或某一个单元格内容的垂直对齐方 式，值由 top 、 middle 、 bottom 和 baseline 4 个值，分别代表顶 端对齐，居中对齐，底部对齐和基线对齐。 （ 12 ） colspan ：设定当前单元格跨越的列数。 （ 13 ） rowspan ：设定当前单元格跨越的行数。 第 5 章 表格 的设计与制作 5.1 表格的创建

第 5 章 表格 的设计与制作 （ 9 ） bordercolordark ：暗边框颜色，当 border 值不为 0 时设置 有效。 （ 10 ） align ：设定表格在窗口中的对齐方式，也可以用来为 某一行或某一个单元格内容设置水平对其方式，其值有 left （左对齐，默认）、 center （居中）以及 right （右对齐）。 （ 11 ） valign ：指定某一行或某一个单元格内容的垂直对齐方 式，值由 top 、 middle 、 bottom 和 baseline 4 个值，分别代表顶 端对齐，居中对齐，底部对齐和基线对齐。 （ 12 ） colspan ：设定当前单元格跨越的列数。 （ 13 ） rowspan ：设定当前单元格跨越的行数。 5.1 表格的创建

例 5-2 ：使用 html 语言编程实现下列网页效果。 第 5 章 表格 的设计与制作

5.1 表格的创建 表格的属性 青 春 历 程 专辑 照片 历程 档案 第 5 章 表格 的设计与制作

题 5-3 ：使用表格的 边 框和 间 距 属 性 实现 如 图 5-3 所示 带 有相框效果的 网页 第 5 章 表格 的设计与制作 5.1 表格的创建

表格的属性 第 5 章 表格 的设计与制作

5.1.2 在 Dreamweaver 中创建表格 1. 创建一般表格 在文档窗口的 “ 设计视图 ” 中通常通过以下方法插入表格。 （ 1 ）在主菜单中选择【插入】 —— 【表格】命令，或在插入 工具栏中选择 “ 常用 ” 类别，单击其中的表格按钮，如图 5-4 所示 。 图 5-4“ 插入 ” 工具栏的 “ 常用 ” 类别 （ 2 ）在弹出的 “ 表格 ” 对话框进行表格行数、列数等相关参数 的设置，然后单击 “ 确定 ” 按钮，就会在文中的当前位置插入一 个表格。 第 5 章 表格 的设计与制作 5.1 表格的创建

2. 创建嵌套表格 表格的单元格中再插入表格即构成表格的嵌套。 有时候网页的排版很复杂，这时候引入嵌套表格，由总表格负 责整体排版，将嵌套的表格插入到总表格的相应位置当中负责 各个子栏目的排版，各司其职，互不冲突。另外，通过嵌套表 格，利用表格的背景图像、边框、单元格间距和单元格边距等 属性可以得到不同于总表格的效果。 第 5 章 表格 的设计与制作

5.1 表格的创建 3. 导入表格数据 在表格中也可以添加各种网页元素。添加表格内容的方法很 简单，只需将光标定位到要添加内容的单元格中，然后按照添 加网页元素的方法操作就行了。 在 Dreamweaver 中，还可以将其他软件制作完成后的表格数 据导入到网页文档中。能够导入的数据有 EXCEL 文档（.xls 文 件）和其他应用软件制作的文本格式（.txt 文件）的表格数据 两种。 1. 导入 EXCEL 表格数据 2. 导入文本格式的表格数据 第 5 章 表格 的设计与制作

5.2 表格的编辑 选择表格对象 1. 选择整个表格： 2. 选择单元格：选择单个单元格和选择多个单元格 3. 选择整行 / 整列： （ 1 ）选择整行： （ 2 ）选择整列： 合并与拆分单元格 1. 合并单元格： 2. 拆分单元格： 第 5 章 表格 的设计与制作

5.2 表格的编辑 调整表格的行数与列数 1. 添加行或列 （ 1 ）添加行 （ 2 ）添加列 （ 3 ）添加多行或多列 2. 删除行或列 第 5 章 表格 的设计与制作

5.3 表格的属性设置 设置表格属性 1. 通过 “ 表格属性 “ 面板设置表格属性 2. 格式化表格 在 Dreamweaver 中，可以通过使用系统自带的表格模板格式 化表格，省去很多繁琐的设置表格的步骤，提高工作效率。 第 5 章 表格 的设计与制作

5.3 表格的属性设置 设置单元格属性 单元格的 “ 属性 ” 面板中，上半部分与选中文本时的 “ 属性 ” 面 板相同，主要用于设置单元格中文本的属性；下半部分主要用 于设置单元格的属性。 表格应用实例 第 5 章 表格 的设计与制作

5.3 表格的属性设置 使用 Dreamweaver 制作如图所示的网页效果 第 5 章 表格 的设计与制作

5.4 特效表格的制作 打造细线表格 要实现这种细线边框表格效果，需要用到单元格的间距属性， 具体操作步骤如下： 1. 创建一个表格。设置表格的行数、列数（如 2 行 1 列），边框 为 0 ，间距为 1. 根据需要调整表格的大小。 2. 选择表格，为表格添加一种背景色，即边线颜色（如黑色） 。 3. 选中所有单元格，为单元格添加与页面背景相同的颜色（如 白色）。 4. 保存文件，按下 F12 键，在浏览器中显示效果。 第 5 章 表格 的设计与制作

5.4 特效表格的制作 制作立体表格 立体表格制作步骤如下： 1. 创建一个表格。设置表格的行数、列数（如 1 行 4 列） ，边框为 1 ，间距为 0. 根据需要调整表格的大小。 2. 选择表格，为表格添加一种背景色（如灰色 #CCCCCC ）。 此时保存，在浏览器中看到的是一个普通网页 第 5 章 表格 的设计与制作

5.4 特效表格的制作 3. 在 Dreamweaver 编辑状态下切换到拆分视图，在 标签内填写如下属性代码。 bordercolorlight="#CCCCC C"bordercolordark="#FFFFFF" ，该网页主要代码变为： bordercolorlight="#CCCCCC"bordercolordark="#FF FFFF"> 按下 F12 键，在浏览器中显示的即为立体表格效 果， 第 5 章 表格 的设计与制作

5.4 特效表格的制作 打造圆角表格 网页上的圆角表格 第 5 章 表格 的设计与制作

5.4 特效表格的制作 制作圆角表格的步骤 （ 1 ）插入表格 新建文档，然后在新建的文档中插入一个 3 行 3 列的表格， 在 “ 表格 ” 对话框中设置表格宽度 400 像素，边框粗细为 0 ，单 元格边距为 0 ，单元格间距为 0 。 （ 2 ）插入图片 (3 ）设置单元格宽度和高度 （ 4 ）设置页面背景颜色 （ 5 ）设置表格背景色 （ 6 ）调整中心单元格的高度 （ 8 ）按 F12 保存并预览网页

5.4 特效表格的制作 2. 宽度固定的圆角表格

5.4 特效表格的制作 （ 1 ）插入表格 新建文档，然后在新建的文档中插入一个 3 行 1 列的表格，在 “ 表格 ” 对话框中设置表格宽度 140 像素，边框粗细为 0 ，单元格边距为 0 ，单元格间距为 0 。 （ 2 ）插入图像 在表格的上下两行分别插入图所示的图片（ top.gif ， bottom.gif ） ，此时表格如图 在中间的单元格中插入一个 1 行 1 列的表格，将这个表格的间距设 置为 1 ，边框粗细为 0 ，宽度为 100% ，背景颜色与图片颜色相同 （ #0080ff ）。 把刚插入表格的唯一的单元格的背景设置为白色，并将这个单元 格的高度设置为 100 像素。 按 F12 保存并在浏览器中预览，效果如图 5-38 所示。

5.5 布局表格 Dreamweaver 的布局模式 由于最初表格并不是为布局设计的，而是用于显示数据的， 所以使用它进行页面布局时操作会比较复杂。为简化使用表格 进行页面布局的过程， Dreamweaver 提供了布局模式。在布 局模式下可以方便的绘制布局表格，布局单元格，并对页面进 行合理布局。 创建布局表格和布局单元格 1. 布局模式切换 （ 1 ）从标准模式切换到布局模式 第 5 章 表格 的设计与制作

5.5 布局表格 （ 2 ）从布局模式切换到标准模式 单击 “ 布局模式 ” 文档工具栏中的 “ 退出 ” 按钮 单击 “ 布局 ” 工具栏中的 “ 标准按钮 ” 回到标准视图模式 选择主菜单中的【查看】 —— 【表格模式】 —— 【标准模式 】命令回到标准模式。 2. 创建布局表格 3. 创建布局单元格 4. 在布局单元格中添加内容 第 5 章 表格 的设计与制作

5.5 布局表格 调整布局表格和布局单元格 1. 调整布局表格和布局单元格的大小 （ 1 ）调整布局表格的大小 （ 2 ）调整布局表格的大小 2. 移动布局单元格 3. 布局表格和布局单元格的属性 （ 1 ）通过属性面板修改布局表格的属性 （ 2 ）使用下拉菜单修改布局表格的属性 （ 3 ）通过属性面板修改布局单元格的属性 第 5 章 表格 的设计与制作

5.5 布局表格 布局模式排版实例 第 5 章 表格 的设计与制作

5.5 布局表格 该网页的设计思想是，首先新建空白网页，指定图像素材 作为跟踪图像，然后进入 “ 布局模式 ” ，依照跟踪图像绘制布 局表格和布局单元格。返回标准模式后，在布局表格基础 上再插入标准表格进一步布局页面，接着分别插入图像或 设置图像作为背景，输入文本并设置项目列表，从而完成 图示网页的主页设计。具体操作步骤为： 1. 新建网页： 2. 保存网页： 3. 设置跟踪图像： 4. 进入布局模式： 5. 绘制布局表格： 6. 绘制其他布局表格：

5.5 布局表格 7. 单击文档窗口上方的 “ 退出 ” 按钮，返回 “ 标准 ” 模式，根据 跟踪图像手动调整表格。 8. 取消跟踪图像： 9. 设置单元格背景： 10. 拆分单元格： 11. 选中第二栏所在的表格，在属性面板中将表格背景设置 为 #0000cc ，边框为 0 ，间距为 拖动选择第二行所有单元格，在单元格属性面板中将其 单元格背景颜色设置为 #0099ff ，各单元格宽度为 100 像素 。 13. 选中表格 1 ，在表格属性面板中将表格的边框设置为 1 ， 边框颜色设置为 #0099ff 。以相同的方法，将表格 2 、 3 、 4 、 5 的表格的边框设置为 1 ，边框颜色设置为 #0099ff 。如图 所示。

5.5 布局表格

14. 设置最下方的表格： 15. 将光标定于表格 1 、 2 、 4 、 5 中，在然后再依次输入对应的文 字内容。 16. 将光标定于表格 3 中，属性面板中设置其垂直对齐方式为 “ 顶端 对齐 ” ，然后再选中【插入】 —— 【表格】菜单命令，插入一个 11 行 1 列的表格，宽度为 100% ，单元格边距为 1 。 17. 将光标定于刚插入的表格的第一行，选择【插入】 —— 【图像 】菜单命令，选择图像 ncxy.jpg ，将其插入，选中图像，在属性 面板中将对齐方式设为 “ 居住 ” ；在表格的其余各行依次输入 “ 学院 简介 ” 等文字内容。 18. 依次将网页中所有输入的文字大小设置为 12 像素。 19. 选中 “ 校园新闻 ” 在属性面板中设置对齐方式为 “ 居中对齐 ” ，颜 色为 #0000ff ， “ 学院简介 ” 、 “ 公告公示 ” 、 “ 校园电台 ” 、 “ 快捷导航 ” 设置与 “ 校园新闻 ” 相同。 20. 按 F12 在保存并预览，效果如图 5-54 所示。

第5章 表格的创建与制作