colgroup是一種標籤,用於對表格中的列進行組合,以便對其進行格式化。
定義和用法,實例,可選屬性,瀏覽器支持,
定義和用法
<colgroup> 標籤用於對表格中的列進行順序組合,以便對其進行格式化。
如需對全部列套用樣式,<colgroup> 標籤很有用,這樣就不需要對各個單元和各行重複套用樣式了。
<colgroup> 標籤只能在 table 元素中使用。
實例
比如說如果一個表格前三列要垂直居上,後兩列垂直居下,我們就可以用分組來進行設定。看起來是樣式表可以代替的功能,但這的確不是多餘的標籤,和前面的標籤一樣,在 XHTML 1.0 Strict 中也是允許的標籤。
<table border="1"> <colgroup span="3" valign="top"></colgroup> <colgroup span="2" valign="bottom"></colgroup> <tr> <td>1垂直居上</td> <td>2垂直居上</td> <td>3垂直居上</td> <td>4垂直居下</td> <td>5垂直居下</td> </tr></table>
span 用以表示該組包含多少列。與之區別的col 的作用是細化 colgroup,因為即使在一個組中,列與列之間也可能會出現一些差別,這時就得用到 col 了
<colgroup span="3" valign="top"> <col width="50"></col> <col align="center"></col> <col valign="middle"></col> </colgroup>
顯示結果為第三列的 valign 覆蓋了 colgroup 的 valign 設定。在這裡 width、align、valign 都是符合 XHTML 1.0 Strict 的,不過要注意的是:沒有 height 屬性。
可選屬性
DTD 指示此屬性允許在哪種 DTD 中使用。S=Strict, T=Transitional, F=Frameset.
* 表示HTML5不支持的屬性。
屬性 | 值 | 描述 |
---|---|---|
align(*) | right left center justify char | 定義在列組合中內容的水平對齊方式。 |
char(*) | character | 規定根據哪個字元來對齊列組中的內容。 |
charoff(*) | number | 規定第一個對齊字元的偏移量。 |
number | 規定列組應該橫跨的列數。 | |
valign(*) | top middle bottom baseline | 定義在列組合中內容的垂直對齊方式。 |
width(*) | pixels % relative_length | 規定列組合的寬度。 |
提示:請為 <colgroup> 標籤添加 class 屬性。這樣就可以使用 CSS 來負責對齊方式、寬度和顏色等等。
HTML5 不支持的屬性:
瀏覽器支持
所有主流瀏覽器都支持 <colgroup> 標籤。
Firefox、Chrome 以及 Safari 僅支持 colgroup 元素的 span 和 width 屬性。