Floating in the Pre-Css Era

Today I learned a fact about HTML which had somehow alluded me for many years. Having been working on web-related projects for so long, the mind boggles as to how I could possibly have not picked up on this in all that time.

With CSS, one can use the float property to make text flow to the left or to the right of an element rather than have the element occupy the entire row.

But what I hadn’t realised until today was that the align attribute (that’s the plain old HTML attribute, not a CSS property) of the table element can be used to the same effect. Setting the attribute to “left” or “right” will float the table to the left or right respectively. So, for example, three left-aligned tables will follow each other on the same line rather than being rendered vertically one below the other:

<table align="left" border="1">
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</table>
<table align="left" border="1">
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</table>
<table align="left" border="1">
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</table>

foo bar
foo bar
foo bar
foo bar
foo bar
foo bar


And the clear attribute of the br tag can be used to do the same thing as the clear CSS property would: force the following text to start below, undoing the effect of floating:

<br clear="all">

It’s a feature of HTML which has little purpose these days, what with CSS being the preferred way to change the presentation of page elements, but it’s nice to know about nonetheless.

Post a Comment