技巧運用無極限 HTML表格運用從基礎到精通

網站建設是指使用標識語言（markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網頁設計的目的就是產生網站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標示語言、可擴展超文本標記語言等標示語言放置到網站頁面上。

　　如果你是一名網頁設計人員，如果你的網頁里沒有一個表格，那可以說算不上一個網頁(當然全FLASH作品除外)，表格的重要性就可想而知。幫助我們控制網頁布局、控制內容的顯示等等。使用表格有很多的技巧，你可否知道呢？

　　使用表格排版網頁

　　使用表格排版網頁，可以使你的網頁更美觀，條理更清晰，更易于維護和更新。(將表格的寬設為100%，可以使網頁的兼容性更好)

　　要盡量細化表格

　　不要把整個網頁放在一個大的表格里，因為一個大表格里的內容要全部加載完才會顯示，如果整個網頁放在一個表格里，那么你的網頁就只會兩種情況：

　　1、全部不顯示

　　2、全部顯示出來

　　所以建議大家將整個頁面分成幾塊，例如通用的上(放置Logo、Banner、Menu等等)、中(放置頁面內容)、下(放置版權信息等等)，將每一部分由單獨的表格來實現，這樣會好一些。

　　表格設計實例

　　創建一個表格，邊框大小設為0(border=0)，間距設為1(cellspacing="1")，背景色設為深色(bgcolor="#000000")，全部選定單無格，并將單無格的背景色設為淺色(如:bgcolor="#FFFFFF")，這樣可以得到一個細線邊框的表格，請看下面的例子：

　　〈table width="50%" border="0" cellspacing="1" bgcolor="#000000">

　　< tr bgcolor="#FFFFFF">

　　< td> < /td>

　　< td> < /td>

　　< /tr>

　　< tr bgcolor="#FFFFFF">

　　< td> < /td>

　　< td> < /td>

　　< /tr>

　　< /table〉

　　動態改變表格單元格的顏色

　　在單元格< td>標記中加入以下代碼，會動態改變單元格的顏色設置：

　　onMouseOut=”this. bgColor=’’” onMouseOver=”this.bgColor=’’”

　　在行標簽< tr>標記中加入上面代碼，會動態改變一行的顏色設置。

　　〈table width="50%" border="0" cellspacing="1" bgcolor="#000000">

　　< tr bgcolor="#FFFFFF" onMouseOver="this.bgColor='#00CC00'" onMouseOut="this.bgColor='#FFFFFF'">

　　< td> < /td>

　　< td> < /td>

　　< /tr>

　　< tr bgcolor="#FFFFFF">

　　< td onMouseOver="this.bgColor='#FFFF00'" onMouseOut="this.bgColor='#FFFFFF'"> < /td>

　　< td onMouseOver="this.bgColor='#FFFF00'" onMouseOut="this.bgColor='#FFFFFF'"> < /td>

　　< /tr>

　　< /table〉

　　用表格替代水平線、豎直線

　　用表格代替水平線，插入一個表格，將高度設為1(按需要設定)，當然也可以將寬度設為1，制作豎直線。

　　〈table width="100" border="0" align="center" cellpadding="0" cellspacing="0">

　　< tr>

　　< td height="1" bgcolor="#000000">< /td>

　　< /tr>

　　< /table>

　　< br>

　　< table height="100" border="0" align="center" cellpadding="0" cellspacing="0">

　　< tr>

　　< td width="1" bgcolor="#000000">< /td>

　　< /tr>

　　< /table〉

　　注意：在Dreamweaver里制作時，先將高設為1后，切換到代碼窗口，將表格里的空格符去掉( )，如果不將空格去除的話，將看不到想要的效果了。

　　制作帶有立體感的表格

　　在頁面中適當的加入帶有立體感的表格元素，會給你的頁面添光加彩。

　　〈table width="30%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC">

　　< tr>

　　< td>A< /td>

　　< td> < /td>

　　< /tr>

　　< tr>

　　< td> < /td>

　　< td> < /td>

　　< /tr>

　　< /table>

　　< br>

　　< table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bgcolor="#9999CC">

　　< tr>

　　< td>B< /td>

　　< td> < /td>

　　< /tr>

　　< tr>

　　< td> < /td>

　　< td> < /td>

　　< /tr>

　　< /table>

　　< br>

　　< table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC">

　　< tr>

　　< td>C< /td>

　　< td> < /td>

　　< /tr>

　　< tr>

　　< td> < /td>

　　< td> < /td>

　　< /tr>

　　< /table〉

　　小技巧：效果圖中的凸凹效果，完全是由bordercoloer的顏色來控制的，它的顏色淺一些，有會有凸出的效果，它的顏色深一點，就會有凹陷的效果。

　　隱藏表格的分隔線

　　在處理表格時有時會有這樣的需求，某幾列、或行的內容屬于同一主題，為了排列整齊將它們放在不同的行上，但是不想讓表格的分隔線顯示出來，有什么辦法嗎，其實很簡單。

　　隱藏水平分隔線

　　< table border rules=cols cellspacing=0 align=left>

　　隱藏豎直分隔線

　　< table border rules=rows cellspacing=0 align=left>

　　隱藏全部分隔線

　　< table border rules=none cellspacing=0 align=left>

　　表格內容分行下載

　　表格內有一些載入較慢的元素(如計數器、大圖片等等)時，往往會延遲整個表格的顯示。這是由IE的顯示特性決定的，只有當表格內所有元素全部載入后，整個表格才得以顯示�！吧嫌姓�策，下有對策”，我們可以使用< tbody>< /tbody>標簽把表格內容拆開，放在幾個豎向相連的大表格中，把關鍵內容放在上面的表格中，讓它們先顯示，這樣用戶就不會因為失去耐心而關閉窗口了。