In the preceding pages, we looked at the basics of tables structure and markup in HTML, and the use of HTML and CSS for simple formatting. Here, we address the issue of alignment – either of text within a table cell, a caption with respect to its table, or a table with respect to its containing element (e.g. page). The next page will discuss formatting individual cells and specific columns and rows.
align Attribute:As noted earlier, HTML 4 deprecated the align attribute, which was
previously used to align text, tables, cell contents, other objects, and position
captions. CSS replaces this with the text-align property for text.
The caption-side property was introduced specifically to deal with table captions, although it only takes the values of ‘top’ and ‘bottom’, with horizontal text alignment being covered by text-align. Vertical positioning of content within table cells is handled in CSS using the vertical-align property.
This just leaves the issue of positioning the table itself, which is not intuitively obvious. It can be achieved, however, by manipulating the table’s width and margins. Just like borders and padding, the set of margin properties and shorthand forms can be applied to almost all elements, and can be specified as either % values or specific dimensions in units of px, em, etc. In addition, a margin can be specified as ‘auto’, meaning that the value is calculated from the size of the element to which it is applied, the size of that element’s container, and the opposing margin.
Practically speaking, what this means is that a table can be “aligned” to the
left side of a page by setting margin-left: 0 and margin-right: auto;
swapping those aligns the table to the right side of the page. Finally, setting both
margins to ‘auto’ (and having a width less than that of the container!) centres
the table horizontally. The following example summarizes this information:
| Element | HTML (deprecated) | CSS | ||
|---|---|---|---|---|
| Attribute | Value(s) | Property | Value(s) | |
| table | align | left | margin-left | 0 (zero) |
| margin-right | auto | |||
| center | margin-left | auto | ||
| margin-right | auto | |||
| right | margin-left | auto | ||
| margin-right | 0 (zero) | |||
| caption | align | top | caption-side | top |
| bottom | bottom | |||
| left [1] | text-align | left | ||
| – | center | |||
| right [1] | right | |||
| th, td | align [2] | left | text-align | left |
| center | center | |||
| right | right | |||
| justify | justify | |||
| valign | top | vertical-align [3] | top | |
| middle | middle | |||
| bottom | bottom | |||
| baseline | baseline | |||
<table class="simpleTableCentred">
<caption>Alignment of ... </caption>
<thead>
...
table.simpleTableCentred {
border: 1px solid #000099;
border-collapse: collapse;
border-style: double;
border-width: 3px;
margin: 0 auto;
padding: 0.5em;
width: 90%;
}
table.simpleTableCentred caption {
caption-side: bottom;
text-align: center;
padding-top: 0.5em;
width: auto;
}
table.simpleTableCentred th,
table.simpleTableCentred td {
border: 1px solid #000099;
padding: 5px;
text-align: center;
}
table.simpleTableCentred th {
background-color: #FFFFCC;
color: #000099;
vertical-align: bottom;
}
table.simpleTableCentred thead {
border-bottom: 2px solid #000099;
}
The markup is essentially the same as previous examples. Horizontal
and vertical merging of cells is accomplished by setting the colspan
and rowspan attributes, respectively, within the relevant opening
<th colspan="2"> and <td rowspan="6">
tags.
The first rule is a combination of those from
example 4 (redux) and
example 6, with the addition
of the shorthand property margin: 0 auto to set the
top/bottom margins to zero and the left/right margins (to auto)
in order to centre the table. Note that all three shorthand properties
(border, margin, and padding) can be expressed in the form
property: trbl, property: tr bl,
or property: t r b l where t,r,b,l
refer to the top, right, bottom, and left, respectively.
The second selection rule sets properties for the table caption. Note that some of these are actually the default values and so are redundant; check the CSS specification for details.
The third rule sets the borders as previously, adds 5px of padding between the cell contents and all four borders, and centres the text horizontally within both TH and TD cells. This is actually redundant for TH cells, as you might have noticed from the earlier examples. We could also specify the vertical-align property for all cells, although this would also be redundant in the present example (but see next rule).
The fourth rule sets the foreground and background colours for TH cells.
It also sets the vertical alignment of TH cells to bottom,
which ensures that the text in the first column heading – which
is merged down two rows – aligns with the text in the lower set
of headings in the remaining columns.
The fifth and final selection rule is the same from the previous example.