COL 可以用來設定報表(TABLE)中的一個直欄的共同屬性。COL 可以直接用在 TABLE 中。也可放在 COLGROUP 中,COL 會改寫 COLGROUP 設定的屬性值。部份瀏覽器沒有完整支援此功能。只有 SPAN, WIDTH 兩個屬性有完整的支援。
COLGROUP 可以用來設定報表(TABLE)中的數個直欄(預設值為 1)的共同屬性,可用 SPAN 屬性宣告直欄數。COLGROUP 必須直接接在 CAPTION 之後,且在 THEAD 之前。COLGROUP 區塊中可放 COL,COL 會改寫 COLGROUP 設定的屬性值;用了 COL,就不能用 SPAN。部份瀏覽器沒有完整支援此功能。
屬性說明 |
---|
ALIGN | BGCOLOR | CHAR | CHAROFF | SPAN | VALIGN | WIDTH |
通用屬性
此元件可以使用通用屬性,請參考通用屬性的說明。 |
- 範例:
<table width=90% bgcolor='#999955' rules=all frame=box>
<col span=2 style='background:blue; color:red'>
<col style='font-size:180%'>
<col span=2 style='width:130px; text-align:center'>
<tr><td>第一欄<td>第二欄<td>第三欄<td>第四欄<td>第五欄
<tr><td>網路遊戲<td>射擊遊戲<td>好玩遊戲<td>武打遊戲<td>益智遊戲
</table> - 執行結果:
第一欄 第二欄 第三欄 第四欄 第五欄 網路遊戲 射擊遊戲 好玩遊戲 武打遊戲 益智遊戲
- 上例中的 color:red, font-size:180% 與 text-align:center,只有 IE 成功執行;Firefox, Safari, Chrome 都沒支援。但是 background:blue 則都有支援。使用時最好多測試一下。
- 前面的說明是作者在個人電腦離線測試的結果;移到部落格之後,IE6 還有支援,但IE8 只有 background 被成功執行。
ALIGN
設定資料在方格中對齊的方法。可設為:
|
- 範例:
<table width=90% bgcolor='#999955' rules=all frame=box>
<col align=left>
<colgroup style='background:blue'>
<col align=center>
<col align=right>
</colgroup>
<col align=justify>
<tr><td>第一欄<td>第二欄<td>第三欄<td>第四欄
<tr>
<td>靠左 Not ask what your country can do for you, ask what you can do for your country.
<td>中央 Not ask what your country can do for you, ask what you can do for your country.
<td>靠右 Not ask what your country can do for you, ask what you can do for your country.
<td>雙邊 Not ask what your country can do for you, ask what you can do for your country.
<tr><td>網路遊戲<td>射擊遊戲<td>好玩遊戲<td>武打遊戲
</table> - 執行結果:
第一欄 第二欄 第三欄 第四欄 靠左 Not ask what your country can do for you, ask what you can do for your country. 中央 Not ask what your country can do for you, ask what you can do for your country. 靠右 Not ask what your country can do for you, ask what you can do for your country. 雙邊 Not ask what your country can do for you, ask what you can do for your country. 網路遊戲 射擊遊戲 好玩遊戲 武打遊戲
- 上例中的 align 測試,只有 IE 成功執行;Firefox, Safari, Chrome 都沒支援。
- 前面的說明是作者在個人電腦離線測試的結果;移到部落格之後, IE6 成功,IE8 失敗。
BGCOLOR
設定背景顏色。IE 的三碼顏色 #RGB 會轉換成 #0R0G0B;Firefox, Safari, Chrome 則轉換成 #RRGGBB。建議用 六碼顏色值(#RRGGBB)。 |
- 範例:
<table width=90% bgcolor='#999955' rules=all frame=box>
<col span=2 bgcolor=red>
<col style='background:blue'>
<colgroup bgcolor=green>
<col style='text-align:center'>
<col style='text-align:right'>
</colgroup>
<tr><td>第一欄<td>第二欄<td>第三欄<td>第四欄<td>第五欄
<tr><td>網路遊戲<td>射擊遊戲<td>好玩遊戲<td>武打遊戲<td>益智遊戲
</table> - 執行結果:
第一欄 第二欄 第三欄 第四欄 第五欄 網路遊戲 射擊遊戲 好玩遊戲 武打遊戲 益智遊戲
- 上例中的 bgcolor 測試,IE, Safari, Chrome 都成功;Firefox 沒支援。在 Firefox 必須使用 style 的 background 設定背景色。建議改用 background 才能通用於主要瀏覽器。
CHAR
當 align='char' 時,用來宣告直欄的對齊字。預設值,在英語為數字的小數點『.』,法語則為『,』。主要瀏覽器都沒有支援。 |
- 範例:
<table bgcolor='#999955' rules=all frame=box>
<col align='char' char='.' width='100px'>
<tr><td>11.4
<tr><td>0.8
<tr><td>100.345
</table> - 執行結果:
11.4 0.8 100.345
CHAROFF
設定距離第一個對齊字的長度,單位可用像素或百分比。主要瀏覽器都沒有支援。 |
- 範例:
<table bgcolor='#999955' rules=all frame=box>
<col align='char' char='.' width='150px' charoff='90px'>
<tr><td>11.4
<tr><td>0.8
<tr><td>100.34
</table> - 執行結果:
11.4 0.8 100.34
SPAN
宣告數個直欄,使用 COL 設定的屬性值。預設值為 1。 |
- 範例:
<table width=450 bgcolor='#999955' rules=all frame=box>
<col width='90px' span=2 style='background:red'>
<col>
<col width='60px' span=2 style='background:blue'>
<tr><td>第一欄<td>第二欄<td>第三欄<td>第四欄<td>第五欄
<tr><td>網路遊戲<td>射擊遊戲<td>好玩遊戲<td>武打遊戲<td>益智遊戲
</table>
<p>用在 COLGROUP:
<table width=450 bgcolor='#999955' rules=all frame=box>
<colgroup width='90px' span=2 style='background:red'></colgroup>
<col>
<colgroup width='60px' span=2 style='background:blue'></colgroup>
<tr><td>第一欄<td>第二欄<td>第三欄<td>第四欄<td>第五欄
<tr><td>網路遊戲<td>射擊遊戲<td>好玩遊戲<td>武打遊戲<td>益智遊戲
</table> - 執行結果:
第一欄 第二欄 第三欄 第四欄 第五欄 網路遊戲 射擊遊戲 好玩遊戲 武打遊戲 益智遊戲 用在 COLGROUP:
第一欄 第二欄 第三欄 第四欄 第五欄 網路遊戲 射擊遊戲 好玩遊戲 武打遊戲 益智遊戲
VALIGN
指定資料放置在方格中的垂直位置。可設為:
|
- 範例:
<table width=70% bgcolor='#999955' rules=all frame=box>
<col>
<col valign='top'>
<col valign='middle'>
<col valign='bottom'>
<col valign='baseline'>
<tr><td>示範<br>2<br>3 <td>上方<td>中央<td>底部<td>基準線<br>1
<tr><td>示範<br>2<br>3 <td>上方<td>中央<td>底部<td>基準線<br>1
</table> - 執行結果:
示範
2
3上方 中央 底部 基準線
1示範
2
3上方 中央 底部 基準線
1
- 上例,IE 執行成功;Firefox, Safari, Chrome 沒有支援。
WIDTH
設定直欄的寬度,可以是:
|
- 範例:
<table width=70% bgcolor='#999955' rules=all frame=box>
<col width=30%>
<col width=70%>
<tr><td>第一行<td>第一行
<tr><td>第二行<td>第二行
</table> - 執行結果:
第一行 第一行 第二行 第二行
測試 n*。
- 範例:
<table width=60% bgcolor='#999955' rules=all frame=box>
<col width='3*'>
<col width='7*'>
<tr><td>第一行<td>第一行
<tr><td>第二行<td>第二行
</table> - 執行結果:
第一行 第一行 第二行 第二行