Use HTML tables, even with CSS styling

After a previous post about the reasons there are not to use the HTML tables (and to prefer CSS tables), I want to come back to this issue with my own experience.

When I went to the fifth version of this web site interface (the one you see at the time of posting this article), I tried to build the site theme using as much CSS as possible in order to ease future migrations and to lighten the result by separating content and styles. However, it soon appeared clear that the 3-column organization (with footer) i sone of the most difficult contruction for CSS tables and it always creates problems of rendering on different browsers.

This is why I decided to choose the best of both worlds. Let’s clarify this position. HTML tables are very simple to build and are correctly implemented in the vast majority of Internet browsers (their definition is so old now…). I decided to build the basic squeleton out of HTML tables. But I limited myself to the structure only. All the styling and formatting is done in CSS tags.

This is a very powerful solution. Use one technique for what it’s best. HTML tables allow easy definition of columns, clear grouping, etc. CSS tags allow splitting content and structure, defining clearly sizes, margins, paddings, borders, cell backgrounds, colours, etc. This gives a theme that is very tolerant (e.g. HTML tables behave well when an image is sized erroneously big -a quite common error- and forces the column dimensions). But the styling is very flexible in CSS.

If you are interested, I invite you to check the sources of this page and the associated CSS file.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.