HTML and CSS Reference
Figure 14-3. By default, table captions are displayed above the table
■ The <caption> element must come immediately after the opening <table> tag, even if you want to
display the caption below the table.
Defining Table Columns
HTML tables are constructed as a series of table rows rather than columns. The column structure is simply
implied by the cells stacked on top of one another in each row. However, you can also define columns in the
HTML markup by adding one or more <colgroup> elements immediately after the table caption. If the table
doesn't have a caption, the <colgroup> elements come immediately after the opening <table> tag. A <colgroup>
can optionally contain <col> elements to identify individual columns.
The <colgroup> and <col> elements are not displayed. They're used purely to identify column groups or
individual columns for layout and styling. In HTML 4.01 and XHTML 1.0, you can use the align , valign , and
width attributes in both tags to control the horizontal and vertical alignment and width of all cells within a
column group or column. However, these attributes are no longer valid in HTML5.
■ All browsers—even as far back as iE 4—support <colgroup> and <col> . Although they've been around
for a long time, these elements are rarely used. i've included them here because they occupy a position in the order
browsers construct tables, as described in “How browsers lay Out Tables” later in this chapter.
You specify the number of columns in the group with the span attribute. So, let's say you have a five-column
table, and you use the first column for labels and the remaining columns for data, you could style the column
groups using classes like this:
<colgroup span="1" class="labelcol">
<colgroup span="4" class="datacol">
Alternatively, you can list individual columns using <col> tags inside <colgroup> tags like this: