How to convert manually your HTML tables to CSS

After explaining in our previous article
why it is generally a good idea to get rid of HTML tables it is time to give some practical
advise on how to actually convert the tables to tableless HTML and CSS code.
In this article we describe a couple of conversion methods that are generic and can be applied to any web page.

First we need to decide which HTML tag or tags could be used to replace the table
elements - TABLE, TR, TD (for simplicity's sake we will ignore other seldom used table
elements like THEAD, TFOOT, TH and TBODY). We choose the replacement tag based on
the following criteria:

The replacement tag should have as few side effects as possible, i.e. we do not
want it to affect the style of the inner tags and text, because we will be using CSS
styles to define the appearance of the enclosed tags and text.

The replacement tag should have a block style just like the replaced TABLE, TR and
TD tags.

From all HTML elements DIV and SPAN elements are the only two tags that are used purely
for grouping child elements and text and do not affect the CSS style of their nested elements.
Of these two elements DIV is a block element and SPAN is an inline element. This leaves
us with DIV as the natural replacement for the table elements.

The TD elements however are a bit more problematic to convert. Each DIV element forms a
new block so it is not so easy to place more than one DIV element on the same line.
Applying floating style however allows us to change the DIV element behavior and
to place several DIVs side by side:

Please note that our pseudo table from the example above shows the following peculiarities:

When their width is not specified DIV elements tend to expand to take all available
horizontal space. Unlike DIVs real tables tend to shrink horizontally and take just
enough horizontal space as to display their content. Since there is no easy and portable
way to simulate that behavior with DIV elements we specify the table width explicitly.

Table cells form a grid in which all cells in a given column have the same width and all
cells in a given row have the same height. Again there is no portable way to simulate this
behavior on all browsers so we force equal cell widths by specifying them explicitly.

We use the "clear: both" style in order to specify that the DIV emulating the table row
will be placed on the next line.

For our example we use inline styles, but if your HTML file contains many tables, rows
and cells you will probably be better off moving the inline styles to embedded or external
CSS styles.

The second approach

Another possible solution is to use DIV elements only for the table and the cells and
completely ignore the TR elements. In this case we will have to use absolute positioning in
order to place the cells and our sample table will be converted to:

We are positioning all cells absolutely. This means that we need to know the widths and heights of
all cells beforehand because we will use these dimensions in order to specify the cell width, height and
position in its CSS style.

This solution shows clearly that there is a trade-off between the number of CSS style rules and the
number of HTML elements. The second approach minimizes the number of HTML tags but increases the number of
CSS style rules. The original solution using tables had a total of 10 elements (one table, tree rows and
six cells), while the new solution has only seven DIV elements. However the tableless code also adds
seven CSS style rules.

Just like with the first solution it is better to move the inline styles to embedded or external ones.

Possible optimizations

The first optimization of the above code would be to move inline styles to an extternal file so that
web crawlers that do not understand CSS would not have to download the CSS styles. In this case our HTML
code would look like: