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
element aims to solve the problem by providing a mechanism for selecting
columns and applying the necessary attributes. The idea is that you can
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.
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
col element is used to set different
class attributes on the first
three columns in the table (which can then be styled with
<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.
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.