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

打印页面