使用表格布局网页

第4章 使用表格布局网页 表格基本操作 表格高级操作

4.1 表格基本操作表格(Table)是由一个或多个单元格构成的集合， 表格中横向的多个单元格称为行(在HTML语言中 以<tr>标签开始，</tr>标签结束),垂直的多个 单元格称为列(以<td>标签开始，</td>标签结 束),行与列的交叉区域称为单元格，网页中的元 素就放置在这些单元格中 。此处表示未 明确设置单 元格宽度 此处显示了表格 的宽度。如果只 显示一个“▼” 符号，表示未明 确设置表格宽度

列

行 单元格

4.1.1 创建表格Dreamweaver CS4拥有非常完善的表格编辑 功能，本节我们首先来看一下如何在网页文档中 创建表格。

4.1.2 选择表格和单元格1.选择表格 将鼠标光标移至单元格边框线上，当鼠标光标变为 或 形 状时单击鼠标左键。 将鼠标光标移至表格外框线上，当鼠标光标变为 形状时， 单击鼠标左键。

在表格内部任意单元格中单击鼠标左键，然后在标签选择器 中单击对应的“<table>”标签 。 将插入点置于表格的任意单元格中，表格上方或下方将显示 绿线标志，单击最上方或最下方标有表格宽度的绿线中的 ， 在弹出的下拉菜单中选择“选择表格”命令。

2.选择行或列要选择某行或某列，可将光标置于该行左侧或该列 顶部，当光标形状变为黑色箭头 或 时单击鼠标左 键。

3.选择单元格在Dreamweaver中可以选择单个单元格，也可以 选择连续的多个单元格或不连续的多个单元格。 要选择某个单元格，可首先将插入点置于该单元格内，然 后按【Ctrl+A】组合键或单击“标签选择器”中对应的 “<td>”标签。 要选择连续的单元格区域。应首先在要选择的单元格区域 的左上角单元格中单击，然后按住鼠标左键向右下角单元格 方向拖动鼠标，最后松开鼠标左键。 如果希望选择一组不相邻的单元格，可按住【Ctrl】键单击 选择各单元格。

4.1.3 设置表格属性

选中表格后，可利用属性检查器查看或修改表格的 行、列、宽，以及填充、间距、对齐、边框等属性。

4.1.4 设置单元格属性在表格的某个单元格中单击，属性检查器中将显示 水平、垂直、宽、高等单元格属性，此时可通过属 性检查器设置其属性。

4.2 表格高级操作4.2.1 拆分与合并单元格在网页制作中，经常会用到一些特殊结构的表格， 此时就需要拆分或合并单元格。

1.拆分单元格拆分单元格就是将一个单元格拆分成多个单元格。

2.合并单元格所谓合并单元格，就是将相邻的两个或多个单元 格合并成一个单元格。 拖动鼠标选中要合并的连续单元格(此处为第1行 中间的2个单元格),然

后单击属性检查器上的 “合并所选单元格，使用跨度”按钮 ，则2个单 元格合并为1个单元格

4.2.2 插入、删除行和列在使用表格组织大量信息时，往往需要在创建好的 表格中添加或删除行与列，以增加或减少记录。

4.2.3 移动表格整行内容在对表格中的内容进行处理时，有时候可能需要 移动表格中的某一行内容。在Dreamweaver 中移动表格整行内容的方法非常简单。

4.2.4 排序表格内容在处理包含大量数据的表格时，往往需要对表格中 的内容进行排序，此时可执行以下操作。

4.2.5 导入或导出表格内容在制作网页时，如果预先有表格内容存储在记事本 或Word等文档中，可以直接将其导入到网页中； 此外，还可以将网页中的表格内容导出为独立的文 件，以便在需要使用时导入。

综合实例—用表格布局“delong”网站子 页本例通过为第2章综合实例中创建的“delong”网站 子页sub02.html设置布局和内容，来练习和巩固前 面所学知识(具体操作见视频4-1)。