網(wǎng)頁(yè)設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程課件 第7章 使用表格布局網(wǎng)頁(yè)

第7章使用表格布局網(wǎng)頁(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作案例實(shí)戰(zhàn)教程目錄Contents7.1

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實(shí)戰(zhàn)7.6

課后練習(xí)7.1.1

表格的組成表格由行、列和單元格組成。在一個(gè)表格中，橫向的稱(chēng)為行，縱向的稱(chēng)為列；行與列交叉的部分叫做單元格；單元格中的內(nèi)容和單元格邊框之間的距離叫做邊距；單元格和單元格之間的距離叫做間距；整個(gè)表格的邊緣叫做邊框。7.1.2插入表格在網(wǎng)頁(yè)文檔中將鼠標(biāo)移動(dòng)至要插入表格的位置，執(zhí)行“插入丨Table”命令，或按Ctrl+Alt+T組合鍵打開(kāi)“Table”對(duì)話框。在該對(duì)話框中設(shè)置參數(shù)后，單擊“確定”按鈕即可根據(jù)設(shè)置插入表格。目錄Contents7.1

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實(shí)戰(zhàn)7.6

課后練習(xí)7.2.1設(shè)置表格屬性選中整個(gè)表格后可以在“屬性”面板中設(shè)置表格屬性參數(shù)，如圖為選中表格的“屬性”面板。7.2.2設(shè)置單元格屬性選中表格中的某一單元格，在“屬性”面板中顆設(shè)置該單元格的屬性。7.2.3鼠標(biāo)經(jīng)過(guò)顏色onMouseOut、onMouseOver屬性可以創(chuàng)建鼠標(biāo)經(jīng)過(guò)時(shí)單元格顏色改變的效果。7.2.4表格的屬性代碼通過(guò)在“代碼”視圖中添加width、border等屬性代碼，同樣可以設(shè)置表格參數(shù)。1.width屬性用于指定表格或某一個(gè)表格單元格的寬度，單位可以是像素或百分比。

2.height屬性用于指定表格或某一個(gè)表格單元格的高度，單位可以是像素或百分比。3.border屬性用于設(shè)置表格的邊框及邊框的粗細(xì)。值為0時(shí)不顯示邊框；值為1或以上時(shí)顯示邊框，值越大，邊框越粗。4.Bordercolor用于指定表格或某一個(gè)表格單元格邊框的顏色。7.2.4表格的屬性代碼5.bordercolorlight屬性用于指定表格亮邊邊框的顏色。6.bordercolordark屬性用于指定表格暗邊邊框的顏色。7.bgcolor屬性用于指定表格或某一個(gè)表格單元格的背景顏色。8.background屬性用于指定表格或某一個(gè)表格單元格的背景圖像。9.cellspacing屬性用于指定單元格間距，即單元格和單元格之間的距離。7.2.4表格的屬性代碼10.cellpadding屬性用于指定單元格邊距（或填充），即單元格邊框和單元格中內(nèi)容之間的距離。11.align屬性用于指定表格或某一表格單元格中內(nèi)容的垂直水平對(duì)齊方式。屬性值有l(wèi)eft（左對(duì)齊）、center（居中對(duì)齊）和right（右對(duì)齊）。12.valign屬性用于指定單元格中內(nèi)容的垂直對(duì)齊方式。屬性值有top（頂端對(duì)齊）、middle（居中對(duì)齊）、bottom（底部對(duì)齊）和baseline（基線對(duì)齊）。7.2.5實(shí)操案例：陶瓷展覽館以陶瓷展覽館網(wǎng)頁(yè)制作為例，對(duì)表格的添加與設(shè)置進(jìn)行介紹。目錄Contents7.1

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實(shí)戰(zhàn)7.6

課后練習(xí)7.3.1選擇整個(gè)表格選中表格后才可以對(duì)其進(jìn)行編輯，常用地選擇整個(gè)表格的方式有以下4種：插入表格，單擊表格上下邊框即可選擇整個(gè)表格。在“代碼”視圖或“拆分”視圖下，選中表格代碼，即<table>和</table>標(biāo)簽之間所有部分，即可選中表格。單擊某個(gè)單元格，右擊鼠標(biāo)，在彈出的快捷菜單中選擇“表格>選擇表格”命令即可選中表格。單擊某個(gè)單元格，執(zhí)行“編輯>表格>選擇表格”命令即可選中表格。7.3.2選擇單個(gè)單元格選中表格中的單元格時(shí)，該單元格四周將出現(xiàn)深色實(shí)線邊框，如圖7-19所示。用戶(hù)可以通過(guò)以下2種方式選擇單個(gè)單元格：按住鼠標(biāo)左鍵不放，從單元格的左上角拖至右下角，即可選擇該單元格。按住Ctrl鍵，單擊單元格即可選中該單元格。目錄Contents7.1

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實(shí)戰(zhàn)7.6

課后練習(xí)7.4.1拷貝和粘貼表格制、粘貼單個(gè)單元格或多個(gè)單元格可以節(jié)省表格制作的時(shí)間，提高效率，在復(fù)制時(shí)用戶(hù)可以選擇保留單元格的格式設(shè)置。若要粘貼多個(gè)表格單元格，剪貼板的內(nèi)容必須和表格的結(jié)構(gòu)或表格中將粘貼這些單元格的部分兼容。7.4.2增減表格的行和列打開(kāi)網(wǎng)頁(yè)文檔，單擊某個(gè)單元格，執(zhí)行“編輯>表格>插入行”命令或按Ctrl+M組合鍵，即可在插入點(diǎn)上方插入1行表格。7.4.3刪除表格和清除表格內(nèi)容刪除表格會(huì)一同刪除表格中的內(nèi)容，而清除表格內(nèi)容只會(huì)清除表格中的內(nèi)容而不影響表格。下面將對(duì)此進(jìn)行介紹。1.刪除表格選中整個(gè)表格按Delete鍵即可刪除表格及表格內(nèi)的內(nèi)容。若只是想刪除某行或某列單元格，可以選中整行或整列后按Delete鍵刪除。2.清除表格內(nèi)容當(dāng)單個(gè)單元格或多個(gè)單元格不能構(gòu)成整行或整列時(shí)，只能清除單元格中的內(nèi)容而不刪除表格。用戶(hù)可以選擇要清除的單元格后按Delete鍵刪除其中的內(nèi)容。7.4.4合并或拆分單元格合并或拆分單元格可以豐富表格效果，使其呈現(xiàn)出不規(guī)則的質(zhì)感。1.合并單元格選中網(wǎng)頁(yè)文檔中表格中連續(xù)的單元格，執(zhí)行“編輯>表格>合并單元格”命令，即可合并單元格。2.拆分單元格選中表格中要拆分的單元格，執(zhí)行“編輯>表格>拆分單元格”命令，打開(kāi)“拆分單元格”對(duì)話框。7.4.5實(shí)操案例：爾肆手表以爾肆手表網(wǎng)頁(yè)制作為例，對(duì)表格的設(shè)置與編輯進(jìn)行介紹。目錄Contents7.1

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實(shí)戰(zhàn)7.6

課后練習(xí)7.5課堂實(shí)戰(zhàn)春林建筑本案例將以春林建筑網(wǎng)頁(yè)制作為例，對(duì)表格的應(yīng)用與編輯進(jìn)行介紹。目錄Contents7.1

插