多媒体技术与网页设计表格

多媒体技术与网页设计第19章表格图19.1“表格”对话框图19.2创建的表格

2.输入内容

表格创建后可以向表格中输入内容。输入表格内容的方法很简单，只需将光标移到需要输入内容的单元格中，然后按输入文本或插入图像的方法进行操作即可。如图19.3所示为向表格中输入了三幅图像。图19.3输入表格内容19.2编辑表格

刚开始创建的表格有时并不一定符合要求，这时就需要编辑表格，如删除表格、拆分与合并某些单元格等。

19.2.1选择表格

对表格进行操作之前要先选择表格，既可以选择整个表格，也可以只选择某行或某列或某个单元格。1.选择整个表格

选择整个表格的方法有以下几种：

(1)将鼠标移到表格内部的边框上，当鼠标变为或形状时单击鼠标即可，如图19.4所示。图19.4选择表格方法(1)(2)将鼠标移到表格的外边框线上，当鼠标变为形状时单击鼠标左键即可，如图19.5所示。图19.5选择表格方法(2)(3)将光标移到表格的任一单元格中，单击窗口左下角标签选择器中的<table>标签即可，如图19.6所示。图19.6选择表格方法(3)(4)将光标移到表格的任一单元格中，表格上端或

下端将弹出绿线的标志，单击最上端标有表格宽度的按

钮，在弹出的菜单中选择“选择表格”命令即可，如图19.7所示。图19.7选择表格方法(4)2.选择整行

选择整行有以下两种方法：

(1)将鼠标移到需选择行的左侧，当鼠标变为形状且该行的边框线变为红色时，单击鼠标左键即可选择该行，如图19.8所示。图19.8选择整行方法(1)(2)将光标移到需选择行的任一单元格中，单击窗口左下角标签选择器中的<tr>标签即可，如图19.9所示。图19.9选择整行方法(2)3.选择整列

选择整列有以下两种方法：

(1)将鼠标移到需选择列的上端，当鼠标变为形状且该列的边框线变为红色时，单击鼠标左键即可，如图19.10所示。图19.10选择整列方法(1)(2)将光标移到表格中任一单元格中，单击需选择的列上端的按钮，在弹出的菜单中选择“选择列”命令即可，如图19.11所示。图19.11选择整列方法(2)

4.选择单元格

选择单元格有选择单个单元格、选择相邻的多个单元格和选择不相邻的多个单元格三种方式。

(1)选择单个单元格：将鼠标移动到需要选择的单元格中并单击即可。(2)选择相邻的多个单元格：首先将鼠标移动到一个单元格中，然后按住鼠标左键不放并拖动，当到达需要的单元格时释放鼠标，即可选择以这两个单元格为对角线的矩形区域中的所有单元格，如图19.12所示。图19.12选择相邻的多个单元格(3)选择不相邻的多个单元格：按住Ctrl键不放，然后单击要选择的单元格即可，如图19.13所示。图19.13选择不相邻的多个单元格19.2.2拆分与合并单元格

1.拆分单元格

可以将某个单元格拆分成几行或几列。例如，拆分图19.14所示的原始表格的具体步骤如下：

(1)将光标移到要拆分的单元格中，然后单击“属性”面板左下角“单元格”栏中的按钮(如图19.15所示)，弹出如图19.16所示的“拆分单元格”对话框。图19.14原始表格图19.15点击拆分表格按钮

(2)在“把单元格拆分”栏中，若选中“行”按钮，可以将单元格拆分成多行；若选中“列”按钮，则可以将单元格拆分为多列。

(3)在“行数”或“列数”数值框中输入要拆分的行数或

列数。

(4)单击“确定”按钮，即可得到如图19.17所示的拆分结果。图19.16“拆分单元格”对话框图19.17拆分表格结果

2.合并单元格

单元格合并只能对相邻的两个或多个单元格进行合

并。首先要选择相邻的单元格区域(如图19.18所示)，然后单击“属性”面板左下角的按钮(如图19.19所示)，即可将它们合并为一个单元格，如图19.20所示。图19.19点击合并表格按钮图19.20合并结果

图19.18选择相邻的单元格

19.2.3插入与删除行(列)

在制作表格时，经常要插入或删除行(列)。

1.插入行(列)

行(列)的插入有单行(列)和多行(列)的插入两种情况。

1)单行(列)的插入

将光标移到需插入行或列的单元格中，单击鼠标右

键，在弹出的快捷菜单中选择“表格”→“插入行”命令，即可在当前单元格上方插入一行，如图19.21所示；若在弹出的快捷菜单中选择“表格”→“插入列”命令，则可在当前单元格的左侧插入一列，如图19.22所示。图19.21插入单行图19.22插入单列

2)多行(列)的插入

插入多行或多列的具体步骤如下：

(1)将光标插入点定位到需插入多行或多列的单元

格中。

(2)单击鼠标右键，在弹出的快捷菜单中选择“表格”→“插入行或列”命令，弹出“插入行或列”对话框。(3)输入行(列)的数值，在“位置”栏选择插入的位置，如图19.23所示。图19.23“插入行或列”对话框(4)单击“确定”按钮，关闭对话框完成设置。如图19.24所示为表格插入了两行后的效果。图19.24插入两行后的效果

2.删除行(列)

将光标移到需删除的单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”→“删除行”命令可以删除光标所在的行；选择“表格”→“删除列”命令则可删除光标所在的列。

19.3设置表格

19.3.1设置表格属性

选择某个表格后，单击鼠标右键，在弹出的快捷菜单中选择“属性”命令，弹出如图19.25所示的“属性”面板，通过该面板可以对表格的属性进行设置。图19.25表格“属性”面板表格“属性”面板中各项参数的含义如下：

(1)表格Id：命名表格名称。

(2)行、列：设置表格的行数和列数。

(3)宽、高：设置表格的宽度和高度。

(4)填充：设置单元格边界和单元格内容之间的

距离。

(5)间距：设置相邻单元格之间的距离。

(6)对齐：设置表格与文本或图像等网页元素之间的对齐方式。

(7)边框：设置边框的粗细。

(8)边框颜色：设置边框的颜色。

(9)背景颜色：设置表格的背景颜色。

(10)背景图像：设置表格的背景图像。单击文本框右侧的按钮，在弹出的“选择图像源文件”对话框中可以选择图像作为背景。

(11)按钮：删除表格的列宽值。

(12)按钮：删除表格的行高值。

(13)按钮：将表格宽度单位从浏览器窗口的百分比转换为像素。

(14)按钮：将表格宽度单位从像素转换为浏览器窗口的百分比。19.3.2设置单元格属性

Dreamweaver软件可以设置某个单元格、行或列的属性。选择要设置属性的单元格、行或列，单击鼠标右键，在弹出的快捷菜单中选择“属性”命令，弹出如图19.26所示的“属性”面板。图19.26单元格“属性”面板

(1)水平：设置单元格中的文本在水平方向上的对齐方式。

(2)垂直：设置单元格中的文本在垂直方向上的对齐方式。

(3)宽、高：设置单元格的宽度和高度。

(4)背景：设置单元格的背景图像。

(5)背景颜色：设置单元格的背景颜色。

(6)边框：设置单元格边框的颜色。

19.4高级操作

19.4.1创建嵌套表格

嵌套表格是指表格中的某个单元格又含有表格，但是其宽度受所在单元格宽度的限制。嵌套表格经常用于对表格内部的文字或图像的位置进行控制。创建嵌套表格和创建表格非常类似，其具体操作步骤如下：

(1)将光标移到需插入表格的单元格中。

(2)选择“插入”→“表格”命令，弹出“表格”对话框。

(3)设置表格的行数、列数、宽度和边框等属性。

(4)单击“确定”按钮完成表格的添加，如图19.27

所示。图19.27创建的嵌套表格19.4.2排序

Dreamweaver8可对表格中的内容进行排序，其具体操作步骤如下：

(1)选择要进行排序操作的表格，如图19.28所示。图19.28选择表格

(2)选择“排序表格”命令，弹出“排序表格”对话框。

(3)在“排序按”下拉列表框中选择主关键字序列，这里选择“列2”作为主关键字排序列。在其下面的“顺序”下拉列表框中选择是按字母还是按数字、是升序还是降序排序。这里分别选择“按字母顺序”选项和“升序”选项。

(4)在“再按”中选择作为子排序列的列，这里选择“列3”选项。在其下的“顺序”中选择子排序列的排序方式，这里分别选择“按数字顺序”选项和“升序”选项，如图19.29

所示。图19.29“排序表格”对话框

(5)单击“确定”按钮关闭对话框，对表格的内容进行排序，结果如图19.30所示。

在“排序表格”对话框的“选项”栏进行设置，其中各

项参数的含义如下：

(1)排序包含第一行：将表格的第一行包括在排序

中。图19.30排序后的表格

(2)排序标题行：指定使用与body行相同的条件对表格thead部分中的所有行进行排序，前提是thead部分存在。

(3)排序脚注行：指定使用与body行相同的条件对表格tfoot部分中的所有行进行排序，前提是tfoot部分存在。

(4)完成排序后所有行颜色保持不变：指定排序后表格行的属性应该保持与相同内容的关联。19.4.3格式化

格式化即设置表格的格式，其具体操作步骤为：选择“格式化表格”命令，弹出“格式化表格”对话框，在其左上角列表框中选择一种表格样式，或在下方的设置区域中对表格进行设置，如图19.31所示。设置后单击“确定”按钮，如图19.32所示为格式化后的表格。图19.31“格式化表格”对话框图19.32格式化后的表格

19.5使用布局视图进行网页布局

使用表格除了可以制作表格外，还可以布局网页。用表格布局网页有两种方法：一种是手工添加布局表格，其方法和添加普通表格一样，只要将表格边框的粗细设置为0，表格的间距设置为0，根据需要手动设置每个单元格的宽度和高度即可；另一种是在布局视图中创建布局表格和布局单元格，从而对网页进行布局。19.5.1创建布局表格和布局单元格

要使用布局表格和布局单元格，首先要将编辑窗口切换到布局模式，然后创建布局表格，再在布局表格中添加布局单元格进行页面布局。

1.切换到布局视图

将插入栏切换到“布局”插入栏，单击“布局”按钮，将编辑窗口切换到布局模式，此时“布局”插入栏中的“布局表格”按钮和“布局单元格”按钮被激活，如图19.33所示。图19.33切换到布局视图

2.创建布局表格

将编辑窗口切换到布局视图后就可以添加布局表格，在“布局”插入栏中单击按钮，此时鼠标指针变为形

状，按住鼠标左键不放，拖动到所需位置后释放鼠标即

可。如图19.34所示为创建的布局表格。图19.34创建的布局表格

3.创建布局单元格

添加布局表格可以添加布局单元格，单击“布局”插入栏中的按钮，按住鼠标左键不放，从左上角向右下角拖动到适合大小后释放鼠标即可。如图19.35所示为在布局表格中创建的布局单元格。图19.35创建的布局单元格

4.创建嵌套布局表格

在布局表格中还可以创建嵌套的布局表格，单击“布局”插入栏中的按钮，然后在已创建的布局表格中拖动鼠标光标即可创建嵌套布局表格，如图19.36所示。图19.36创建的嵌套布局表格19.5.2设置布局表格和布局单元格属性

1.设置布局表格属性

在布局表格的空白位置处单击鼠标，将显示布局表格的“属性”面板，如图19.37所示。其中各项含义如下：

(1)宽：设置表格的宽度，该栏中有“固定”和“自动伸展”两个单选按钮。当选中“固定”单选按钮时，可在后续

操作中设置布局表格的宽度；当选中“自动伸展”单选按钮时，表格的宽度将自动伸展到整个窗口的宽度。

(2)高：设置表格的高度。

(3)背景颜色：设置表格的背景颜色。

(4)填充：设置单元格的边框与内容的距离。

(5)间距：设置每个单元格之间的间距。图19.37布局表格的“属性”面板2.设置布局单元格属性

在布局单元格中的