第13章使用表格轻松排列和布局网页元素

1、表格是网页设计制作时不可缺少的重 要元素。无论用于排列数据还是在页面上对文本 进行排版，表格都表现出了强大的功能。它以简 洁明了和高效快捷的方式，将数据、文本、图像 、表单等元素有序的显示在页面上，从而设计出 版式漂亮的网页。表格最基本的作用就是让复杂 的数据变得更有条理，让人容易看懂，在设计页 面时，往往要利用表格来布局定位网页元素。通 过对本章的学习，应掌握插入表格、设置表格属 性、编辑表格的方法；能够利用表格布局网页。 插入表格和表格元素 选择表格元素 表格的基本操作 排序及整理表格内容 利用表格排列数据 创建细线表格 13.113.1插入表格和表格元素插入表格和表格元素 在Dreamw

2、eaver 中，表格可以用于制作简 单的图表，还可以用于安排网页文档的整体布 局，起着非常重要的作用。利用表格设计页面 布局，可以不受分辨率的限制。 13.1.113.1.1插入表格插入表格 在Dreamweaver中插入表格非常简单，具体 操作步骤如下。 13.1.213.1.2设置表格属性设置表格属性 直接插入的表格有时并不能让人满意，在 Dreamweaver中，通过设置表格或单元格的属性，可 以很方便地修改表格的外观。 13.1.313.1.3添加内容到单元格添加内容到单元格 插入表格后，就可以直接向表格中添加内容 了，将光标置于表格的单元格中，分别输入相应的 文字。 13.2 13.

3、2 选择表格元素选择表格元素 要想在文档中对一个元素进行编辑，那么 首先要选中它；同样，要想对表格进行编辑， 首先也要选中它。选择表格操作可以分为选中 整个表格、选中单元格等几种情况，下面分别 进行介绍。 13.2.113.2.1选取表格选取表格 选择整个表格有以下几种方法。 单击表格线的任意位置。 将光标置于表格内的任意位置，选择菜单中的【修改】 |【表格】|【选择表格】命令。 将光标放置到表格的左上角，按住鼠标左键不放，拖 曳鼠标指针到表格的右下角，将整个表格中的单元 格选中，单击鼠标右键，在弹出的菜单中选择【表 格】|【选择表格】选项。 将光标放置在表格的任意位置，单击文档窗口左下角 的

4、标签，选中表格后，选项控柄就出现在表 格的四周， 13.2.213.2.2选取行或列选取行或列 选择表格的行或列有以下两种方法。 当鼠标指针位于要选择行首或列顶时，鼠标指针形状 变成了 箭头或 箭头时，单击鼠标左键即可以选 中行或列。 将光标置于要选择的行首或列顶，按住鼠标左键不放 从左至右拖曳或者从上至下拖曳，即可选中行或者 列。 13.2.313.2.3选取单元格选取单元格 选择一个单元格有以下几种方法。 选取单个单元格的方法是在要选择的单元格中单击鼠 标左键，并拖曳鼠标至单元格末尾。 按住键，然后单击单元格可以将其选中。 将光标放置在单元格中，单击文档窗口左下角的 标签。 13.313.

5、3表格的基本操作表格的基本操作 选择了表格后，便可以通过剪切、复制和 粘贴等一系列的操作实现对表格的编辑操作。 表格的行数、列数可以通过增加、删除行和列 及拆分、合并单元格来改变。 13.3.113.3.1调整表格和单元格的大小调整表格和单元格的大小 调整表格的高度和宽度时，表格中所有单元 格将按比例相应改变大小。 13.3.213.3.2添加或删除行或列添加或删除行或列 在已创建的表格内增加行、列，要先将光标 放置在要插入行、列的单元格中，然后通过以下方 法增加。 13.3.313.3.3拆分单元格拆分单元格 拆分单元格有以下几种方法。 将光标放置在要拆分的单元格中，选择菜单中的【修改】|

6、【表格】|【拆分单元格】命令，打开【拆分单元格】对话 框，在对话框中进行相应的设置，单击【确定】按钮，即 可拆分单元格。 将光标放置在要拆分的单元格中，单击鼠标右键，在弹出的 菜单中选择【表格】|【拆分单元格】选项，打开【拆分单 元格】对话框，也可以拆分单元格。 将光标放置在需要拆分的单元格中，在【属性】面板中单击 【拆分单元格为行或列】 按钮，打开【拆分单元格】对话 框，也可以拆分单元格。 13.3.413.3.4合并单元格合并单元格 合并单元格有以下几种方法。 选中要合并的单元格，选择菜单中的【修改】|【表格】 |【合并单元格】命令，即可将选中的单元格合并。 选中合并的单元格，单击鼠标右键

7、，在弹出的菜单中 选择【表格】|【合并单元格】选项，即可合并单元 格。 选中合并的单元格，在【属性】面板中单击【合并所 选单元格，使用跨度】 按钮，即可将选中的单元格 合并。 13.413.4排序及整理表格内容排序及整理表格内容 Dreamweaver CC提供了导入表格式数据和 表格排序功能，使用这两个功能可以整理表格 内的数据。 13.4.113.4.1导入表格式数据导入表格式数据 在Dreamweaver中，可以将其他应用软件制 作完成后的表格数据导入到网页中，导入的数据要 具有制表符、逗号、分号、引号或者其他定界符。 具体操作步骤如下。 13.4.213.4.2排序表格排序表格 如果想要使输入的表格数据有一定的规 律性，在Dreamweaver中可以对其进行排序，具体操 作步骤如下。 13.513.5实战实战 表格无疑是网页制作中最为重要的一 个对象，因为通常网页都是依靠表格来排 列数据的，它直接决定了网页是否美观、 内容组织是否清晰。合