發新話題
打印

table 表格標籤_可重組分割圖片

table 表格標籤_可重組分割圖片

■ 如何善用<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瀏覽器有比較多的屬性可以顯示,

TOP

發新話題