第4章　表格的應用

4.1　創建表格

表格是網頁布局設計的常用工具，其在網頁中的應用已經突破了傳統的用來記載大量數據的功能，它可以使插入頁面中的圖像和文本等對象被限定在某一固定位置。相對于沒有使用表格的頁面，使用表格的頁面顯得更加整齊有序。合理使用布局表格，會使網頁對象被組織得更加緊密，使整個頁面看起來更加緊湊，如圖4-1所示的頁面就是使用表格將大量的網頁元素對象定位在網頁特定的位置上。

在設計網頁時，可以直接繪制表格，也可以導入表格數據，并將其轉化為表格。

表格是網頁中對文本和圖像布局的強有力的工具。一個表格通常由行、列和單元格組成，每行由一個或多個單元格組成。表格中的橫向稱為行，縱向稱為列，一行與一列相交所產生的區域則稱為單元格。要將相關數據有序地組織在一起，必須先插入表格，然后才能有效組織數據。

4.1.1　設置頁面屬性

繪制表格的具體操作步驟如下。

（1）啟動Adobe Dreamweaver CS6，新建一個空白文檔。選擇“修改/頁面屬性”菜單命令，彈出“頁面屬性”面板，在左側“分類”選項列表框中選擇“外觀”選項，將“大小”選項設為13，“左邊距”“右邊距”“上邊距”“下邊距”選項均設為0，如圖4-2所示。

（2）在左側“分類”選項列表框中，選擇“跟蹤圖像”選項，單擊“跟蹤圖像”選項文本框右側的“瀏覽”按鈕，彈出“選擇圖像源文件”對話框，選擇DW04/images/index.jpg，如圖4-3所示，單擊“確定”按鈕，將“透明度”選項設為70%，如圖4-4所示，單擊“確定”按鈕，效果如圖4-5所示。

（3）在“插入/常用”面板中單擊“表格”按鈕，在彈出的“表格”對話框中進行設置，如圖4-6所示，單擊“確定”按鈕，效果如圖4-7所示。

“表格”對話框中各選項的含義如下。

行數：確定表格行的數目。

列數：確定表格列的數目。

表格寬度：以像素為單位或按瀏覽器窗口寬度的百分比指定表格的寬度。

邊框粗細：指定表格邊框的寬度（以像素為單位）。

單元格邊距：確定單元格框與單元格內容之間的像素值。

單元格間距：確定相鄰的表格單元格之間的像素。

如果沒有明確指定邊框粗細、單元格間距和單元格邊距的值，則大多數瀏覽器將默認邊框粗細和單元格邊距的值為1，若要確保瀏覽器顯示的表格沒有邊距或間距，則將“單元格間距”和“單元格邊距”都設置為0。

無：對表格不啟用列或行標題。

左：將表格的第一列作為標題列，以便在表格中的每一行輸入一個標題。

頂部：將表格的第一行作為標題行，以便在表格中的每一列輸入一個標題。

兩者：在表格中輸入列標題和行標題。

標題：顯示在表格外的表格標題，它可以方便使用屏幕閱讀器的Web站點訪問者，屏幕閱讀器讀取表格標題，并且幫助Web站點訪問者跟蹤表格信息。

摘要：表格的說明。屏幕閱讀器可以讀取摘要文本，但是該文本不會顯示在用戶的瀏覽器中。

4.1.2　設置表格屬性

在繪制表格或者導入表格數據后，根據需要可能要對表格屬性項進行修改設置，才能達到設計的要求。下面介紹表格屬性的設置方法。

1．選擇整個表格

（1）將鼠標指針移動到表格的上方，當鼠標指針的形狀變為表格形狀時，單擊鼠標左鍵即可選中整個表格，如圖4-8所示。

（2）將鼠標指針移動到表格的格線處，當鼠標指針的形狀變為上下方向的箭頭時，單擊鼠標左鍵即可選中整個表格，如圖4-9所示。

（3）將光標置于表格中，單擊窗口左下角的table標記即可選中整個表格。

（4）將光標置于表格中，在菜單欄中選擇“修改”→“表格”→“選擇表格”菜單命令，即可選中整個表格。

（5）將光標置于表格之外，按住“Shift”鍵，然后在表格中的任意處單擊鼠標左鍵即可選擇整個表格。

選中表格后，表格的外框變成粗黑色，并在右方、下方和右下方各會顯示一個黑色控制點，“屬性”面板也會變為表格“屬性”面板，在其中可以設置表格的屬性。

2．選擇單元格

選擇單元格既可以選擇單個單元格，也可以選擇一整行或者一整列，還可以選擇不連續的多個單元格。

選擇單個單元格，直接單擊要選擇的單元格即可。選擇行（或列），可按如下幾種操作方法進行。

（1）將鼠標指針置于所要選擇的行的左方（或列的上方），待鼠標指針形狀變為向右（或向下）的箭頭時，單擊鼠標左鍵，則可以選中該行（或該列）；將鼠標指針置于所要選擇的行的左方（或列的上方），待鼠標指針形狀變為向右（或向下）的箭頭時，拖拽鼠標可以選中連續的多行（或多列）。

（2）將鼠標置于待選擇的單元格中，然后按住鼠標左鍵不放并拖動鼠標，橫向拖動可以選擇一行，縱向拖動可以選擇一列，如果向對角線方向拖動，行和列可以同時選擇。

（3）通過與“Ctrl”鍵的結合使用，可以選擇多個不連續單元格。按住“Ctrl”鍵，然后單擊需要選擇的單元格，即可選中該單元格。如果想取消選擇某單元格，只需在按住“Ctrl”鍵的同時，再次單擊該單元格即可。

3．調整表格大小

插入表格以后，有時還需要對表格的大小進行調整，下面介紹設置表格大小的方法。

（1）相對大小和絕對大小。在設置表格大小時，有兩種方式可以選擇：一種是通過占版面的百分比來控制表格的大小；另一種是通過實際像素值來控制表格的大小。表格大小有相對和絕對之分，通過百分比方式表示的表格大小是相對大小，通過像素方式表示的表格大小是絕對大小。

如果通過百分比方式設置表格的大小，則在改變版面大小后，表格大小也跟著調整。若將表格的寬和高設置為100%，則無論版面窗口多大，表格都將充滿整個窗口。

如果通過像素設置表格大小，則在改變版面尺寸后，表格大小不會跟著調整。當版面變大時，表格相對于版面來說似乎變小了，但表格的實際大小不變。

（2）改變表格大小。改變表格大小，可以通過拖拽鼠標的方式實現，也可以通過屬性面板實現。

選中表格后，其右方、下方和右下方各會顯示一個黑色控制點，按住鼠標左鍵不放，拖動右方和下方的黑色控制點，可以改變表格的寬和高；拖動右下方的控制點，可以同時改變表格的寬和高。如圖4-10所示是通過拖動右下方的控制點，同時改變表格的寬和高。

在表格屬性面板上的寬和高文本框中直接輸入相關數值，即可重新設置表格大小。

（3）相對大小、絕對大小之間的轉換。對于設置好的表格，在不改變大小的前提下，在百分比和像素兩種方式之間可以互相轉換。其方法如下。

選中要轉換表示方式的表格。在屬性面板上有四個方式轉換按鈕，可以將表格寬度或高度的表示方式由百分比方式轉換為像素方式，或者由像素方式轉換為百分比方式。

將表格寬度表示方式轉化為像素表示方式；將表格寬度表示方式轉換為百分比表示方式。

（4）清除行高和列寬。表格屬性面板上的“清除行高”和“清除列寬”兩項用于清除行高和列寬。單擊或按鈕，也可以將表格中行或列多余的部分刪除，清除行高和列寬前后的效果如圖4-11和圖4-12所示。

（5）設置填充和間距。選中表格后，表格“屬性”面板上的“填充”用于設置插入單元格中的對象到單元格邊框之間的距離（即單元格邊距）；“間距”用于設置單元格邊框之間的距離（即單元格間距），如圖4-13所示是“填充”值設置為“15”，“間距”設置為“10”后的效果。

4．設置表格對齊方式

與單元格對齊不同，表格對齊是將表格作為一個對象在網頁中控制其位置，而單元格對齊是單元格內的元素對象相對于單元格的對齊方式。

表格有三種對齊方式，即左對齊、右對齊、居中對齊，默認情況下是左對齊。表格對齊的方法是：選中表格后，在表格屬性面板的“對齊”下拉框中，選擇其中一種對齊方式。

提示

一般情況下建議選擇居中對齊，這是因為在不同的顯示器分辨率下，看到左對齊和右對齊的效果是不同的。

在“屬性”面板“對齊”選項下拉列表中選擇“居中對齊”。將光標放到表格的邊線上，出現雙向箭頭圖標，按住鼠標左鍵不放將其向左拖拽，松開鼠標左鍵，效果如圖4-14所示。

將光標置入到第1列單元格中，在“插入/常用”面板中單擊“表格”按鈕，在彈出的“表格”對話框中進行設置，如圖4-15所示，單擊“確定”按鈕，效果如圖4-16所示。

5．設置表格邊框

表格中的一些效果是通過設置表格邊框的屬性來實現的，我們可以設置表格邊框的粗細和顏色。

（1）邊框的粗細。如果沒有明確指定邊框的值，則大多數瀏覽器默認邊框值為1。通過改變“屬性”面板上該文本框中的數值，可以調整表格邊框的粗細。如圖4-17所示是表格的邊框設置為“0”“1”和“10”的效果。

在很多情況下，表格的邊框值設置為“0”，相當于布局網頁的輔助工具只有在編輯時可以看到，在編輯區查看單元格和表格邊框，在菜單欄中依次單擊“查看”“可視化助理”“表格邊框”選項即可。

提示

在文檔工具欄中依次單擊（可視化助理按鈕）和“表格邊框”也可以查看單元格和表格邊框的虛線框。

（2）邊框的顏色。表格的邊框顏色默認情況下是灰色的，通過“CSS樣式”面板或HTML代碼，可以為表格的邊框選擇其他的顏色。為表格邊框設置顏色的操作方法如下。

① 選中要改變邊框顏色的表格。

② 切換到“代碼”視圖或“拆分”視圖，在對應的表格代碼的“<table”后按空格鍵，然后輸入“bordercolor=”，將彈出一個顏色選擇面板，如圖4-18和圖4-19所示。

（3）在彈出的調色板中選擇一種顏色。

4.1.3　插入圖像

（1）將光標置入到第1行單元格中，在“插入/常用”面板中單擊“圖像”按鈕，在彈出的“圖像”對話框中，選擇Dw04/4.1.3 images/ing_01.jpg，如圖4-20所示，單擊“確定”按鈕，效果如圖4-21所示。

（2）將光標置入到第2行單元格中，在“插入/常用”面板中單擊“表格”按鈕，在彈出的“表格”對話框中進行設置，如圖4-22所示，單擊“確定”按鈕，效果如圖4-23所示。

（3）將光標置入到第1列單元格中，在“屬性”面板“寬”選項文本框中輸入“87”，如圖4-24所示。

（4）在“插入/常用”面板中單擊“圖像”按鈕，在彈出的“表格”對話框中進行設置，單擊“確定”按鈕，效果如圖4-25所示。

（5）用相同的方法分別將圖片“ing_07.jpg”“ing_08.jpg”“ing_09.jpg”插入到其他單元格中，效果如圖4-26所示。

4.1.4　插入表格并設置背景圖像

（1）將光標置入到右側單元格中，在“插入/常用”面板中單擊“表格”按鈕，在彈出的“表格”對話框中進行設置，如圖4-27所示，單擊“確定”按鈕，效果如圖4-28所示。

（2）將光標置入到第1行第1列單元格中，在“屬性”面板中單擊“背景”選項右側的“瀏覽文件”按鈕，彈出“選擇圖像源文件”對話框，在目錄中選擇Dw/4.1.3 images/ing_02.jpg，單擊“確定”按鈕，為單元格添加背景圖像，效果如圖4-29所示。

（3）在“屬性”面板“寬”選項和“高”選項文本框中，分別輸入“473”“61”，如圖4-30所示。

（4）將光標置入到第2行第1列單元格中，在“插入/常用”面板中單擊“圖像”按鈕，在彈出的“選擇圖像源文件”對話框中，選擇Dw04/4.1.3 images/ing_04.jpg，單擊“確定”按鈕，效果如圖4-31所示。

（5）將光標置入到第3行第1列單元格中，將“屬性”面板中的“高”選項設置為312，“背景顏色”選項設為白色，如圖4-32所示。

（6）將光標置入到第4行第1列單元格中，在“屬性”面板的“高”選項文本框中輸入“41”，“背景顏色”選項設為灰色（#cccccc）。

（7）將表格的第2列單元格全部選中，在“屬性”面板中單擊“合并單元格”按鈕，將光標置入到單元格中，在“屬性”面板“寬”選項文本框中輸入“19”。

（8）在“插入/常用”面板中單擊“圖像”按鈕，在“選擇圖像源文件”對話框中選擇Dw/4.1.3 images/ing_03.jpg，單擊“確定”按鈕。　

（9）將光標置入到第1行第1列單元格中，在“插入/常用”面板中單擊“表格”按鈕，在彈出的“表格”對話框中進行設置，單擊“確定”按鈕，效果如圖4-33所示。

（10）選中單元格，在“屬性”面板中選擇“水平”選項下拉列表中的“居中對齊”，再選擇“垂直”選項下拉列表中的“居中”，分別在單元格中輸入白色文字，效果如圖4-34所示。

4.1.5　網頁中的數據表格

有時需要將Word文檔中的內容或Excel文檔中的表格數據導入到網頁中進行發布，或將網頁中的表格數據導出到Word文檔或Excel文檔中進行編輯，Dreamweaver CS6提供了實現這種操作的功能。

1．導入表格數據

（1）選擇“文件/打開”菜單命令，在彈出的菜單中選擇“Dw04/4.1.5images/index.html”文件，如圖4-35所示。

（2）將光標放置在要導入表格數據的位置，如圖4-36所示，選擇“插入記錄/表格對象/導入表格式數據”菜單命令，彈出對話框，在對話框中單擊“數據文件”選項右側的“瀏覽”按鈕，彈出“打開”對話框，選擇Dw04/4.1.5 images/jianjie.txt，如圖4-37所示。

（3）單擊“打開”按鈕，返回到對話框中，在“定界符”選項的下拉列表中選擇“逗點”，如圖4-38所示，單擊“確定”按鈕，導入表格式數據，如圖4-39所示。

（4）保持表格的選取狀態，在“屬性”面板中，將“寬”選項設為“460”，“背景顏色”選項設為淺粉色（#F3F3F3），“填充”“間距”和“邊框”選項均設為“0”，效果如圖4-40所示。

（5）將光標置入到第1行第1列中，按住“SHIFT”鍵的同時，單擊表格的第6行第4列，將表格的單元格全部選中，在“屬性”面板中將“水平”選項設為“居中對齊”，“垂直”選項設為“居中”，“高”選項設為“25”，如圖4-41所示，表格效果如圖4-42所示。

（6）將導入表格的第2行單元格全部選中，在“屬性”面板中，將“背景顏色”選項設為淺黃色（#F4DAAAA），用相同的方法，將其他單元格設置相同的背景顏色，效果如圖4-43所示。

（7）保存文檔，按“F12”鍵預覽效果，如圖4-44所示。

2．排序表格

（1）返回圖4-44，選中表格，選擇“命令/排序表格”菜單命令，彈出“排序表格”對話框，在“排序表格”選項的下拉列表中，選擇“列2”，“順序”下拉列表中選擇“按字母順序”，在后面的下拉列表中選擇“降序”，如圖4-45所示，單擊“確定”按鈕，表格進行排序，效果如圖4-46所示。

（2）保存文檔，按“F12”鍵預覽效果，如圖4-47所示。