- 网页设计与网站建设完全实战手册
- 刘贵国
- 2256字
- 2025-02-18 05:29:20
10.3 表格的基本操作
创建了表格后,用户要根据网页设置的需要对表格进行处理,例如选择表格、调整表格和单元格的大小、添加或删除行或列、拆分单元格及合并单元格等,熟练掌握表格的基本操作,可以提高制作网页速度。
10.3.1 选定表格
要想对表格进行编辑,那么首先选择它,主要有以下5种方法选取整个表格。
●将光标置于表格的左上角,按住鼠标的左键不放,拖动鼠标指针到表格的右下角,将整个表格中的单元格选中,单击鼠标的右键,在弹出的快捷菜单中选择“表格”|“选择表格”命令,如图10-8所示。

图10-8 执行“选择表格”命令
●单击表格边框线的任意位置,即可选中表格,如图10-9所示。

图10-9 单击表格边框线
●将光标置于表格内的任意位置,执行“修改”|“表格”|“选择表格”命令,如图10-10所示。

图10-10 执行“选择表格”命令
●将光标置于表格内的任意位置,单击文档窗口左下角的<table>标签,如图10-11所示。

图10-11 单击<table>标签
10.3.2 添加行或列
可以执行“修改”|“表格”菜单中的子命令,增加或减少行与列。增加行与列可以用以下方法:
●将光标置于相应的单元格中,执行“修改”|“表格”|“插入行”命令,即可插入一行。
●将光标置于相应的位置,执行“修改”|“表格”|“插入列”命令,即可在相应的位置插入一列。
●将光标置于相应的位置,执行“修改”|“表格”|“插入行或列”命令,弹出“插入行或列”对话框,在对话框中进行相应的设置,如图10-12所示。单击“确定”按钮,即可在相应的位置插入行或列,如图10-13所示。

图10-12 “插入行或列”对话框

图10-13 插入行
★提示★
在“插入行或列”对话框中可以进行如下设置:
●插入:包含“行”和“列”两个单选按钮,一次只能选择其中一个来插入。该选项组的初始状态选择的是“行”单选按钮,所以下面的选项就是“行数”。如果选择的是“列”单选按钮,那么下面的选项就变成了“列数”,在“列数”文本框内可以直接输入要插入的列数。
●位置:包含“所选之上”和“所选之下”两个单选按钮。如果“插入”选项选择的是“列”单选按钮,那么“位置”选项后面的两个单选按钮就会变成“在当前列之前”和“在当前列之后”。
10.3.3 删除行或列
删除行或列有以下几种方法:
●将光标置于要删除行或列的位置,执行“修改”|“表格”|“删除行”命令,或执行“修改”|“表格”|“删除列”命令,即可删除行或列,如图10-14所示。

图10-14 删除行
●选中要删除的行或列,执行“编辑”|“清除”命令,即可删除行或列。
●选中要删除的行或列,按Delete键或按BackSpace键也可删除行或列。
10.3.4 合并单元格
合并单元格就是将选中表格单元格中的内容合并到一个单元格。合并单元格,首先将准备合并的单元格选中,然后执行“修改”|“表格”|“合并单元格”命令,如图10-15所示,将多个单元格合并成一个单元格。或选中单元格后单击鼠标右键,在弹出的快捷菜单中选择“表格”|“合并单元格”命令,将多个单元格合并成一个单元格,如图10-16所示。

图10-15 执行“合并单元格”命令

图10-16 合并单元格
★提示★
单击“属性”面板中的“合并所选单元格,使用跨度”按钮,也可以合并单元格,它往往是创建复杂表格的重要步骤。
10.3.5 拆分单元格
在使用表格的过程中,有时需要拆分单元格以达到自己所需的效果。拆分单元格就是将选中的表格单元格拆分为多行或多列,具体操作步骤如下:
01 将光标置于要拆分的单元格中,执行“修改”|“表格”|“拆分单元格”命令,弹出“拆分单元格”对话框,如图10-17所示。

图10-17 “拆分单元格”对话框
02 在对话框的“把单元格拆分”选项组中选择“列”单选按钮,将“列数”设置为4,单击“确定”按钮,即可将单元格拆分,如图10-18所示。

图10-18 拆分单元格
10.3.6 调整表格大小
用“属性”面板中的“宽”和“高”数值框能精确地调整表格的大小,而用鼠标拖动调整则显得更为方便快捷,利用鼠标调整表格大小有3种方法。
●调整表格的宽:选中整个表格,将光标置于表格右边框控制点上,当光标变成双箭头
时,如图10-19所示,拖动鼠标即可调整表格整体宽度,调整后如图10-20所示。

图10-19 调整表格的宽

图10-20 调整表格的宽后
●调整表格的高:选中整个表格,将光标置于表格低边框控制点上,当光标变成双箭头
时,如图10-21所示,拖动鼠标即可调整表格整体高度,调整后如图10-22所示。

图10-21 调整表格的高

图10-22 调整表格高后
●同时调整表宽和高:选中整个表格,将光标置于表格右下角的控制点上,当光标变成双箭头
时,如图10-23所示,拖动鼠标即可调整表格整体高度和宽度,各列会被均匀调整,调整后如图10-24所示。

图10-23 调整表格的宽和高

图10-24 整体调整表格后
★指点迷津★
使用布局表格排版时应注意什么?
在Dreamweaver中有一个非常重要的功能,即利用布局模式来给网页排版。在布局模式下,可以在网页中直接拖出表格与单元格,还可以自由拖动。利用布局模式对网页定位非常方便,但生成的表格比较复杂,不适合大型网站使用,一般只应用于中小型网站。
10.3.7 调整单元格大小
将光标置于要设置大小的单元格中,用“属性”面板中的“宽”和“高”数值框能精确地调整单元格的大小,而用鼠标拖动调整则显得更为方便快捷,用鼠标调整单元格大小有两种方法。
●调整列宽:将光标置于表格右边的边框上,当鼠标变成为时,拖动鼠标即可调整最后一列单元格的宽度,如图10-25所示,调整后的效果如图10-26所示。同时也可以调整某一行表格的宽度,对于其他的行不影响。将光标置于表格中间列边框上,当鼠标变成
时,拖动鼠标可以调整中间列边框两边的列单元格的宽度。

图10-25 调整列宽

图10-26 调整列宽后
●调整行高:将光标置于表格底部边框或者中间行线上,当光标变成时,拖动鼠标即可调整此位置上面一行单元格的高度,如图10-27所示,对于其他的行不影响,调整行高后如图10-28所示。

图10-27 调整行高

图10-28 调整行高后