HTML - <col> Tag

HTML <col> tag is used to offer information about columns. Each column within a <colgroup> element is given column characteristics by the HTML <col> tag.

Instead of repeating the styles for each cell and each row, you may apply styles to entire columns by using the <col> tag. This element appears to be a highly useful element for formatting columns in a table, and it does have some advantages. However, there is a significant issue: the table's individual cells aren't truly contained within the column.

Syntax

<col attribute = "value">

Attribute

HTML col tag supports Global and Event attributes of HTML. Some Specific attributes as well which are listed bellow.

Attribute	Value	Description
span	number	Specifies the number of consecutive columns the <col> element spans.
align	left right center justify	Specifies the alignment of text content(Deprecated).
bgcolor	color	Specifies the background color of each column cell(Deprecated).
char	character	Specifies the alignment of the content to a character of each column cell(Deprecated).
charoff	number	Specifies the number of characters to offset the column cell content from the alignment character specified by the char attribute(Deprecated).
valign	baseline bottom middle top	Specifies the vertical alignment of each column cell(Deprecated).

Examples of HTML col Tag

Bellow examples will illustrate the usage of col tag. Where, when and how to use col tag to offer information about columns.

Using col tag with Table

Following is an example where we are going to use the <col> tag in the HTML table.

<!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>

Specifying Consecutive Columns

Consider another scenario where we are going to use the span attribute with the <col> tag.

<!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>

Defining Column Width

Let’s look at the following example, where we are going to use the width attribute along with the <col> tag.

<!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 tables are defined by their rows. Because of this, any style applied to a row will take override over any style applied to a column. The fact that only a small number of CSS properties may be managed by the <col> element further complicates matters. The following are the properties that are controllable:

CSS border Property: The border property is used to create a border around an element, such as a div, image, or text.
CSS background Property: The background property of CSS is used to set the background of an element.
CSS width Property: The width property sets the width of an element's content area.
CSS visibility Property: CSS visibility property allows you to show or hide an element without changing the layout of a document, while hidden elements take up space.

The colour of the text cannot be changed, however you can change the background colour of each cell in a column. The row colour will take precedence over the column colour if one of your rows is coloured. The <col> tag doesn’t require any kind of closing tag in HTML.

Supported Browsers

Tag
col	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm