HTML - <colgroup> 標籤

HTML <colgroup> 標籤用於描述表格中一個或多個列的集合，以便進行格式化。它可以方便地為整列應用樣式，避免為每一行每一列重複設定樣式。

要為列宣告不同的特性，請在 <colgroup> 標籤內使用 <col> 標籤。<colgroup> 標籤必須是 <table> 元素的子元素，位於任何 <caption> 元素之後，以及任何 <thead>、<tbody>、<tfoot> 和 <tr> 元素之前。

語法

<colgroup>...</colgroup>

屬性

HTML <colgroup> 標籤支援全域性和事件屬性。下面列出了一些特定的屬性。

屬性	值	描述
span	數字	指定 <col> 元素所跨越的連續列數。
align	left right center justify	指定文字內容的對齊方式（已棄用）。
bgcolor	顏色	指定每一列單元格的背景顏色（已棄用）。
char	字元	指定每一列單元格內容相對於某個字元的對齊方式（已棄用）。
charoff	數字	指定列單元格內容相對於由 char 屬性指定的對齊字元的偏移字元數（已棄用）。
valign	baseline bottom middle top	指定每一列單元格的垂直對齊方式（已棄用）。

HTML <colgroup> 標籤示例

下面的示例將演示 <colgroup> 標籤的用法，以及何時以及如何使用 <colgroup> 標籤來提供有關列的資訊。

在表格中使用 <colgroup> 標籤

下面的示例演示瞭如何在表格中使用 <colgroup> 標籤。

<!DOCTYPE html>
<html>
<body>
   <table border="1">
      <colgroup>
         <col style="background-color:#ABEBC6">
         <col style="background-color:#BB8FCE">
      </colgroup>
      <tr>
         <th>Roll.No</th>
         <th>Name</th>
      </tr>
      <tr>
         <td>1</td>
         <td>Maya</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Surya</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Ram</td>
      </tr>
   </table>
</body>
</html>

指定連續列

考慮另一種場景，我們將使用 span 屬性和 <colgroup> 標籤。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
      }
   </style>
<body>
   <table>
      <colgroup>
         <col span="2" style="background-color:#F9E79F">
      </colgroup>
      <tr>
         <th>Item</th>
         <th>Price</th>
      </tr>
      <tr>
         <td>5-Star</td>
         <td>$10</td>
      </tr>
      <tr>
         <td>Dairy-Milk</td>
         <td>$50</td>
      </tr>
      <tr>
         <td>Kitkat</td>
         <td>$20</td>
      </tr>
   </table>
</body>
</html>

設定 <colgroup> 元素的樣式

在下面的示例中，我們將透過傳遞一個空的 <col> 來將 CSS 應用於表格的中間部分，而無需為之前的列應用樣式。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #85C1E9;
         border-collapse: collapse;
      }
   </style>
<body>
   <table style="width: 50%;">
      <colgroup>
         <col span="1">
         <col span="1" style="background-color: #ABEBC6 ">
      </colgroup>
      <tr>
         <th>MON</th>
         <th>TUE</th>
         <th>WED</th>
         <th>THU</th>
      </tr>
      <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>
      </tr>
      <tr>
         <td>5</td>
         <td>6</td>
         <td>7</td>
         <td>8</td>
      </tr>
      <tr>
         <td>9</td>
         <td>10</td>
         <td>11</td>
         <td>12</td>
      </tr>
   </table>
</body>
</html>

隱藏列

讓我們來看另一個示例，我們將使用 visibility: collapse 屬性來隱藏列。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
         border-collapse: collapse;
      }
   </style>
<body>
   <table style="width: 100%;">
      <colgroup>
         <col span="2">
         <col span="3" style="visibility: collapse">
      </colgroup>
      <tr>
         <th>ID</th>
         <th>Employee</th>
         <th>Department</th>
         <th>Age</th>
      </tr>
      <tr>
         <td>112</td>
         <td>Rahul</td>
         <td>IT</td>
         <td>22</td>
      </tr>
      <tr>
         <td>113</td>
         <td>Ram</td>
         <td>Associate</td>
         <td>24</td>
      </tr>
      <tr>
         <td>114</td>
         <td>Maya</td>
         <td>HR</td>
         <td>30</td>
      </tr>
      <tr>
         <td>115</td>
         <td>Rahul</td>
         <td>BPO</td>
         <td>23</td>
      </tr>
   </table>
</body>
</html>

支援的瀏覽器

標籤
colgroup	是	是	是	是	是

html_tags_reference.htm

列印頁面