totn HTML

HTML: <col> tag

This HTML tutorial explains how to use the HTML element called the <col> tag with syntax and examples.

Description

The HTML <col> tag defines properties for columns within the <colgroup> tag. This allows you to apply formatting or add classes to a column or group of columns instead of each individual cell. This tag is also commonly referred to as the <col> element.

Syntax

In HTML, the syntax for the <col> tag is: (example of a table where the first three columns have a light orange background color of #FFF3E0 and the last column has an orange background)

<body>
<table>
  <colgroup>
    <col span="3" style="background-color:#FFF3E0;">
    <col style="background-color:orange;">
  </colgroup>
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Oranges</td>
      <td>45</td>
      <td>$2</td>
      <td>$90</td>
    </tr>
  </tbody>
</table>
</body>

Sample Output

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <col> tag:

Attribute Description HTML Compatibility
align Horizontal alignment of text in each cell within the column. It can be one of the following values: left, center, right, justify, char Deprecated in HTML 4.01, Obsolete in HTML5, use CSS
bgcolor Background color of each cell within the column Deprecated in HTML 4.01, Obsolete in HTML5, use CSS
char Set the character to align the cells in a column Deprecated in HTML 4.01, Obsolete in HTML5
charoff Number of characters to offset column data from the alignment characters (in char attribute) Deprecated in HTML 4.01, Obsolete in HTML5
span Integer value indicating the number of columns that the <col> tag spans HTML 4.01, HTML5
valign Vertical alignment of text of each cell within the column. It can be one of the following values: baseline, bottom, middle, top Deprecated in HTML 4.01, Obsolete in HTML5, use CSS
width Default width for each column. The width can be expressed in pixels, a percentage value or relative width. HTML 4.01, Obsolete in HTML5

Note

  • The HTML <col> element is found in an HTML table within the <body> tag.
  • The <col> tag is used in the <colgroup> section to define properties for the columns.

Browser Compatibility

The <col> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <col> tag below, exploring examples of how to use the <col> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <col> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <colgroup>
    <col span="3" style="background-color:#FFF3E0;">
    <col style="background-color:orange;">
  </colgroup>
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Oranges</td>
      <td>45</td>
      <td>$2</td>
      <td>$90</td>
    </tr>
  </tbody>
</table>
</body>

</html>

In this HTML5 Document example, we have created a table with <colgroup>, <thead> and <tbody> sections. Within the <colgroup> section, we've used two <col> tags. The first <col> tag groups the first three columns and sets the background color of the columns to a light orange color which is the hexadecimal value of #FFF3E0. The second <col> tag groups the 4th column and sets its background color to orange.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <col> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <colgroup>
    <col span="3" style="background-color:#FFF3E0;">
    <col style="background-color:orange;">
  </colgroup>
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Oranges</td>
      <td>45</td>
      <td>$2</td>
      <td>$90</td>
    </tr>
  </tbody>
</table>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have created a table with <colgroup>, <thead> and <tbody> sections. Within the <colgroup> section, we've used two <col> tags. The first <col> tag groups the first three columns and sets the background color of the columns to a light orange color which is the hexadecimal value of #FFF3E0. The second <col> tag groups the 4th column and sets its background color to orange.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <col> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <colgroup>
    <col span="3" style="background-color:#FFF3E0;" />
    <col style="background-color:orange;" />
  </colgroup>
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Oranges</td>
      <td>45</td>
      <td>$2</td>
      <td>$90</td>
    </tr>
  </tbody>
</table>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have created a table with <colgroup>, <thead> and <tbody> sections. Within the <colgroup> section, we've used two <col> tags. The first <col> tag groups the first three columns and sets the background color of the columns to a light orange color which is the hexadecimal value of #FFF3E0. The second <col> tag groups the 4th column and sets its background color to orange.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <col> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <colgroup>
    <col span="3" style="background-color:#FFF3E0;" />
    <col style="background-color:orange;" />
  </colgroup>
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Oranges</td>
      <td>45</td>
      <td>$2</td>
      <td>$90</td>
    </tr>
  </tbody>
</table>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have created a table with <colgroup>, <thead> and <tbody> sections. Within the <colgroup> section, we've used two <col> tags. The first <col> tag groups the first three columns and sets the background color of the columns to a light orange color which is the hexadecimal value of #FFF3E0. The second <col> tag groups the 4th column and sets its background color to orange.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <col> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <colgroup>
    <col span="3" style="background-color:#FFF3E0;" />
    <col style="background-color:orange;" />
  </colgroup>
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Oranges</td>
      <td>45</td>
      <td>$2</td>
      <td>$90</td>
    </tr>
  </tbody>
</table>
</body>

</html>

In this XHTML 1.1 Document example, we have created a table with <colgroup>, <thead> and <tbody> sections. Within the <colgroup> section, we've used two <col> tags. The first <col> tag groups the first three columns and sets the background color of the columns to a light orange color which is the hexadecimal value of #FFF3E0. The second <col> tag groups the 4th column and sets its background color to orange.

Share on: