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

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

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實戰(zhàn)7.6

課后練習7.1.1

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

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實戰(zhàn)7.6

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

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

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實戰(zhàn)7.6

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

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實戰(zhàn)7.6

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

插入表格7.2

表格屬性7.3

選擇表格元素7.4

編輯表格7.5

課堂實戰(zhàn)7.6

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

插