tablecolgroup詳解

一、tablecolgroup概念和基本用法

tablecolgroup標籤用於定義表格中的列的屬性，它的主要作用是通過col元素設置列的樣式，在colgroup中可以設置多個col元素，指定不同的樣式來對不同列進行設置，從而實現表格格式控制。

tablecolgroup通常作為table的子元素出現，如下所示：

    <table>
      <colgroup>
        <col />
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
          <th>Heading 1</th>
          <th>Heading 2</th>
          <th>Heading 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>

在上述代碼中，colgroup標籤包含三個col標籤，用於設置表格中對應的三列樣式。在表格中，我們可以將colgroup標籤和col標籤看作是控制單元格樣式的「一手掌控者」，而thead、tbody和tfoot等則是控制單元格數據的「一手掌控者」。使用colgroup標籤後，我們可以通過對col標籤設置不同的樣式來實現對表格列的格式控制。

二、tablecolgroup的相關屬性

1. span

在一個colgroup中，span屬性可以用來設置col標籤的數量，比如：

    <table>
      <colgroup span="3">
        <col />
        <col />
        <col />
      </colgroup>
      <thead>
        <tr>
          <th>Heading 1</th>
          <th>Heading 2</th>
          <th>Heading 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>

在上述代碼中，我們使用span屬性設置了三個col標籤，即每一列都使用col標籤控制樣式。

2. width

使用width屬性可以為表格中每個列設置一個固定的寬度值，比如：

    <table>
      <colgroup>
        <col width="20%" />
        <col width="60%" />
        <col width="20%" />
      </colgroup>
      <thead>
        <tr>
          <th>Heading 1</th>
          <th>Heading 2</th>
          <th>Heading 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>

在上述代碼中，我們為每一列設置了一個固定的寬度值，表格中的列寬度比例為20%：60%：20%。

3. style

通過style屬性，我們可以為表格中的每一列指定CSS樣式，比如：

    <table>
      <colgroup>
        <col style="background-color:red" />
        <col style="background-color:green" />
        <col style="background-color:blue" />
      </colgroup>
      <thead>
        <tr>
          <th>Heading 1</th>
          <th>Heading 2</th>
          <th>Heading 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>

在上述代碼中，我們為每一列指定了一個不同的背景色，從而使表格更加美觀。

4. class

通過class屬性，我們可以為表格中的每一列指定一個CSS類名，方便我們通過CSS樣式單獨控制每一列的樣式。

    <table>
      <colgroup>
        <col class="col1" />
        <col class="col2" />
        <col class="col3" />
      </colgroup>
      <thead>
        <tr>
          <th>Heading 1</th>
          <th>Heading 2</th>
          <th>Heading 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
          <td>Row 2, Column 3</td>
        </tr>
      </tbody>
    </table>

在上述代碼中，我們為每一列指定了一個不同的CSS類名，方便我們通過CSS樣式單獨控制每一列的樣式。

三、tablecolgroup實例演示

1. 為表格每一列設置不同的背景色

    <table>
      <colgroup>
        <col style="background-color:#ffb6b9" />
        <col style="background-color:#ffeaa7" />
        <col style="background-color:#b2fefa" />
      </colgroup>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>25</td>
          <td>Male</td>
        </tr>
        <tr>
          <td>Alice</td>
          <td>22</td>
          <td>Female</td>
        </tr>
        <tr>
          <td>Tom</td>
          <td>29</td>
          <td>Male</td>
        </tr>
      </tbody>
    </table>

2. 使用colgroup設置固定寬度

    <table>
      <colgroup>
        <col width="150px" />
        <col width="250px" />
        <col width="100px" />
      </colgroup>
      <thead>
        <tr>
          <th>Name</th>
          <th>Gender</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Male</td>
          <td>25</td>
        </tr>
        <tr>
          <td>Alice</td>
          <td>Female</td>
          <td>22</td>
        </tr>
        <tr>
          <td>Tom</td>
          <td>Male</td>
          <td>29</td>
        </tr>
      </tbody>
    </table>

3. 使用class控制表格樣式

<table class="table">

<colgroup>

<col class="col1" />

<col class="col2" />

<col class="col3" />

</colgroup>

<thead>

<tr>

<th>Name</th>

<th>Gender</th>

<th>Age</th>

</tr>

</thead>

<tbody>

<tr>

<td>John</td>

<td>Male</td>

<td>25</td>

</tr>

<tr>

<td>Alice</td>

<td>Female</td>

<td>22</td>

</
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/288690.html