Tables In HTML 4 Strict

Exploring Tables – Alignment

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.

Replacing The Deprecated 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:

Example 7:

Alignment of Tables Using HTML versusCSS

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

1. The observed behaviour depends on browser & version, but may have no effect
2. The HTML align attribute can also take the value ‘char’; this will be discussed separately
3. The vertical-align property has other values that do not apply to tables

Markup & CSS:

<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.

D. C. Stone, last updated July 26th 2010