| Depr. | Empty | Version |
|---|---|---|
| No | Yes | HTML 4 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
Description
Tables are primarily constructed by defining rows, but it’s often
useful to define their structure as columns as well. Unlike rows, columns
don’t directly contain any cells; rather, they implicitly group adjacent
cells between rows. This may not seem important, but it means that there
isn’t an easy way to select a column for styling purposes (the best you
could do was to set a width attribute on the
top-most table cells, be they th or
td elements).
The col
element aims to solve the problem by providing a mechanism for selecting
columns and applying the necessary attributes. The idea is that you can
use the col element to define all of your columns’
attributes—alignment, colors, and so on, up-front, before you begin the
process of writing out each row.
The
col element can appear on its own (as shown in the HTML
example below, there’s one col for each of the
subsequent rows’ cells, with alignments set only for the first three
columns), but it can also appear inside a colgroup element. It is important to note
that if you use one or more colgroup then all
cols must be enclosed in one or more
colgroups
Example
Below, the
col element is used to set different class attributes on the first
three columns in the table (which can then be styled with
CSS):
<table border="1">
<col class="col1"/>
<col class="col2"/>
<col class="col3"/>
<col/>
<tr>
<th colspan="4" scope="col">Work Contact Points</th>
</tr>
⋮
</table>
Use This For …
This element is used for identifying individual table columns and applying styles to them (either using HTML attributes or CSS), rather than repeating the styles for each cell, row after row after row.
Compatibility
| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 8.0 | 1.0 | 1.5 | 2.0 | 3.0 | 3.5 | 1.3 | 2.0 | 3.1 | 4.0 | 9.2 | 9.5 | 10.0 | 2.0 |
| Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full |
This element has reasonable support, though the breadth of support depends heavily on which attributes are applied. Attribute support varies between browsers (it would be so much easier if all browsers tested, supported, and ignored the same set of attributes, but unfortunately, this is not the case).
A better approach is to apply
class names to the respective
col elements, then let CSS styling take care of
alignment, colors, widths, and so on.
In this Section
- align
aligns text in cells that are related to the col element - char
sets the character to which cell contents should align - charoff
defines the number of characters by which cell contents will be offset from the char - span
defines the number of consecutive cells to which col attributes should apply - valign
sets the vertical alignment of text in table cells - width
sets the width of the column
