HTML 表格 <colgroup>
標籤
<colgroup>
標籤用於設定表格中特定列的樣式。
HTML 表格 <colgroup>
標籤
如果要為表格的前兩列設定樣式,請使用 <colgroup>
和 <col>
標籤。
週一 | 週二 | 週三 | 週四 | 週五 | 週六 | 太陽 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
<colgroup>
標籤應作為列規格的容器。
每個組由 <col>
標籤指定。
span
屬性指定了多少列將應用樣式。
style
屬性指定了要為列設定的樣式。
注意: colgroup
可用的 CSS 屬性非常有限。
示例
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>週一</th>
<th>週二</th>
<th>週三</th>
<th>週四</th>
...
自己動手試一試 »
注意: <colgroup>
標籤必須是 <table>
元素的子元素,並且應放在任何其他表格元素(如 <thead>
、<tr>
、<td>
等)之前,但在 <caption>
元素(如果存在)之後。
允許的 CSS 屬性
只有非常有限的 CSS 屬性允許在 colgroup 中使用
width
屬性
visibility
屬性
background
屬性
border
屬性
所有其他 CSS 屬性都將對您的表格無效。
多個 Col 元素
如果要為更多列設定不同的樣式,請在 <colgroup>
中使用更多 <col>
元素
示例
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
<tr>
<th>週一</th>
<th>週二</th>
<th>週三</th>
<th>週四</th>
...
自己動手試一試 »
空的 Colgroups
如果要設定表格中間列的樣式,請在前面的列之前插入一個“空”的 <col>
元素(不帶樣式)
示例
<table>
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>週一</th>
<th>週二</th>
<th>週三</th>
<th>週四</th>
...
自己動手試一試 »
隱藏列
您可以使用 visibility: collapse
屬性隱藏列
示例
<table>
<colgroup>
<col span="2">
<col span="3" style="visibility: collapse">
</colgroup>
<tr>
<th>週一</th>
<th>週二</th>
<th>週三</th>
<th>週四</th>
...
自己動手試一試 »