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

打印页面