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>
...
自己動手試一試 »