如果你是一名網頁設計人員，如果你的網頁裡沒有一個表格，那可以說算不上一個網頁(當然全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>標簽把表格內容拆開，放在幾個豎向相連的大表格中，把關鍵內容放在上面的表格中，讓它們先顯示，這樣用戶就不會因為失去耐心而關閉窗口了。