HTML - Table Colgroup：精通 HTML 表格中的列組

您好，有志於網頁開發的夥伴們！今天，我們將深入探討 HTML 表格中一個常被忽略但非常強大的功能：<colgroup> 標籤。作為你們親切鄰居的計算機老師，我將用清晰的解釋和大量的範例來引導你們了解這個主題。所以，拿起你們最喜歡的飲料，讓我們一起踏上這次學習冒險吧！

HTML - Table Colgroup

HTML 標籤是什麼？

在我們深入細節之前，先來了解一下基礎知識。<colgroup> 標籤是一個特殊的 HTML 過渡元素，用於在表格中對列進行分组和格式化。它就像是你表格列的時尚設計師，讓你可以為整個列應用樣式，而不需要為每個單元格重複操作。

為什麼使用？

想像一下，你正在為學校的課表創建一個大型表格。沒有 <colgroup>，你將不得不為每列中的每個單元格單獨應用樣式。這是很多重複的工作！有了 <colgroup>，你可以一次為整個列應用樣式。這真是一個省時器，並且能使你的代碼保持清晰和有組織。

表格 Colgroup 的範例

讓我們捲起袖子，來看看一些實際的範例。我們將從簡單的開始，然後逐漸增加複雜性。

範例 1：基本的列分组

<table>
<colgroup>
<col span="2" style="background-color: #ff9999;">
<col style="background-color: #99ff99;">
</colgroup>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>喜歡的顏色</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>藍色</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>綠色</td>
</tr>
</table>

在這個範例中，我們使用 <colgroup> 來設置我們表格列的樣式。第一個 <col> 元素跨越兩列，給它們一個淺紅色背景。第三列得到一個淺綠色背景。注意我們不需要為每個單元格應用這些樣式！

範例 2：混合列跨度

<table>
<colgroup>
<col span="2" style="background-color: #ffcc99;">
<col style="background-color: #99ccff;">
<col span="2" style="background-color: #cc99ff;">
</colgroup>
<tr>
<th>科目</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
</tr>
<tr>
<td>數學</td>
<td>9:00 AM</td>
<td>10:00 AM</td>
<td>9:00 AM</td>
<td>11:00 AM</td>
</tr>
<tr>
<td>科學</td>
<td>11:00 AM</td>
<td>1:00 PM</td>
<td>11:00 AM</td>
<td>2:00 PM</td>
</tr>
</table>

在這裡，我們做得更有趣一些。我們將前兩列分组為一個桃色背景，中間列為淺藍色背景，最後兩列為淺紫色背景。這對於視覺上區分課表的不同部分非常棒！

範例 3：與 Colgroup 一起使用類別

<style>
.highlight { background-color: #ffff99; }
.important { font-weight: bold; }
</style>

<table>
<colgroup>
<col class="highlight">
<col span="2">
<col class="important">
</colgroup>
<tr>
<th>產品</th>
<th>價格</th>
<th>數量</th>
<th>總計</th>
</tr>
<tr>
<td>小工具</td>
<td>$10</td>
<td>5</td>
<td>$50</td>
</tr>
<tr>
<td>小玩意</td>
<td>$20</td>
<td>3</td>
<td>$60</td>
</tr>
</table>

在這個範例中，我們使用 CSS 類別與我們的 <col> 元素。第一列被突出顯示為黃色，最後一列被加粗。這是一種吸引人關注表格中特定列的好方法！

colgroup 的合法 CSS 屬性

現在我們已經看到了 <colgroup> 的應用，來談談我們可以實際與它一起使用的 CSS 屬性。不是所有的 CSS 屬性都能與 <colgroup> 一起工作，但那些可以使用的屬性非常有用！

以下是最常見的合法 CSS 屬性列表，適用於 <colgroup>：

屬性	描述	範例
background-color	設置背景顏色	`background-color: #ff9999;`
border	設置邊框屬性	`border: 1px solid black;`
border-color	設置邊框顏色	`border-color: red;`
border-style	設置邊框樣式	`border-style: dotted;`
border-width	設置邊框寬度	`border-width: 2px;`
visibility	設置列是否可見	`visibility: collapse;`
width	設置列的寬度	`width: 100px;`