第4章　表格的應(yīng)用

4.1　創(chuàng)建表格

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

圖　4-1

在設(shè)計網(wǎng)頁時，可以直接繪制表格，也可以導(dǎo)入表格數(shù)據(jù)，并將其轉(zhuǎn)化為表格。

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

4.1.1　設(shè)置頁面屬性

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

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

圖　4-2

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

圖　4-3　

圖　4-4

圖　4-5

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

圖　4-6

圖　4-7

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

行數(shù)：確定表格行的數(shù)目。

列數(shù)：確定表格列的數(shù)目。

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

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

單元格邊距：確定單元格框與單元格內(nèi)容之間的像素值。

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

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

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

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

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

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

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

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

4.1.2　設(shè)置表格屬性

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

1．選擇整個表格

（1）將鼠標指針移動到表格的上方，當鼠標指針的形狀變?yōu)楸砀裥螤顣r，單擊鼠標左鍵即可選中整個表格，如圖4-8所示。

圖　4-8

（2）將鼠標指針移動到表格的格線處，當鼠標指針的形狀變?yōu)樯舷路较虻募^時，單擊鼠標左鍵即可選中整個表格，如圖4-9所示。

圖　4-9

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

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

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

選中表格后，表格的外框變成粗黑色，并在右方、下方和右下方各會顯示一個黑色控制點，“屬性”面板也會變?yōu)楸砀瘛皩傩浴泵姘?，在其中可以設(shè)置表格的屬性。

2．選擇單元格

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

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

（1）將鼠標指針置于所要選擇的行的左方（或列的上方），待鼠標指針形狀變?yōu)橄蛴遥ɑ蛳蛳拢┑募^時，單擊鼠標左鍵，則可以選中該行（或該列）；將鼠標指針置于所要選擇的行的左方（或列的上方），待鼠標指針形狀變?yōu)橄蛴遥ɑ蛳蛳拢┑募^時，拖拽鼠標可以選中連續(xù)的多行（或多列）。

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

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

3．調(diào)整表格大小

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

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

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

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

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

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

圖　4-10

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

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

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

將表格寬度表示方式轉(zhuǎn)化為像素表示方式；將表格寬度表示方式轉(zhuǎn)換為百分比表示方式。

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

圖　4-11

圖　4-12

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

圖　4-13

4．設(shè)置表格對齊方式

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

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

提示

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

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

圖　4-14

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

圖　4-15

圖　4-16

5．設(shè)置表格邊框

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

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

圖　4-17

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

提示

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

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

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

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

圖　4-18　

圖　4-19

（3）在彈出的調(diào)色板中選擇一種顏色。

4.1.3　插入圖像

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

圖　4-20

圖　4-21

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

圖　4-22

圖　4-23

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

圖　4-24

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

圖　4-25

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

圖　4-26

4.1.4　插入表格并設(shè)置背景圖像

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

圖　4-27

圖　4-28

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

圖　4-29

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

圖　4-30

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

圖　4-31

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

圖　4-32

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

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

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

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

圖　4-33

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

圖　4-34

4.1.5　網(wǎng)頁中的數(shù)據(jù)表格

有時需要將Word文檔中的內(nèi)容或Excel文檔中的表格數(shù)據(jù)導(dǎo)入到網(wǎng)頁中進行發(fā)布，或?qū)⒕W(wǎng)頁中的表格數(shù)據(jù)導(dǎo)出到Word文檔或Excel文檔中進行編輯，Dreamweaver CS6提供了實現(xiàn)這種操作的功能。

1．導(dǎo)入表格數(shù)據(jù)

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

圖　4-35

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