- 网页设计与网站建设完全实战手册
- 刘贵国
- 2256字
- 2021-03-19 18:34:58
10.3 表格的基本操作
创建了表格后,用户要根据网页设置的需要对表格进行处理,例如选择表格、调整表格和单元格的大小、添加或删除行或列、拆分单元格及合并单元格等,熟练掌握表格的基本操作,可以提高制作网页速度。
10.3.1 选定表格
要想对表格进行编辑,那么首先选择它,主要有以下5种方法选取整个表格。
●将光标置于表格的左上角,按住鼠标的左键不放,拖动鼠标指针到表格的右下角,将整个表格中的单元格选中,单击鼠标的右键,在弹出的快捷菜单中选择“表格”|“选择表格”命令,如图10-8所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00449.jpg?sign=1739534904-AoOdqHO82VxxoMUswqZKA8fGAMSWXEha-0-77e7db673753f77c9af892401ec51510)
图10-8 执行“选择表格”命令
●单击表格边框线的任意位置,即可选中表格,如图10-9所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00450.jpg?sign=1739534904-u3njbAaVg5531ulhKOSP3MKV0PPWcTXu-0-e52b40351a278040ea42f67dbb8b1b2c)
图10-9 单击表格边框线
●将光标置于表格内的任意位置,执行“修改”|“表格”|“选择表格”命令,如图10-10所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00451.jpg?sign=1739534904-piQlpyKq0MB7mroxNsc169091ZmPJzCj-0-571538e16df08f912b54da8b0acea91f)
图10-10 执行“选择表格”命令
●将光标置于表格内的任意位置,单击文档窗口左下角的<table>标签,如图10-11所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00452.jpg?sign=1739534904-ec9zrcAmNIwHFxOMmKE9Pg0IrjyN2cKG-0-14134667ad57a6ea411d136690c50121)
图10-11 单击<table>标签
10.3.2 添加行或列
可以执行“修改”|“表格”菜单中的子命令,增加或减少行与列。增加行与列可以用以下方法:
●将光标置于相应的单元格中,执行“修改”|“表格”|“插入行”命令,即可插入一行。
●将光标置于相应的位置,执行“修改”|“表格”|“插入列”命令,即可在相应的位置插入一列。
●将光标置于相应的位置,执行“修改”|“表格”|“插入行或列”命令,弹出“插入行或列”对话框,在对话框中进行相应的设置,如图10-12所示。单击“确定”按钮,即可在相应的位置插入行或列,如图10-13所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00453.jpg?sign=1739534904-ohCSSuKXVwDdazG9wZegMEMxmGuB5ekL-0-57b4aa16cc0a53e35c4c6db40bdc537a)
图10-12 “插入行或列”对话框
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00454.jpg?sign=1739534904-KeSAFlCORga8EIx1TBFqubFtH9oN6ku5-0-104f8a6e61b1c331fc4e91e4be7bcadb)
图10-13 插入行
★提示★
在“插入行或列”对话框中可以进行如下设置:
●插入:包含“行”和“列”两个单选按钮,一次只能选择其中一个来插入。该选项组的初始状态选择的是“行”单选按钮,所以下面的选项就是“行数”。如果选择的是“列”单选按钮,那么下面的选项就变成了“列数”,在“列数”文本框内可以直接输入要插入的列数。
●位置:包含“所选之上”和“所选之下”两个单选按钮。如果“插入”选项选择的是“列”单选按钮,那么“位置”选项后面的两个单选按钮就会变成“在当前列之前”和“在当前列之后”。
10.3.3 删除行或列
删除行或列有以下几种方法:
●将光标置于要删除行或列的位置,执行“修改”|“表格”|“删除行”命令,或执行“修改”|“表格”|“删除列”命令,即可删除行或列,如图10-14所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00455.jpg?sign=1739534904-1GtVugO6ATMXACjIWNDtBhcm5OckC1js-0-de8577cd2883b7b44a8f0d3226ec06ca)
图10-14 删除行
●选中要删除的行或列,执行“编辑”|“清除”命令,即可删除行或列。
●选中要删除的行或列,按Delete键或按BackSpace键也可删除行或列。
10.3.4 合并单元格
合并单元格就是将选中表格单元格中的内容合并到一个单元格。合并单元格,首先将准备合并的单元格选中,然后执行“修改”|“表格”|“合并单元格”命令,如图10-15所示,将多个单元格合并成一个单元格。或选中单元格后单击鼠标右键,在弹出的快捷菜单中选择“表格”|“合并单元格”命令,将多个单元格合并成一个单元格,如图10-16所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00456.jpg?sign=1739534904-HrAy1241Qu61MQmeuKOQcmltiH9HlqHE-0-1a4f864945f7a4743a4cd9a2535a4189)
图10-15 执行“合并单元格”命令
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00457.jpg?sign=1739534904-AkWd9EC862O8B2ewFwRlpBLg84c6NT3J-0-67fd153ad309a5b4876a2ed144955029)
图10-16 合并单元格
★提示★
单击“属性”面板中的“合并所选单元格,使用跨度”按钮,也可以合并单元格,它往往是创建复杂表格的重要步骤。
10.3.5 拆分单元格
在使用表格的过程中,有时需要拆分单元格以达到自己所需的效果。拆分单元格就是将选中的表格单元格拆分为多行或多列,具体操作步骤如下:
01 将光标置于要拆分的单元格中,执行“修改”|“表格”|“拆分单元格”命令,弹出“拆分单元格”对话框,如图10-17所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00459.jpg?sign=1739534904-GiKHTtodewE8vtcShUApgaQC9Kzy408u-0-9e93550a1555973cd64667767221f529)
图10-17 “拆分单元格”对话框
02 在对话框的“把单元格拆分”选项组中选择“列”单选按钮,将“列数”设置为4,单击“确定”按钮,即可将单元格拆分,如图10-18所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00460.jpg?sign=1739534904-Rvbqm2glkjSORA9XpEzunzZjkvCWRA4u-0-4bd0ca5a2796734a43504b2f7d9403f8)
图10-18 拆分单元格
10.3.6 调整表格大小
用“属性”面板中的“宽”和“高”数值框能精确地调整表格的大小,而用鼠标拖动调整则显得更为方便快捷,利用鼠标调整表格大小有3种方法。
●调整表格的宽:选中整个表格,将光标置于表格右边框控制点上,当光标变成双箭头
时,如图10-19所示,拖动鼠标即可调整表格整体宽度,调整后如图10-20所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00463.jpg?sign=1739534904-LiVVR6R1X54RCmDPYuWH96Z7h9f3HZdO-0-f6084573d42e15242511a1e88e8f7d6b)
图10-19 调整表格的宽
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00464.jpg?sign=1739534904-SL7ktC05DqXhaqiqmGo8VbbWz6sB7wKc-0-a10136a219f1c4eb4a0c304202956903)
图10-20 调整表格的宽后
●调整表格的高:选中整个表格,将光标置于表格低边框控制点上,当光标变成双箭头
时,如图10-21所示,拖动鼠标即可调整表格整体高度,调整后如图10-22所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00467.jpg?sign=1739534904-QacbeXtOQbzp9NkE9SBuL1GAQYqnIINH-0-54f3baa21dc556c547a1db8078e42b1a)
图10-21 调整表格的高
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00468.jpg?sign=1739534904-aIKDww1xIvrQnNuUTG5fDPTkyVTP6Dna-0-819a30c055fb1a9c6233aed411b92f55)
图10-22 调整表格高后
●同时调整表宽和高:选中整个表格,将光标置于表格右下角的控制点上,当光标变成双箭头
时,如图10-23所示,拖动鼠标即可调整表格整体高度和宽度,各列会被均匀调整,调整后如图10-24所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00471.jpg?sign=1739534904-rmFwaH9AtWSYrstxdb6c6oGietEeUwgS-0-c75448b41ffdabe877474a8f0e096a7c)
图10-23 调整表格的宽和高
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00472.jpg?sign=1739534904-fkAhr7XtIidKcaoTsTxgJg3OnACcbSCU-0-82bd004fd768cb2ab4354a23bd6372e1)
图10-24 整体调整表格后
★指点迷津★
使用布局表格排版时应注意什么?
在Dreamweaver中有一个非常重要的功能,即利用布局模式来给网页排版。在布局模式下,可以在网页中直接拖出表格与单元格,还可以自由拖动。利用布局模式对网页定位非常方便,但生成的表格比较复杂,不适合大型网站使用,一般只应用于中小型网站。
10.3.7 调整单元格大小
将光标置于要设置大小的单元格中,用“属性”面板中的“宽”和“高”数值框能精确地调整单元格的大小,而用鼠标拖动调整则显得更为方便快捷,用鼠标调整单元格大小有两种方法。
●调整列宽:将光标置于表格右边的边框上,当鼠标变成为时,拖动鼠标即可调整最后一列单元格的宽度,如图10-25所示,调整后的效果如图10-26所示。同时也可以调整某一行表格的宽度,对于其他的行不影响。将光标置于表格中间列边框上,当鼠标变成
时,拖动鼠标可以调整中间列边框两边的列单元格的宽度。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00474.jpg?sign=1739534904-awzsM70jZfXQtYFpdOcATgLpGeCSP1SW-0-bae82bc04323dd14e9d5e40b20b2d884)
图10-25 调整列宽
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00475.jpg?sign=1739534904-a6jb9GAVeM8TeTe6YR069BJjRdBnd0T7-0-a24968dbe417a6ea197cb9d7dbb3fef4)
图10-26 调整列宽后
●调整行高:将光标置于表格底部边框或者中间行线上,当光标变成时,拖动鼠标即可调整此位置上面一行单元格的高度,如图10-27所示,对于其他的行不影响,调整行高后如图10-28所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00477.jpg?sign=1739534904-FkKU9yXX2tASCfsb51raDlPYMkuhXvJa-0-5bf296d3d8154cd8e92185e7585aeec7)
图10-27 调整行高
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00478.jpg?sign=1739534904-hKmkOa4gAEwxp8dfeyEHldfCHfEwmVhU-0-fced406cbe2cdc16162fadd3fbdcce96)
图10-28 调整行高后