Super Moderator
 
- 積分
- 4909
- 基金單位
- 4909
- 金錢
- 7084
- 來自
- hongkong
- 註冊時間
- 31-10-2004
- 最後登錄
- 27-6-2009
|
1#
大 中
小 發表於 11-11-2008 19:57 只看該作者
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的),這裡收集了網路上各式各樣的表格,大家可以參考看看: |
|
<table BORDER bgcolor=#B5C3E7 cellspacing=4 cellpadding=6 width="150"> <tr> <td align=CENTER width="140" bgcolor=#99FF99>表格樣式1</td> </tr> </table> |
|
<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> |
|
<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> |
|
<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> |
|
<table width="150" border="1" cellspacing="1" bordercolor="#000000"> <tr bgcolor="#006699" align="center"> <td width="137">表格樣式5</td> </tr> </table> |
|
<table width="150" border="1" bgcolor="#003399"> <tr bgcolor="#3366FF" align="center"> <td width="136">表格樣式6</td> </tr> </table> |
|
<table width="150" border="1" bgcolor="#CCCCFF"> <tr align="center"> <td width="136">表格樣式7</td> </tr> </table> |
|
<table width="150" border="1" bgcolor="#99FFFF" bordercolorlight="#FFFFFF" bordercolordark="#000000"> <tr align="center"> <td width="136">表格樣式8</td> </tr> </table> |
|
<table border=2 cellspacing=0 cellpadding=0 width=150> <tr bgcolor="#FFFFBB"> <td align=CENTER width="135">表格樣式9</td> </tr> </table> |
|
<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瀏覽器有比較多的屬性可以顯示, |
|