HTML - 表格列組

上一頁
下一頁

HTML 表格列組

在 HTML 中，<colgroup> 元素用於定義表格中的一組列。它允許您同時對多列應用屬性，從而提供了一種更高效的方式來設定列的樣式或格式。

HTML Table Colgroup

<colgroup> 標籤

<colgroup> 標籤通常與<col> 元素一起使用，其中每個<col> 標籤代表組內的一列。這種分組增強了可讀性，並簡化了將樣式或屬性應用於表格中特定列的過程。

語法

以下是使用 <colgroup> 與 <table> 標籤的語法

<table>
  <colgroup>
    <col span="value" style="width: ...;">
    <col style="...">
    <!-- More <col> elements... -->
  </colgroup>
  <!-- Other table elements such as <thead>, <tbody>, ... -->
</table>

在 HTML 表格中使用 <colgroup> 標籤

在 HTML 中使用<colgroup> 包括以下步驟：

1. 插入 <colgroup> 標籤

將 <colgroup> 標籤放在 <table> 元素 內，通常位於 <thead>（表頭）或 <tbody>（表體）部分。

<table>
  <colgroup>
    <!-- Column definitions -->
  </colgroup>
  <thead>
    <!-- Table headers -->
  </thead>
  <tbody>
    <!-- Table rows -->
  </tbody>
</table>

2. 定義列

在 <colgroup> 標籤內，使用一個或多個 <col> 標籤來表示每一列。在這些 <col> 標籤中指定列的屬性或樣式。

<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <!-- Table content -->
</table>

3. 應用屬性或樣式

透過新增諸如 span、width、style 或 class 等屬性到 <col> 標籤中來定義列的屬性或樣式。

<table>
  <colgroup>
    <col style="background-color: lightgrey;" span="2"> <!-- First two columns -->
    <col style="background-color: lightblue;"> <!-- Third column -->
  </colgroup>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

HTML 表格列組示例

在這個例子中，<colgroup> 標籤定義了兩個寬度不同的列，並使用 `<col>` 標籤將樣式應用於這些列。表格中的第二行使用 CSS 類進行高亮顯示。

<!DOCTYPE html>
<html>
<body>
   <table border=1>
      <colgroup>
         <col style="width: 30%;">
         <col style="width: 70%;">
      </colgroup>
      <thead>
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Row 1, Col 1</td>
            <td>Row 1, Col 2</td>
         </tr>
         <tr class="highlight">
            <td>Row 2, Col 1</td>
            <td>Row 2, Col 2</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

用於 <colgroup> 標籤的 CSS 屬性

在 HTML 中，<colgroup> 元素允許使用一些特定的 CSS 屬性來增強表格列的呈現效果。可以在<colgroup> 中使用的合法 CSS 屬性如下：

  • width 屬性 - 此屬性設定<colgroup> 內列的寬度。它允許您定義每一列的相對或絕對寬度。

  • visibility 屬性 - visibility 屬性可用於控制<colgroup> 內列的可見性。您可以將其設定為“hidden”以使列不可見。

  • 背景屬性 - 可以應用背景屬性（例如 background-color）來為列新增背景樣式。這可以增強表格的視覺效果。

  • 邊框屬性 - 邊框屬性（如 border-color 和 border-width）允許自定義列周圍的邊框。這對於建立清晰的視覺邊界很有用。

嘗試應用其他 CSS 屬性將不會對錶格列的樣式產生任何影響。因此，當使用<colgroup> 設定表格樣式時，請關注可用的屬性以實現所需的佈局和外觀。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      table {
         width: 100%;
         border-collapse: collapse;
      }
      colgroup {
         /* Setting width for columns */
         width: 20%;
         background-color: #f0f0f0;
         /* Background color for columns */
         visibility: visible;
         /* Making columns visible */
         border: 2px solid #3498db;
         /* Border around columns */
      }
      col {
         /* Additional styling for individual columns */
         background-color: #ecf0f1;
         border: 1px solid #bdc3c7;
      }
      td,
      th {
         border: 1px solid #dddddd;
         text-align: left;
         padding: 8px;
      }
   </style>
</head>
<body>
   <table>
      <colgroup>
         <col>
         <col style="width: 30%;">
         <col>
      </colgroup>
      <thead>
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
         </tr>
         <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

多個 Col 元素

當然！HTML 中的<colgroup> 元素允許您將表格中的一組列分組並集體應用樣式。在<colgroup> 中，您可以使用多個 <col> 元素來為各個列定義不同的樣式。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      col {
         /* Additional styling for individual columns */
         background-color: #ecf0f1;
         border: 1px solid #bdc3c7;
      }
   </style>
</head>
<body>
   <table border=5>
      <colgroup>
         <col style="width: 20%;">
         <col style="width: 30%;">
         <col style="width: 50%;">
      </colgroup>
      <thead>
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
         </tr>
         <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

<colgroup> 包含三個<col> 元素，每個元素都有一個特定的“width”樣式，定義各個列的寬度。

空列組

在 HTML 中，<colgroup> 元素可用於定義表格中的一組列。空<colgroup> 可用於為潛在樣式或以後的使用提供結構性佔位符。雖然它不包含明確的<col> 元素，但它仍然可以影響表格的整體結構。

示例

這是一個演示空<colgroup> 用法的簡單示例。此處，<colgroup> 為空，但用作潛在樣式的佔位符。整個<colgroup> 都帶有背景顏色和邊框樣式。<col> 元素沒有明確使用，但它們的樣式可以在<colgroup> 中定義，以備將來使用或保持結構的一致性。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      colgroup {
         /* Styling for the colgroup (can be empty) */
         background-color: #f0f0f0;
         /* Background color for the entire colgroup */
         border: 2px solid #3498db;
         /* Border around the entire colgroup */
      }
      /* Additional styling for individual columns */
      col {
         background-color: #ecf0f1;
         border: 1px solid #bdc3c7;
      }
   </style>
</head>
<body>
   <table border=3>
      <colgroup></colgroup>
      <thead>
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
         </tr>
         <tr>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
         </tr>
      </tbody>
   </table>
</body>
</html>
列印頁面
上一頁
下一頁
廣告