嘉嘉

■ 如何善用<table>
對於網頁製作初學著的人來說,常常因為不能像word一樣隨心所欲配置內容感到煩惱. 關於這點你可以把整張網頁想成一張大表格,表格的每個格子裡還能在配置一張表格,分割越多,越能掌控內容排列,例如: 如右圖,假設這是整張網頁,利用表格規劃許多區塊,這裡為了方便大家了解,所以體表格加了黑色框線,事實上利用表格排版,框線大多設為無色,框線寬度都設為零. 大家只要掌握表格內容還可以在規劃表格這點,就可以做出整齊清楚的網頁了. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
■ 利用<table>分割圖片
表格另一個常見用途使用重組分解的圖型,分割圖片大概有以下幾項優點:
圖形中某些部分壓縮效果比較好. 圖形中某個部分需要動畫,利用表格配置出需要動畫的部分,這樣比做整張動畫檔案較小. 可以讓瀏覽者先看到圖片一部份,不必等到整張片下載完成
■ <table>變化多端
<table>標籤的屬性設定值相當多,尤其IE可以解釋的屬性更多,不過也因為這樣,IE的表格顯示比NT有更多種變化,(又是NT輸給IE的),這裡收集了網路上各式各樣的表格,大家可以參考看看:
表格樣式1 <table BORDER bgcolor=#B5C3E7 cellspacing=4 cellpadding=6 width="150"> <tr> <td align=CENTER width="140" bgcolor=#99FF99>表格樣式1</td> </tr> </table> 表格樣式2 <table cellspacing=2 cellpadding=2 border=1 bgcolor=#0099FF bordercolor=#FFFFFF bordercolorlight=black bordercolordark=eeeeee width=150 style='border:2 outset rgb(255,255,255)'> <tr bgcolor="#003399" align="center"> <td height="23"><font color=white><font color="#FFFFFF"> 表格樣式2</font><font color="#FFFFFF"></font></font></td> </tr> </table> 表格樣式3 <table border=2 width=150 cellspacing="0" cellpadding="0" bgcolor=royalblue bordercolor=white bordercolorlight=#FFFFFF bordercolordark=#000000> <tr bgcolor=#99CCFF > <td align=center height="25"> 表格樣式3 </td> </table> 表格樣式4 <table width="150" border="0" cellpadding="0" cellspacing="1" bordercolor="#000000" bgcolor="#000000"> <tr bgcolor="#99CCFF" align="center"> <td height="20" width="139">表格樣式4</td> </tr> </table> 表格樣式5 <table width="150" border="1" cellspacing="1" bordercolor="#000000"> <tr bgcolor="#006699" align="center"> <td width="137">表格樣式5</td> </tr> </table> 表格樣式6 <table width="150" border="1" bgcolor="#003399"> <tr bgcolor="#3366FF" align="center"> <td width="136">表格樣式6</td> </tr> </table> 表格樣式7 <table width="150" border="1" bgcolor="#CCCCFF"> <tr align="center"> <td width="136">表格樣式7</td> </tr> </table> 表格樣式8 <table width="150" border="1" bgcolor="#99FFFF" bordercolorlight="#FFFFFF" bordercolordark="#000000"> <tr align="center"> <td width="136">表格樣式8</td> </tr> </table> 表格樣式9 <table border=2 cellspacing=0 cellpadding=0 width=150> <tr bgcolor="#FFFFBB"> <td align=CENTER width="135">表格樣式9</td> </tr> </table> 表格樣式10 <table border=1 cellpadding="2" cellspacing="0" bordercolor=6f87df width="150"> <tr bgcolor=cfdfff bordercolorlight=black bordercolordark=white align="center"> <td colspan="2"> <font style='font-family:新細明體'>表格樣式10 </font></td> </tr> </table>
以上就是各種表格樣式,若將規劃更多區塊,又會有別種風味,大家可以試試看. 另外一點,NT的使用者可能沒辦法看到這麼多種變化,最主要是因為IE瀏覽器有比較多的屬性可以顯示,