《商務(wù)網(wǎng)站規(guī)劃與網(wǎng)頁制作》04-04

1、4.4表格的應(yīng)用 表格是一種常用的組織和處理數(shù)據(jù)的形式。在網(wǎng)頁制作中表格還有更重要的作用，就是用于網(wǎng)頁布局。利用表格可以控制文本和圖像等元素在頁面上的位置。 為了與第六章中的布局表格區(qū)分開來，本節(jié)介紹的表格可稱為“原始表格”。4.4.1創(chuàng)建表格在Dreamweaver中可以使用插入欄或“插入”菜單來創(chuàng)建一個(gè)新表格。 選擇“插入”菜單“表格”；或者在插入欄的“常用”類別中，單擊“表格”按鈕 ，將打開一個(gè)“表格”對(duì)話框“表格”對(duì)話框在“表格大小”一欄中指定以下內(nèi)容：“行數(shù)”：確定表格具有的行的數(shù)目?！傲袛?shù)”：確定表格具有的列的數(shù)目?！氨砀駥挾取保褐付ū砀竦膶挾取＿x定“像素”則以像素為單位指定表格的

2、寬度，這是一個(gè)絕對(duì)值；選定“百分比”則以表格占所在框區(qū)寬度的百分比設(shè)置表格的寬度?！斑吙虼旨?xì)”：指定表格邊框的寬度的像素值?！皢卧襁吘唷保捍_定單元格邊框和單元格內(nèi)容之間的像素值?！皢卧耖g距”：確定相鄰的表格單元格之間的像素值。在“頁眉”一欄中指定表格的標(biāo)題部分?！盁o”：對(duì)表格不啟用列或行標(biāo)題?！白髠?cè)”：可以將表的第一列作為標(biāo)題列，以便為表中的每一行輸入一個(gè)標(biāo)題?！绊敳俊保嚎梢詫⒈淼牡谝恍凶鳛闃?biāo)題行，以便為表中的每一列輸入一個(gè)標(biāo)題?！皟烧摺保嚎梢栽诒碇休斎肓袠?biāo)題和行標(biāo)題。在“頁眉”一欄中指定表格的標(biāo)題部分?！盁o”：對(duì)表格不啟用列或行標(biāo)題?！白髠?cè)”：可以將表的第一列作為標(biāo)題列，以便為表中的每一

3、行輸入一個(gè)標(biāo)題?！绊敳俊保嚎梢詫⒈淼牡谝恍凶鳛闃?biāo)題行，以便為表中的每一列輸入一個(gè)標(biāo)題?！皟烧摺保嚎梢栽诒碇休斎肓袠?biāo)題和行標(biāo)題。4.4.2選取表格、單元格、行與列1選取表格方法一：單擊表格的左上角、表格的頂邊緣或底邊緣的任何位置或者行或列的邊框。 方法二：單擊某個(gè)表格單元格，然后在文檔窗口左下角的標(biāo)簽選擇器中選擇 標(biāo)簽。 方法三：單擊某個(gè)表格單元格，然后選擇“修改”菜單“表格”“選擇表格”。 方法四：單擊表格尺寸線上的向下箭頭，打開表格標(biāo)題菜單，然后選擇“選擇表格”。 方法五：右鍵單擊某個(gè)表格單元格，在打開的快捷菜單中選擇“表格”“選擇表格”。2選取行或列 方法一：定位鼠標(biāo)指針使其指向行的左邊緣

4、或列的上邊緣。當(dāng)鼠標(biāo)指針變?yōu)檫x擇箭頭時(shí)，單擊鼠標(biāo)左鍵以選擇單個(gè)行或列。方法二：拖放鼠標(biāo)指針以選擇多個(gè)行或列。 3選取單元格方法一：單擊單元格，在文檔窗口左下角的標(biāo)簽選擇器中選擇 標(biāo)簽。 方法二：按住 鍵單擊該單元格。方法三：單擊單元格，然后選擇“編輯”菜單“全選”。4.4.3設(shè)置表格和單元格屬性 1了解HTML 中的表格格式設(shè)置的優(yōu)先順序優(yōu)先順序由高到低是：單元格行或列表格2設(shè)置表格屬性表格屬性檢查器“表格ID”：指定表格的ID?！靶泻土小保褐付ū砀裰行泻土械臄?shù)目?！皩捄透摺保菏且韵袼貫閱挝换虬凑伎騾^(qū)寬度的百分比計(jì)算的表格寬度和高度?！皢卧襁吘唷保褐付▎卧駜?nèi)容和單元格邊框之間的像素值?！皢?/p>

5、元格間距”：指定相鄰的表格單元格之間的像素值?！皩?duì)齊”：確定表格相對(duì)于同一段落中其他元素，如文本或圖像，的顯示位置?！斑吙颉保褐付ū砀襁吙虻膶挾鹊南袼刂?。清除列寬按鈕 和清除行高按鈕 ：從表格中刪除所有明確指定的行高或列寬。將表格寬度轉(zhuǎn)換成像素按鈕 和將表格高度轉(zhuǎn)換成像素按鈕 ：將表格中每列的寬度設(shè)置為以像素為單位的當(dāng)前寬度，并且把整個(gè)表格的寬度設(shè)置為以像素為單位的當(dāng)前寬度。表格高度的轉(zhuǎn)換同理。將表格寬度轉(zhuǎn)換成百分比按鈕 和將表格高度轉(zhuǎn)換成百分比按鈕 ：將表格中每列的寬度設(shè)置為按占所在框區(qū)寬度百分比表示的當(dāng)前寬度，并且把整個(gè)表格的寬度設(shè)置為按占所在框區(qū)寬度百分比表示的當(dāng)前寬度。表格高度的轉(zhuǎn)換同

6、理。“背景顏色”：表格的背景顏色?！斑吙蝾伾保罕砀襁吙虻念伾??！氨尘皥D像”：表格的背景圖像。3設(shè)置單元格屬性單元格屬性檢查器“水平”下拉列表：指定單元格內(nèi)容的水平對(duì)齊方式?？梢詫?nèi)容對(duì)齊到單元格的左側(cè)、右側(cè)或使之居中對(duì)齊，也可以指示瀏覽器使用其默認(rèn)的對(duì)齊方式，通常常規(guī)單元格為左對(duì)齊，標(biāo)題單元格為居中對(duì)齊?！按怪薄毕吕斜恚褐付▎卧駜?nèi)容的垂直對(duì)齊方式?？梢詫?nèi)容對(duì)齊到單元格的頂端、中間、底部或基線，或者指示瀏覽器使用其默認(rèn)的對(duì)齊方式，通常是居中對(duì)齊?！皩挕焙汀案摺蔽谋究颍褐付ㄋx單元格的高度和寬度，以像素為單位或以占所在框區(qū)寬度或高度百分比為單位。如果要指定百分比，可在值后面使用百分比符號(hào)“

7、%”。如果要讓瀏覽器根據(jù)單元格的內(nèi)容確定適當(dāng)?shù)膶挾然蚋叨龋蓪⒉惶顚懘隧?xiàng)文本框。不換行：可以防止換行，從而使指定單元格中的所有內(nèi)容提要都在一行上。標(biāo)題：可以將所選的單元格格式設(shè)置為表格標(biāo)題單元格。默認(rèn)情況下，表格標(biāo)題單元格的內(nèi)容為粗體并且居中?！氨尘啊蔽谋究颍褐付▎卧癖尘皥D像的文件名。單擊文件夾圖標(biāo) 可查找并指定背景圖像文件?！氨尘邦伾保菏褂妙伾x擇器選擇的單元格的背景顏色。也可以在緊隨其后的文本框中輸入表示顏色帶“#”號(hào)的十六進(jìn)制數(shù)?！斑吙颉保菏褂妙伾x擇器選擇邊框的顏色。也可以在緊隨其后的文本框中輸入表示顏色帶“#”號(hào)的十六進(jìn)制數(shù)。合并單元格按鈕 ：可以將所選的單元格、行或列合并為一個(gè)

8、單元格。拆分單元格按鈕 ：以將一個(gè)單元格分成兩個(gè)或更多單元格。4.4.4調(diào)整表格、列和行的大小 1清除設(shè)置的寬度和高度 方法一：選擇“修改”菜單“表格”“清除單元格寬度”或“清除單元格高度”。方法二：在表格屬性檢查器中單擊清除列寬按鈕 或清除行高按鈕 。方法三：使用表格標(biāo)題菜單中“清除所有寬度”或“清除所有高度”命令。方法四：使用列標(biāo)題菜單中“清除列寬度”命令。2調(diào)整表格大小方法一：在表格屬性檢查器中，調(diào)整表格的寬度和高度值。 方法二：使用鼠標(biāo)拖放的方法調(diào)整表格大小。3調(diào)整行或列的大小方法一：在表格屬性檢查器中，調(diào)整行寬和列高值。方法二：使用鼠標(biāo)拖動(dòng)行列邊框調(diào)整行或列的大小。4.4.5表格嵌套 所謂表格嵌套，就是在一個(gè)表格的單元格中插入另一個(gè)表格?？梢韵駥?duì)任何其他表格一樣對(duì)嵌套表格進(jìn)行格式設(shè)置；但是，其寬度受它所在單元格的寬度的限制。 4.4.6增加與刪除表格的行、列方法一：選擇“修改”菜單“表格”。 方法二：選擇“插入”菜單“表格對(duì)象”。 方法三：使用列標(biāo)題菜單。 4.4.7拆分與合并單元格 單元格的拆分與合并是表格的常用操作，只要選中的單元格形成一行或一個(gè)矩形，就可以合并任意