- 網(wǎng)頁設計與網(wǎng)站建設完全實戰(zhàn)手冊
- 劉貴國
- 2256字
- 2021-03-19 18:34:57
10.3 表格的基本操作
創(chuàng)建了表格后,用戶要根據(jù)網(wǎng)頁設置的需要對表格進行處理,例如選擇表格、調(diào)整表格和單元格的大小、添加或刪除行或列、拆分單元格及合并單元格等,熟練掌握表格的基本操作,可以提高制作網(wǎng)頁速度。
10.3.1 選定表格
要想對表格進行編輯,那么首先選擇它,主要有以下5種方法選取整個表格。
●將光標置于表格的左上角,按住鼠標的左鍵不放,拖動鼠標指針到表格的右下角,將整個表格中的單元格選中,單擊鼠標的右鍵,在彈出的快捷菜單中選擇“表格”|“選擇表格”命令,如圖10-8所示。

圖10-8 執(zhí)行“選擇表格”命令
●單擊表格邊框線的任意位置,即可選中表格,如圖10-9所示。

圖10-9 單擊表格邊框線
●將光標置于表格內(nèi)的任意位置,執(zhí)行“修改”|“表格”|“選擇表格”命令,如圖10-10所示。

圖10-10 執(zhí)行“選擇表格”命令
●將光標置于表格內(nèi)的任意位置,單擊文檔窗口左下角的<table>標簽,如圖10-11所示。

圖10-11 單擊<table>標簽
10.3.2 添加行或列
可以執(zhí)行“修改”|“表格”菜單中的子命令,增加或減少行與列。增加行與列可以用以下方法:
●將光標置于相應的單元格中,執(zhí)行“修改”|“表格”|“插入行”命令,即可插入一行。
●將光標置于相應的位置,執(zhí)行“修改”|“表格”|“插入列”命令,即可在相應的位置插入一列。
●將光標置于相應的位置,執(zhí)行“修改”|“表格”|“插入行或列”命令,彈出“插入行或列”對話框,在對話框中進行相應的設置,如圖10-12所示。單擊“確定”按鈕,即可在相應的位置插入行或列,如圖10-13所示。

圖10-12 “插入行或列”對話框

圖10-13 插入行
★提示★
在“插入行或列”對話框中可以進行如下設置:
●插入:包含“行”和“列”兩個單選按鈕,一次只能選擇其中一個來插入。該選項組的初始狀態(tài)選擇的是“行”單選按鈕,所以下面的選項就是“行數(shù)”。如果選擇的是“列”單選按鈕,那么下面的選項就變成了“列數(shù)”,在“列數(shù)”文本框內(nèi)可以直接輸入要插入的列數(shù)。
●位置:包含“所選之上”和“所選之下”兩個單選按鈕。如果“插入”選項選擇的是“列”單選按鈕,那么“位置”選項后面的兩個單選按鈕就會變成“在當前列之前”和“在當前列之后”。
10.3.3 刪除行或列
刪除行或列有以下幾種方法:
●將光標置于要刪除行或列的位置,執(zhí)行“修改”|“表格”|“刪除行”命令,或執(zhí)行“修改”|“表格”|“刪除列”命令,即可刪除行或列,如圖10-14所示。

圖10-14 刪除行
●選中要刪除的行或列,執(zhí)行“編輯”|“清除”命令,即可刪除行或列。
●選中要刪除的行或列,按Delete鍵或按BackSpace鍵也可刪除行或列。
10.3.4 合并單元格
合并單元格就是將選中表格單元格中的內(nèi)容合并到一個單元格。合并單元格,首先將準備合并的單元格選中,然后執(zhí)行“修改”|“表格”|“合并單元格”命令,如圖10-15所示,將多個單元格合并成一個單元格。或選中單元格后單擊鼠標右鍵,在彈出的快捷菜單中選擇“表格”|“合并單元格”命令,將多個單元格合并成一個單元格,如圖10-16所示。

圖10-15 執(zhí)行“合并單元格”命令

圖10-16 合并單元格
★提示★
單擊“屬性”面板中的“合并所選單元格,使用跨度”按鈕,也可以合并單元格,它往往是創(chuàng)建復雜表格的重要步驟。
10.3.5 拆分單元格
在使用表格的過程中,有時需要拆分單元格以達到自己所需的效果。拆分單元格就是將選中的表格單元格拆分為多行或多列,具體操作步驟如下:
01 將光標置于要拆分的單元格中,執(zhí)行“修改”|“表格”|“拆分單元格”命令,彈出“拆分單元格”對話框,如圖10-17所示。

圖10-17 “拆分單元格”對話框
02 在對話框的“把單元格拆分”選項組中選擇“列”單選按鈕,將“列數(shù)”設置為4,單擊“確定”按鈕,即可將單元格拆分,如圖10-18所示。

圖10-18 拆分單元格
10.3.6 調(diào)整表格大小
用“屬性”面板中的“寬”和“高”數(shù)值框能精確地調(diào)整表格的大小,而用鼠標拖動調(diào)整則顯得更為方便快捷,利用鼠標調(diào)整表格大小有3種方法。
●調(diào)整表格的寬:選中整個表格,將光標置于表格右邊框控制點上,當光標變成雙箭頭
時,如圖10-19所示,拖動鼠標即可調(diào)整表格整體寬度,調(diào)整后如圖10-20所示。

圖10-19 調(diào)整表格的寬

圖10-20 調(diào)整表格的寬后
●調(diào)整表格的高:選中整個表格,將光標置于表格低邊框控制點上,當光標變成雙箭頭
時,如圖10-21所示,拖動鼠標即可調(diào)整表格整體高度,調(diào)整后如圖10-22所示。

圖10-21 調(diào)整表格的高

圖10-22 調(diào)整表格高后
●同時調(diào)整表寬和高:選中整個表格,將光標置于表格右下角的控制點上,當光標變成雙箭頭
時,如圖10-23所示,拖動鼠標即可調(diào)整表格整體高度和寬度,各列會被均勻調(diào)整,調(diào)整后如圖10-24所示。

圖10-23 調(diào)整表格的寬和高

圖10-24 整體調(diào)整表格后
★指點迷津★
使用布局表格排版時應注意什么?
在Dreamweaver中有一個非常重要的功能,即利用布局模式來給網(wǎng)頁排版。在布局模式下,可以在網(wǎng)頁中直接拖出表格與單元格,還可以自由拖動。利用布局模式對網(wǎng)頁定位非常方便,但生成的表格比較復雜,不適合大型網(wǎng)站使用,一般只應用于中小型網(wǎng)站。
10.3.7 調(diào)整單元格大小
將光標置于要設置大小的單元格中,用“屬性”面板中的“寬”和“高”數(shù)值框能精確地調(diào)整單元格的大小,而用鼠標拖動調(diào)整則顯得更為方便快捷,用鼠標調(diào)整單元格大小有兩種方法。
●調(diào)整列寬:將光標置于表格右邊的邊框上,當鼠標變成為時,拖動鼠標即可調(diào)整最后一列單元格的寬度,如圖10-25所示,調(diào)整后的效果如圖10-26所示。同時也可以調(diào)整某一行表格的寬度,對于其他的行不影響。將光標置于表格中間列邊框上,當鼠標變成
時,拖動鼠標可以調(diào)整中間列邊框兩邊的列單元格的寬度。

圖10-25 調(diào)整列寬

圖10-26 調(diào)整列寬后
●調(diào)整行高:將光標置于表格底部邊框或者中間行線上,當光標變成時,拖動鼠標即可調(diào)整此位置上面一行單元格的高度,如圖10-27所示,對于其他的行不影響,調(diào)整行高后如圖10-28所示。

圖10-27 調(diào)整行高

圖10-28 調(diào)整行高后
- 大型網(wǎng)站架構實戰(zhàn)
- 網(wǎng)頁設計實用教程
- 中文版Dreamweaver CS6/Flash CS6/Photoshop CS6網(wǎng)頁設計基礎培訓
- Vue.js從入門到項目實踐(超值版)
- 眾妙之門:網(wǎng)站UI設計之道2
- jQuery網(wǎng)頁特效設計基礎教程(慕課版·第2版)
- CSS+DIV網(wǎng)頁樣式與布局案例指導
- 動態(tài)網(wǎng)頁設計(第2版)
- HTML5+CSS3網(wǎng)頁設計與制作基礎教程
- 《練就職場功夫熊貓》
- 動態(tài)網(wǎng)頁設計與制作(HTML5+CSS3+JavaScript)(第3版)
- 電子商務網(wǎng)頁設計(第二版)
- Vue.js核心技術解析與uni-app跨平臺實戰(zhàn)開發(fā)
- HTML+CSS+JavaScript網(wǎng)頁制作(第2版)
- JavaScript網(wǎng)頁游戲制作輕松學