HTML - <col> Tag

Quiz

Introduction to <col> Tag

The HTML <col> tag is used to define the column properties inside the <table>. It allows you to specify the styling for specific columns within the table. It is placed inside the <colgroup> element, which groups columns together for applying common styles.

The <col> tag is commonly used when we need to apply styles to entire column rather than individual table cells. It does not render any visible content itself but impacts to layout of the table by affecting the columns that it references.

Syntax

Following is the syntax of HTML <col> tag −.

<col attribute = "value">

Attributes

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).

Example : Basic Usage

In the following example, we are going to consider the basic usage of the <col> tag.

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

Example : Setting Col Width

Lets look at the following example, where we are going to fix the width of the columns.

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

Example : Using span Attribute

Consider the following example, 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>

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 doesnt require any kind of closing tag in HTML.

Supported Browsers

Tag
col	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page