Cyber Week

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

Columns HTML

Reading time 2 min
Published Mar 19, 2019
Updated Oct 1, 2019

Columns HTML: Main Tips

  • The <col> element defines and styles columns in HTML.
  • The <colgroup> element is the parent of <col>.
  • HTML <col> tag might seem suitable for styling columns, but it has limitations and disadvantages.

Use of col

The HTML <col> element specifies attributes for columns in a <colgroup> element.

Example
<table>
  <colgroup>
    <col style="background-color: bisque;">
  </colgroup>
  <tr>
    <th>Subject</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>87</td>
  </tr>
</table>

Tip: you don't need to include the closing <col> tag in HTML documents.

There are several issues with the use of <col> element for grouping columns in HTML:

  • Columns do not actually include the individual cells: it's rows, not columns, that define tables in HTML. Therefore, the styles used on rows can replace the styles of columns in HTML.
  • The <col> element manipulates a limited number of CSS properties: visibility, width, background, and border. For example, you cannot change the text color.

span

The span attribute specifies how many columns the <col> element contains.

Example
<table>
  <colgroup>
    <col span="1" style="background-color: cornsilk;">
    <col style="background-color: bisque;">
  </colgroup>
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>White Tape</td>
    <td>$23</td>
  </tr>
</table>

Deprecated Attributes

align

It set the horizontal alignment of content belonging to the <col> element. Not supported in HTML5: apply the CSS text-align property instead.

Example
<table style="width: 100%;">
  <col align="left">
  <col align="right">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Biscuit</td>
    <td>$5</td>
  </tr>
</table>

char

It indicated the character to align the cells in a table to. Not supported in HTML5.

Example
<table style="width: 100%;">
  <col align="left">
  <col align="char" char=".">
  <tr>
    <th>Name</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>Ryan</td>
    <td>$100.00</td>
  </tr>
  <tr>
    <td>Franklin</td>
    <td>$70.00</td>
  </tr>
</table>

charoff

It specified how many characters will offset the column data from the alignment characters. Not supported in HTML5.

Example
<table style="width: 100%;">
  <col align="left">
  <col align="char" char="." charoff="2">
  <tr>
    <th>Name</th>
    <th>Earnings</th>
  </tr>
  <tr>
    <td>Patrick</td>
    <td>$140.00</td>
  </tr>
  <tr>
    <td>Samantha</td>
    <td>$220.00</td>
  </tr>
</table>

valign

It set the vertical alignment rules for the content of the <col> element. Since HTML5 does not support this attribute, use vertical-align property instead.

Example
<table style="height: 200px;">
  <col valign="top">
  <col valign="bottom">
  <tr>
    <th>Name</th>
    <th>Position</th>
  </tr>
  <tr>
    <td>Daniel</td>
    <td>Executive</td>
  </tr>
</table>

width

It defined the HTML table column width for a <col> element. Not supported in HTML5: use the CSS property called width as an alternative.

Example
<table>
  <col width="130">
  <col width="80">
  <tr>
    <th>Name</th>
    <th>Department</th>
  </tr>
  <tr>
    <td>Daniel</td>
    <td>Management</td>
  </tr>
  <tr>
    <td>Patrick</td>
    <td>Sales</td>
  </tr>
</table>

Browser support

Browser image
Chrome
1+
Browser image
Edge
All
Browser image
Firefox
1+
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
All

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All