HTML - <col> 標籤

HTML <col> 標籤用於提供有關列的資訊。HTML <col> 標籤透過 <colgroup> 元素為每個列提供列特徵。

您可以使用 <col> 標籤將樣式應用於整列，而不是重複每個單元格和每行的樣式。此元素似乎是用於格式化表格中列的高度有用的元素，並且確實具有一些優勢。但是，存在一個重大問題：表格的各個單元格實際上並不包含在列中。

語法

<col attribute = "value">

屬性

HTML col 標籤支援 HTML 的全域性和事件屬性。還有一些特定的屬性，如下所列。

屬性	值	描述
span	數字	指定 <col> 元素跨越的連續列數。
align	左右中兩端對齊	指定文字內容的對齊方式（已棄用）。
bgcolor	顏色	指定每個列單元格的背景顏色（已棄用）。
char	字元	指定每個列單元格內容的對齊方式到一個字元（已棄用）。
charoff	數字	指定列單元格內容相對於 char 屬性指定的對齊字元的偏移字元數（已棄用）。
valign	基線底部中間頂部	指定每個列單元格的垂直對齊方式（已棄用）。

HTML col 標籤示例

下面的示例將說明 col 標籤的使用。在哪裡、何時以及如何使用 col 標籤來提供有關列的資訊。

將 col 標籤與表格一起使用

以下是一個示例，我們將在此示例中在 HTML 表格中使用 <col> 標籤。

<!DOCTYPE html>
<html>
<body>
   <table border="1">
      <col style='color:red;background:#ABEBC6;'>
      <tr>
         <td>Ram</td>
         <td>1</td>
      </tr>
      <tr>
         <td>Rahul</td>
         <td>2</td>
      </tr>
      <tr>
         <td>Ravi</td>
         <td>3</td>
      </tr>
   </table>
</body>
</html>

指定連續列

考慮另一種情況，我們將在此情況下將 span 屬性與 <col> 標籤一起使用。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
      }
   </style>
<body>
   <table>
      <colgroup>
         <col span="2" style="background-color:#D2B4DE">
      </colgroup>
      <tr>
         <th>ID</th>
         <th>Name</th>
         <th>Age</th>
      </tr>
      <tr>
         <td>123</td>
         <td>Maya</td>
         <td>22</td>
      </tr>
      <tr>
         <td>124</td>
         <td>Ram</td>
         <td>23</td>
      </tr>
      <tr>
         <td>125</td>
         <td>Ram</td>
         <td>23</td>
      </tr>
   </table>
</body>
</html>

定義列寬

讓我們看一下下面的示例，我們將在此示例中將 width 屬性與 <col> 標籤一起使用。

<!DOCTYPE html>
<html>
<body>
   <table border="1">
      <colgroup>
         <col width="50"></col>
         <col width="100"></col>
         <col width="150"></col>
         <col width="50"></col>
      </colgroup>
      <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>
      </tr>
   </table>
</body>
</html>

HTML 表格由其行定義。因此，應用於行的任何樣式都將覆蓋應用於列的任何樣式。僅可以透過 <col> 元素管理少量 CSS 屬性這一事實使情況進一步複雜化。以下是可控制的屬性

CSS border 屬性：border 屬性用於在元素周圍建立邊框，例如 div、影像或文字。
CSS background 屬性：CSS 的 background 屬性用於設定元素的背景。
CSS width 屬性：width 屬性設定元素內容區域的寬度。
CSS visibility 屬性：CSS visibility 屬性允許您顯示或隱藏元素，而不會更改文件的佈局，而隱藏元素會佔用空間。

文字的顏色無法更改，但是您可以更改列中每個單元格的背景顏色。如果您的其中一行有顏色，則行顏色將優先於列顏色。<col> 標籤在 HTML 中不需要任何型別的結束標籤。

支援的瀏覽器

標籤
col	是	是	是	是	是

html_tags_reference.htm

列印頁面