第五章網(wǎng)頁中表格的處理

主要內(nèi)容：第5章網(wǎng)頁表格的處理創(chuàng)建表格編輯表格的方法設(shè)置表格屬性用表格布局頁面表格的格式化方法表格的排序方法4.1利用Dreamweaver8處理網(wǎng)頁表格

4.1.1創(chuàng)建表格1．新建表格（1）在插入“常用”面板上，單擊插入表格按鈕。（2）在插入“常用”面板上，拖動表格按鈕到主窗口的工作區(qū)中。（3）通過主窗口的菜單“插入”|“表格”命令。（4）使用快捷組合鍵“Ctrl+Alt+T”。執(zhí)行完上述任何一種操作，都可以看到的“插入表格”對話框。

行數(shù)：初次指定表格的總行數(shù)。列數(shù)：初次指定表格的總列數(shù)。單元格填充：指定單元格的大小，以像素為單位。單元格間距：指定單元格之間的距離，以像素為單位。寬度：指定表格的寬度，以百分比或像素為單位（百分比用于根據(jù)瀏覽器窗口的大小來自動調(diào)整表格的寬度）。邊框：指定表格邊界的寬度，以像素為單位（如果在瀏覽器窗口中不顯示表格的邊框，則定義為0）。4.1.2編輯表格（1）選擇整個表格：將光標(biāo)置于某個單元格中，選擇“修改”|“表格”|“選擇表格”命令。將光標(biāo)置于某個單元格中，按兩次組合鍵“Ctrl+A”。將光標(biāo)置于某個單元格中，單擊鼠標(biāo)右鍵，選擇“表格”|“選擇表格”命令。單擊表格的邊線。1．選擇表格（2）選擇單個單元格：將光標(biāo)置于所要選擇的單元格中，按一次組合鍵“Ctrl+A”。將光標(biāo)置于所要選擇的單元格中，選擇“編輯”|“全選”命令。按住Ctrl鍵，單擊所要選擇的單元格，再單擊一次則取消對單元格的選擇。（3）選擇多個單元格：按住Ctrl鍵，單擊所要選擇的所有單元格。將光標(biāo)置于單元格中，拖動鼠標(biāo)，選擇多個單元格。如果要選擇整行，將光標(biāo)置于該行的左邊緣，當(dāng)光標(biāo)變成圖標(biāo)時單擊鼠標(biāo)左鍵。如果要選擇整列，將光標(biāo)置于該列的上邊緣，當(dāng)光標(biāo)變成圖標(biāo)時單擊鼠標(biāo)左鍵。（4）選擇的全部單元格：將光標(biāo)置于第1個單元格中，拖動鼠標(biāo)至最后一個單元格。將光標(biāo)置于第1行的左邊緣，當(dāng)光標(biāo)變成圖標(biāo)時，向下拖動鼠標(biāo)至最后一行。將光標(biāo)置于第1列的上邊緣，當(dāng)光標(biāo)變成圖標(biāo)時，向右拖動鼠標(biāo)至最后一列。

（1）表格中插入單元行：選擇“修改”|“表格”|“插入行”命令。按組合鍵“Ctrl+M”。單擊鼠標(biāo)右鍵，選擇“表格”|“插入行”命令。

2．添加/刪除行列（2）在表格中插入單元列：選擇“修改”|“表格”|“插入列”命令。按組合鍵“Ctrl+Shift+A”。單擊鼠標(biāo)右鍵，選擇“表格”|“插入列”命令。（3）在表格中添加多行或多列：將光標(biāo)移到要插入行或列附近的單元格中，單擊鼠標(biāo)右鍵，選擇“表格”|“插入行或列”命令，或是選擇“修改”|“表格”|“插入行或列”命令，在彈出的“插入行或列”對話框中進(jìn)行相關(guān)的設(shè)置，然后單擊“確定”按鈕。

（4）刪除整行/整列：先選擇欲刪除的整行或整列，直接按Del鍵。先將光標(biāo)移到要刪除的行或列中，選擇“修改”|“表格”|“刪除行”或“刪除列”命令。將光標(biāo)移到要刪除的行或列中，單擊鼠標(biāo)右鍵，選擇“表格”|“刪除行”或“刪除列”命令。

（1）設(shè)置表格的寬度及高度①通過鼠標(biāo)拖曳法可以粗略地調(diào)整表格的大小。②通過“表格屬性”面板可以精確地調(diào)整表格的大小。

3．修改表格大?。?）設(shè)置單元格的寬度及高度將光標(biāo)置于需要設(shè)置寬度或高度的單元格中，此時屬性面板顯示單元格屬性。在屬性面板上的“寬”或“高”文本框中輸入適當(dāng)?shù)臄?shù)值即可。

4．合并/拆分單元格

（1）合并單元格選擇“修改”|“表格”|“合并單元格”命令。單擊鼠標(biāo)右鍵，選擇“表格”|“合并單元格”命令。按組合鍵“Ctrl+Alt+M”。（2）拆分單元格選擇“修改”|“表格”|“拆分單元格”命令。單擊鼠標(biāo)右鍵，選擇“表格”|“拆分單元格”命令。按組合鍵“Ctrl+Alt+S”。5．在表格中添加文字和圖片

（1）在表格中添加文字在表格內(nèi)按要求輸入文字，調(diào)整文字的字號、字體、對齊方式等。

（2）在表格中插入圖片選中要插入圖片的單元格，選擇“插入”|“圖像”菜單命令，打開“選擇圖像源”對話框，在對話框中選擇圖像，選中圖像文件之后，單擊“確定”按鈕。4.1.3表格屬性的設(shè)置設(shè)置顏色背景通過屬性面板上“背景顏色”后面的顏色框，在彈出的調(diào)色板中選擇顏色，或者是在后面的文本框中直接輸入顏色色碼。設(shè)置圖像背景在屬性面板上的“背景圖像”文本框中輸入圖像所在的路徑，或是單擊其后的文件夾圖標(biāo)，在彈出的對話框中選擇圖像文件。1．設(shè)置表格的背景2．設(shè)置表格的邊框顏色和寬度

選擇表格，單擊其屬性面板上“邊框顏色”的顏色框，在彈出的調(diào)色板中選擇顏色，或者是在后面的文本框中直接輸入顏色色碼。在表格屬性面板上的“邊框”文本框中輸入邊框的寬度數(shù)值。單擊表格中的任一單元格，執(zhí)行主菜單中的“命令”|“排序表格”命令，打開“排序表格”對話框；在“排序按”下拉列表框中選擇要排序的列（第一關(guān)鍵字），在“順序”下拉列表框中選擇所需順序；在“再按”下拉列表框中選擇要進(jìn)行次級排序的順序；單擊“確定”按鈕完成設(shè)置。4.1.4表格的排序選擇一個表格，然后執(zhí)行主菜單中的“命令”|“格式化表格”命令，打開“格式化表格”對話框，從中選擇一種模板方案，再對各選項進(jìn)一步自定義設(shè)置，最后應(yīng)用于自己所設(shè)計的表格中。4.1.5表格的格式化

4.1.6導(dǎo)入表格數(shù)據(jù)文件

選擇“文件”|“導(dǎo)入”|“表格式數(shù)據(jù)”命令。選擇“插入”|“表格對象”|“導(dǎo)入表格式數(shù)據(jù)”命令。Dreamweaver8提供了一種新的網(wǎng)頁排版視圖——布局視圖（LayoutView）。打開“布局”面板繪制布局表格或布局單元格。4.1.7用表格進(jìn)行頁面布局

1．TABLE用于定義整個表格，表格內(nèi)的所有內(nèi)容都應(yīng)該位于<TABLE>和</TABLE>之間。2．CAPTION表格標(biāo)題應(yīng)包括在<CAPTION>和</CAPTION>之間。CAPTION標(biāo)記符的格式為：<CAPTIONalign="">標(biāo)題</CAPTION>

4.2利用HTML處理網(wǎng)頁表格4.2.1表格的基本構(gòu)成

3．TR用于定義表格的行，對于每一個表格行，都對應(yīng)一個TR標(biāo)記符，它的結(jié)束標(biāo)記符可以省略。4．TD和TH在表格行中的每個單元格，都對應(yīng)于一個TD標(biāo)記符或者TH標(biāo)記符，用于標(biāo)記表格的內(nèi)容，其中可以包括文字、圖像或其他對象。

1．合并單元格

4.2.2表格的編輯及屬性設(shè)置

行合并：在<TD>和<TH>標(biāo)記內(nèi)使用rowspan屬性，rowspan的取值表示垂直方向上合并的行數(shù)。列合并：在<TD>和<TH>標(biāo)記內(nèi)使用colspan屬性，colspan的取值表示水平方向上的合并的列數(shù)。frame屬性用于控制表格最外層的四條框線。rules屬性用于控制是否顯示單元格之間的分隔。border屬性用于設(shè)置邊框的寬度，其值為像素數(shù)。

2．邊框與分隔線在TABLE標(biāo)記符中使用cellspacing屬性可以控制單元格之間的空白，使用cellpadding屬性可以控制表格分隔線和數(shù)據(jù)之間的距離，這兩個屬性之間的取值通常采用像素數(shù)。3．控制單元格空白

表格的頁面對齊在TABLE標(biāo)記符中使用align屬性。用DIV標(biāo)記符的align屬性：將TABLE標(biāo)記符包含在<DIValign=“”>和</DIV>之間。表格的內(nèi)容對齊在標(biāo)記符ＴＲ、ＴＨ、ＴＤ中使用align屬性；4．表格的對齊

5．控制表格和單元格的大小

表格在網(wǎng)頁中更多地是用作排版工具，要分割頁面區(qū)域，就是設(shè)置表格和單元格大小。可以使用標(biāo)記符的width和he