網(wǎng)頁排版(表格)

1、第六章：網(wǎng)頁的排版（表格篇）表格是網(wǎng)頁的一個非常重要元素，因為HTML本身并沒有提供更多的排版手段，我們往往就要借助表格實現(xiàn)網(wǎng)頁的精細排版?？梢哉f表格的是網(wǎng)頁制作中最為重要的一個技巧，表格運用得好壞，直接反映了了網(wǎng)頁設(shè)計師的水平。點擊對象面板的莊，看到如下的對話框：A行數(shù)：表格的行數(shù)；列數(shù)：表格的列數(shù);B寬度：表格的寬度，單位可以是像數(shù)（Pixels）或百分比（Percent）。按像素定義的表格大小是固定的，而按百分比定義的表格，會按照瀏覽器的大小而變化。后面會繼續(xù)深入講解兩種定義方法的區(qū)別；C邊框：表格線的寬度；D單元格間距：單元格間距；單元格填充：單元格內(nèi)距。所謂的單元格，就是表格里面的每

2、一小格。按照如圖的設(shè)置后，就得到下面這個表格:在表格線上點一下，可以全選整個表格，此時可在屬性面板看到:A行(R),列(C):表格的行和列;B寬(W),高(H):表格的寬和高，通常情況下，我們都不會定義表格的高度；C間距(S)，邊距(P):單元格間距和單元格邊距；邊框(B):表格線的寬度；D對齊(A):表格的對齊方式，可以將表格靠左(Left)、置中(Center)、靠右(Right)；E曰消除列的寬度設(shè)置；13消除行的高度設(shè)置；國將表格寬度的設(shè)置由百分比轉(zhuǎn)換為像素；將表格高度轉(zhuǎn)化為象素；因?qū)⒈砀駥挾绒D(zhuǎn)化為百分比；團將表格高度轉(zhuǎn)化為百分比；F背景顏色(G):設(shè)置表格的背景顏色；G邊框顏色(R)

3、:設(shè)置表格線的顏色；H背景圖像(B):設(shè)置表格的背景圖，如果設(shè)置了背景圖，背景顏色就失效了；點擊后面的公文包按鈕選擇背景圖；如果我們把光標移到其中一個單元格，此時看到的屬性面板又有所不同:格式無格式無V丸駅認那M大小岳刈口_IHfI言亙亙亙鏈接v員標-i：:5ir不換行(&)Rm()陌單/水平默認一7寬邏垂直默認”高標題唱)背麺色口;e邊框二jifA!：合并單元格(之前要先選擇相應(yīng)的需要合并單元格)；-一類似;-一類似;B水平(Z):單元格內(nèi)部的水平對齊方式，作用與垂直(T):單元格內(nèi)部的縱向?qū)R方式；C寬(W)，高(H):單元格的寬度與高度；D背景(B):單元格背景圖；E背景顏色(G):單元

4、格背景顏色；F邊框(R):單元格邊框顏色。如果你的網(wǎng)頁里沒有一個表格，那可以說算不上一個網(wǎng)頁（FLASH做的除外），表格的重要性就可想而知。表格的參數(shù)說得差不多了，使用表格有很多的技巧，你可否知道呢？使用表格排版網(wǎng)頁，可以使你的網(wǎng)頁更美觀。（將表格的寬設(shè)為100%,可以使網(wǎng)頁的兼容性更好），有的人喜歡有層來排版，但層在不同分辨率的瀏覽器中有不同的效果，兼容性不好。不要把整個網(wǎng)頁放在一個大的表格里，因為一個大表格里的內(nèi)容要全部LOAD完才會顯示，如果整個網(wǎng)頁放在一個表格里，那么你的網(wǎng)頁就只會兩種情況：1）全部不顯示。2）全部顯示出來。插入一個表格，邊框大小設(shè)為0（border=0），間距設(shè)為1（

5、cellspacing=1），背景色設(shè)為深色（如bgcolor=#000000），全部選定單無格，并將單無格的背景色設(shè)為淺色（如:bgcolor=#FFFFFF），這樣可以得到一個細線邊框的表格，請看下面的例子：當然你也可以另一種方法做到：將表格的邊框設(shè)為0，選取表格，用CSS樣式，為表格設(shè)一個大小為1的邊框（這種方法做出來的兼容性會差一些）。動態(tài)改變表格的顏色，可讓網(wǎng)頁更有動感，把鼠標移到下面表格看看效果。在單元格的標記里加上：onMouseOut=this.style.backgroundColor=onMouseOver=this.style.backgroundColor=lightg

6、reen就可以了；這些是些javascript腳本，如果你看不懂，可以暫時不必理會，其中l(wèi)ightgreen為鼠標移上去的時候單元格出現(xiàn)的顏色。用表格代替水平線，插入一個表格，將高度設(shè)為1（按需要設(shè)定），當然也可以將寬設(shè)為1,制作豎線。注：在DREAMWEAVE制作時，先將高設(shè)為1后，切換到代碼窗口，將表格里的空格符去掉（）,如果不去了，將看不到效時。請看下面制作有立體感的表格，請先看下面的幾個例子:ABCABCA表格的參數(shù)：border=1cellspacing=0cellpadding=0bordercolor=#FFFFFFbordercolorlight=#000000bgcolor=#9999CCB表格的參數(shù)：border=1cellspacing=2cellpadding=0bgcolor=#9999CCC表格的參數(shù)：border=1bordercolor=#FFFFFFbordercolorlight=#000000bgcolor=#9999CC其實有一個技巧：把bordercolor設(shè)為淺色一點，表格就會凸起來了。表格的特殊屬性，請看下面的例子：表格的說明代碼如下：表格的說明表格的嵌套在網(wǎng)頁制作中被經(jīng)常使用到，尤其是在新浪、搜狐、網(wǎng)易等門戶網(wǎng)站中，為了使大量的信息整齊地展示在瀏覽者面前，表格的嵌套就使用得最為頻繁。下圖是品味人生的首頁在編輯狀