HTML - <col> Tag

Each column within a <colgroup> element is given column characteristics by the <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.

The <col> 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.

The <col> element is not the actual column; it is just used to offer information about columns. Instead of columns, 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 −

  • border
  • background
  • width
  • visibility

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, but in XHTML it requires a closing tag (</col>).

Syntax

Following is the syntax for HTML <col> tag −

<col attribute = "value">

Example

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>

On running the above code, the output window will pop up, displaying the table along with CSS applied to the column using the <col> tag.

Example

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>

When we execute the above code, it will generate an output consisting of a table along with CSS applied to the 2columns that we mentioned with the <col span=2> displayed on the webpage.

Example

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>

On running the above code, an output window will pop up consisting of a table with different widths displayed on the webpage.

html_tags_reference.htm
Advertisements