Alignment of tables in HTML

There are two common problems with table alignment in HTML:

Several versions of Netscape do not obey an ALIGN=CENTER attribute in a TABLE element. The common solution is to enclose the entire TABLE element into a CENTER element as well.
An ALIGN=LEFT or ALIGN=RIGHT attribute in a TABLE element may or may not cause normal text float around the table, depending on the browser. Typical browsers apply floating. As a practical consideration, notice that text alongside with a table may impose unnecessary requirements on browser window width. (Such floating can be prohibited by using a BR tag with CLEAR attribute.) On the other hand, there is actual variation in browser behavior when there are consecutive tables with ALIGN attributes.

There isn't actually much more to be said about the first issue, and this document concentrates on the second one.

Introduction: the ALIGN attribute in TABLE

The TABLE element in HTML 3.2 may have an ALIGN attribute. It specifies the horizontal alignment of the entire table (as opposite to ALIGN attributes in TR, TD, and TH elements which affect the alignments of table cell contents). Its value is one of LEFT, CENTER, RIGHT, and the default is left alignment.

The problem: to float or not to float?

The actual representation is not fixed in HTML 3.2, apart from saying that the ALIGN attribute "specifies the horizontal placement of the table relative to the current left and right margins". (Obviously the meanings of the three possible values are regarded as self-evident.)

In particular, assuming a TABLE element with ALIGN=RIGHT (or ALIGN=LEFT), should the table be presented on the right so that normal text floats on the left (or on the right) of the table? Schematically speaking, should

<TABLE ALIGN=RIGHT>
<TR> <TD> tablestuff </TD></TR>
</TABLE>
normal text

be presented as

normal text                             tablestuff

or as

                                        tablestuff
normal text

or perhaps in some other way? In practice, most browsers seem to use the first interpretation. (Notice that in this interpretation, there are alternatives: should the text which appears in the HTML file before the TABLE float around it, or should the text after it do so, or should both of them do so? Could this even vary within a browser, not just between browsers?)

What the specifications say

The HTML 3.2 specification says only the things mentioned above about the issue; to quote it, is says as follows:

align
This takes one of the case insensitive values: LEFT, CENTER or RIGHT. It specifies the horizontal placement of the table relative to the current left and right margins. It defaults to left alignment - -

whereas RFC 1942 says more:

ALIGN
Defines the horizontal position of the table relative to the current left and right margins. ALIGN=CENTER centers the table midway between the left and right margins. To allow text to flow around the table, use ALIGN=LEFT to position the table at the left margin, with text flowing around its right handside, or use ALIGN=RIGHT to position the table at the right margin, with text flowing around its left handside.
Note you can use <BR CLEAR=LEFT> after the table element if you want to avoid text flowing along side the table when you have specified ALIGN=LEFT, or <BR CLEAR=RIGHT> for a right aligned table. Greater control over textflow is possible using style sheets.

Since only the use of an BR element after a TABLE element is discussed, the intention seems to be that only text following a TABLE element may flow around it.

Interpretation

The HTML 3.2 specification also says that HTML 3.2 includes a subset of RFC 1942, but this shouldn't be taken too normatively. And after all, leaving some presentation issue unspecified (browser-dependent) belongs to what can be called subsetting.

But HTML 3.2 tables being based on the model in RFC 1942, it seems that the wording in HTML 3.2 is to be interpreted as a deliberate omission of the more exact specification in RFC 1942.

Thus, I conclude that an HTML 3.2 compliant browser is neither required to nor prohibited from flowing regular text around a table with ALIGN=RIGHT (or ALIGN=LEFT). However, despite the vagueness of the description of the BR element, it seems that a suitable BR with CLEAR attribute should prohibit such flowing.

Practical things: do you really want your text float around tables?

Although it is typical in printed publications to have text appear alongside with a table (or an image), such situation is not always desirable on the Web. It may impose unnecessary requirements on browser window width, even requirements which cannot be satisfied within user's screen (without scrolling).

In any case, you should try to make text appear alongside with a table (or an image), either by floating or some other method such as nested tables, only if there is a logical connection between the text and the table (or the image).

Consecutive tables with ALIGN attributes

Considerations somewhat similar to those above apply to using two tables which are (in the HTML file) consecutive and which have ALIGN=LEFT in one and ALIGN=RIGHT in the other. It may or may not result in the two tables presented side by side.

The specifications seem to be quite silent about such situations, since the word "text" can hardly be interpreted as applying to a table.

In fact, popular browsers differ in their treatment of such situations: Netscape shows the tables side by side, whereas Internet Explorer displays then first one left aligned, then below that the second one right aligned. A more reliable (and more logical) way of achieving such presentation is to use nested tables.

Jukka Korpela, jkorpela@malibutelecom.com
This document belongs to the context of Learning HTML 3.2 by Examples
The URL for this document is ../HTML3.2/tablealign.html
Created: October 27, 1997