![网页设计与网站建设完全实战手册](https://wfqqreader-1252317822.image.myqcloud.com/cover/459/27110459/b_27110459.jpg)
10.3 表格的基本操作
创建了表格后,用户要根据网页设置的需要对表格进行处理,例如选择表格、调整表格和单元格的大小、添加或删除行或列、拆分单元格及合并单元格等,熟练掌握表格的基本操作,可以提高制作网页速度。
10.3.1 选定表格
要想对表格进行编辑,那么首先选择它,主要有以下5种方法选取整个表格。
●将光标置于表格的左上角,按住鼠标的左键不放,拖动鼠标指针到表格的右下角,将整个表格中的单元格选中,单击鼠标的右键,在弹出的快捷菜单中选择“表格”|“选择表格”命令,如图10-8所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00449.jpg?sign=1739689657-3AfX7591hzFusLbZfpgapFybnNDjULK3-0-c37de5712823ba47ce3532cf87b940b4)
图10-8 执行“选择表格”命令
●单击表格边框线的任意位置,即可选中表格,如图10-9所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00450.jpg?sign=1739689657-GK48IT30Ti3stAXmSJBVX9m9f2VuLMtk-0-79bafba2b5e796bc2dd9ad0f9d01f8f4)
图10-9 单击表格边框线
●将光标置于表格内的任意位置,执行“修改”|“表格”|“选择表格”命令,如图10-10所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00451.jpg?sign=1739689657-TAR0n4jZVTTB0AfHxVyYaJnpRdwMH1mf-0-39f89693b436df4049b899eaca4889e9)
图10-10 执行“选择表格”命令
●将光标置于表格内的任意位置,单击文档窗口左下角的<table>标签,如图10-11所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00452.jpg?sign=1739689657-8A89IAhwqTkxyUpGgmHyawazCJiv2H9c-0-7bcba80ac54721822d3b20380dcd9a3c)
图10-11 单击<table>标签
10.3.2 添加行或列
可以执行“修改”|“表格”菜单中的子命令,增加或减少行与列。增加行与列可以用以下方法:
●将光标置于相应的单元格中,执行“修改”|“表格”|“插入行”命令,即可插入一行。
●将光标置于相应的位置,执行“修改”|“表格”|“插入列”命令,即可在相应的位置插入一列。
●将光标置于相应的位置,执行“修改”|“表格”|“插入行或列”命令,弹出“插入行或列”对话框,在对话框中进行相应的设置,如图10-12所示。单击“确定”按钮,即可在相应的位置插入行或列,如图10-13所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00453.jpg?sign=1739689657-Zq3iwgxxR7x4VxDjnGiGPrnxPU0DOyb9-0-b6ee7eb91521353f9423264dc706db03)
图10-12 “插入行或列”对话框
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00454.jpg?sign=1739689657-nRUEduRuxnMCsmKNaXaDUfNrrWUVOLXQ-0-4a13b43c215ea8d9889902c9dd6f7e42)
图10-13 插入行
★提示★
在“插入行或列”对话框中可以进行如下设置:
●插入:包含“行”和“列”两个单选按钮,一次只能选择其中一个来插入。该选项组的初始状态选择的是“行”单选按钮,所以下面的选项就是“行数”。如果选择的是“列”单选按钮,那么下面的选项就变成了“列数”,在“列数”文本框内可以直接输入要插入的列数。
●位置:包含“所选之上”和“所选之下”两个单选按钮。如果“插入”选项选择的是“列”单选按钮,那么“位置”选项后面的两个单选按钮就会变成“在当前列之前”和“在当前列之后”。
10.3.3 删除行或列
删除行或列有以下几种方法:
●将光标置于要删除行或列的位置,执行“修改”|“表格”|“删除行”命令,或执行“修改”|“表格”|“删除列”命令,即可删除行或列,如图10-14所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00455.jpg?sign=1739689657-O6eieFRnKYmjpOV5CjtvlPTIXj0j2v5M-0-1831758fb41b633c84064c21f77ddc9b)
图10-14 删除行
●选中要删除的行或列,执行“编辑”|“清除”命令,即可删除行或列。
●选中要删除的行或列,按Delete键或按BackSpace键也可删除行或列。
10.3.4 合并单元格
合并单元格就是将选中表格单元格中的内容合并到一个单元格。合并单元格,首先将准备合并的单元格选中,然后执行“修改”|“表格”|“合并单元格”命令,如图10-15所示,将多个单元格合并成一个单元格。或选中单元格后单击鼠标右键,在弹出的快捷菜单中选择“表格”|“合并单元格”命令,将多个单元格合并成一个单元格,如图10-16所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00456.jpg?sign=1739689657-yGXI3ZfGwlBdCwe1arx7b7w1dERVPgng-0-4047f5f6f6e151c7746f1262f462b61c)
图10-15 执行“合并单元格”命令
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00457.jpg?sign=1739689657-uipKMx8raUdcIgO8qbgkaUfdSfRMoHY5-0-c539a5ac7035fcb2728fdf86a955705c)
图10-16 合并单元格
★提示★
单击“属性”面板中的“合并所选单元格,使用跨度”按钮,也可以合并单元格,它往往是创建复杂表格的重要步骤。
10.3.5 拆分单元格
在使用表格的过程中,有时需要拆分单元格以达到自己所需的效果。拆分单元格就是将选中的表格单元格拆分为多行或多列,具体操作步骤如下:
01 将光标置于要拆分的单元格中,执行“修改”|“表格”|“拆分单元格”命令,弹出“拆分单元格”对话框,如图10-17所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00459.jpg?sign=1739689657-q9K2cRsXhvb6hKhZ8Wmn1Tk97NpI1MPF-0-624ec5276fdd9ddc5cc1601a1e79a378)
图10-17 “拆分单元格”对话框
02 在对话框的“把单元格拆分”选项组中选择“列”单选按钮,将“列数”设置为4,单击“确定”按钮,即可将单元格拆分,如图10-18所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00460.jpg?sign=1739689657-TjL7x1ZlYuwsbCP1ubO98cb52Fk2cjZN-0-761c11a83d77dfcc203d6577ca83753f)
图10-18 拆分单元格
10.3.6 调整表格大小
用“属性”面板中的“宽”和“高”数值框能精确地调整表格的大小,而用鼠标拖动调整则显得更为方便快捷,利用鼠标调整表格大小有3种方法。
●调整表格的宽:选中整个表格,将光标置于表格右边框控制点上,当光标变成双箭头
时,如图10-19所示,拖动鼠标即可调整表格整体宽度,调整后如图10-20所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00463.jpg?sign=1739689657-BCYYnZaoPsuiZx8HAfVnnM20AhUowOn1-0-0fc39c617d31275e1124d6b85ed3c5fe)
图10-19 调整表格的宽
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00464.jpg?sign=1739689657-MIAUhYaM19JFveWvCyFTQlkaKvAMxp7J-0-5a887722925453056c3d27ada3497a5d)
图10-20 调整表格的宽后
●调整表格的高:选中整个表格,将光标置于表格低边框控制点上,当光标变成双箭头
时,如图10-21所示,拖动鼠标即可调整表格整体高度,调整后如图10-22所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00467.jpg?sign=1739689657-Lpk3eOfkopnckuZI8G3quStdtGl32xf4-0-5c598cc4cfd2d8b23ebe5b8a212a42ec)
图10-21 调整表格的高
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00468.jpg?sign=1739689657-49f0kWDbrmhOQkkczD0isnhBKxhnyeVX-0-54c4a081d5aed95850e41bc5ae8d5a8e)
图10-22 调整表格高后
●同时调整表宽和高:选中整个表格,将光标置于表格右下角的控制点上,当光标变成双箭头
时,如图10-23所示,拖动鼠标即可调整表格整体高度和宽度,各列会被均匀调整,调整后如图10-24所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00471.jpg?sign=1739689657-cQFwlXmz0fn9NayNUD0M26glnFVameYy-0-17494282b0379b7a4d231545b69d41bd)
图10-23 调整表格的宽和高
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00472.jpg?sign=1739689657-IQMdDYVV5Q0IgetjaP2he4tXsOd11RuU-0-63ec2ac827c9708b2e5f21285ce4a689)
图10-24 整体调整表格后
★指点迷津★
使用布局表格排版时应注意什么?
在Dreamweaver中有一个非常重要的功能,即利用布局模式来给网页排版。在布局模式下,可以在网页中直接拖出表格与单元格,还可以自由拖动。利用布局模式对网页定位非常方便,但生成的表格比较复杂,不适合大型网站使用,一般只应用于中小型网站。
10.3.7 调整单元格大小
将光标置于要设置大小的单元格中,用“属性”面板中的“宽”和“高”数值框能精确地调整单元格的大小,而用鼠标拖动调整则显得更为方便快捷,用鼠标调整单元格大小有两种方法。
●调整列宽:将光标置于表格右边的边框上,当鼠标变成为时,拖动鼠标即可调整最后一列单元格的宽度,如图10-25所示,调整后的效果如图10-26所示。同时也可以调整某一行表格的宽度,对于其他的行不影响。将光标置于表格中间列边框上,当鼠标变成
时,拖动鼠标可以调整中间列边框两边的列单元格的宽度。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00474.jpg?sign=1739689657-8ADg7zIQMFJIeyPyqGsjZ25TQFfIQG3p-0-dbe964730bb6855373eae784a3a50fef)
图10-25 调整列宽
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00475.jpg?sign=1739689657-0hp7fK74Q8oPdyhtSOMgqb9lh0wlHVaK-0-57d4b7e0e17b8d65ad56abf1eb35fc20)
图10-26 调整列宽后
●调整行高:将光标置于表格底部边框或者中间行线上,当光标变成时,拖动鼠标即可调整此位置上面一行单元格的高度,如图10-27所示,对于其他的行不影响,调整行高后如图10-28所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00477.jpg?sign=1739689657-2OBaahlM1k02PugQRlnVQL9uHSccUefm-0-534de57f26f5389b45ca18d9055e9e78)
图10-27 调整行高
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00478.jpg?sign=1739689657-45H2QUZI38ALojmxtuEdbYhJVLuEptxY-0-4ad750b95ee38cb1fbca46f24a253d35)
图10-28 调整行高后