HTML <col> Tag


ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.

If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

PDF mobile

The <col/> Tag in HTML 5

The <col> tag can only be used inside a table colgroup element and provides style information for a column in an HTML table. For example, in the HTML table demo below there is a style for each column that sets the column width to 20%, 30% and 50%, respectively.

Table Caption
Multiple Column Heading
First Column Heading Second Column Heading
This is an example of an HTML table footer.
Row 1 Row 1 Column 1 Row 1 Column 2
Row 2 Row 2 Column 1 Row 2 Column 2

This is an actual working demo of the table column example code below. (Do View Source to verify that this page is using the HTML 5 DOCTYPE. You can also verify it is Valid HTML 5 using the HTML Validator. Try using it to validate URLs with HTML examples from other places that claim to be HTML 5 web sites!)

See the tutorial on Creating HTML Tables for full details on how to create an HTML table using the HTML table tags together.

<col/> Tag Syntax

Rules for coding HTML col/ elements
<col .../>

<col/> Content Model

Contents of the col element

Content: Empty. All properties are coded using attributes.

Since the <col/> tag is a void element, it is not allowed to have any content, even HTML comments and therefore should always be coded as a self-closing standalone tag, ending with the delimiter string /> rather than just > (<col .../>).

<col/> Tag Attributes

Attributes of the <col> tag
global attributes In addition to the personal attributes of the <col> tag below, any of the common HTML attributes can also be coded.

<col/> Tag Examples

Examples of the col tag in HTML 5

Here is the HTML code for the table demo above:

   <caption>Table Caption</caption>
      <col style="width: 20%"/>
      <col style="width: 80%"/>
         <th rowspan="2"></th>
         <th colspan="2">Multiple Column Heading</th>
      <tr style="vertical-align: bottom">
         <th>First Column Heading</th>
         <th>Second Column Heading</th>
      <tr><td colspan="2">This is an example of an HTML table footer.</td></tr>
         <td>Row 1 Column 1</td>
         <td>Row 1 Column 2</td>
         <td>Row 2 Column 1</td>
         <td>Row 2 Column 2</td>

Changes in HTML 5 - <col/> Tag

What's new in HTML 5
Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the col/ element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5