2008/10/31

COL, COLGROUP

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

設定資料在方格中對齊的方法。可設為:
  1. left:資料對齊方格的左邊。此為預設值。
  2. center:資料展現於方格的中央。此為表頭的預設值。
  3. right:資料對齊方格的右邊。
  4. justify:兩邊對齊。
  5. char:資料依據指定的字對齊。
  • 範例:

    <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

指定資料放置在方格中的垂直位置。可設為:
  1. top:資料放在方格上方。
  2. middle: 資料放在方格的垂直中央。此為預設值。
  3. bottom:資料放在方格的底部。
  4. baseline:資料的第一行(只有第一行)文字行,要放在同一橫列的基準線上。
  • 範例:

    <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

設定直欄的寬度,可以是:
  1. 用像素值(pexel):例如 100px。
  2. TABLE 寬度的百分比:例如 15%。
  3. n*:表示平均直欄寬的 n 倍。主要瀏覽器都沒有支援。
  • 範例:

    <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>

  • 執行結果:

    第一行第一行
    第二行第二行

©2008-2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章,圖片與程式的著作權,所有權利保留。