Using CSS Tables

If your page was created using HTML tables and you are converting it to use CSS tables instead then it might be tempting to recreate the entire table structure that you had in your HTML using CSS. This is totally the wrong approach to using CSS tables.

Tables themselves are rather limited in the page layouts that they can handle and so simply replacing an HTML table with a CSS table has as its only benefit the fact that you have separated the code for the page appearance out from the content. In many cases there are alternative ways of producing a part (or even all) of your page appearance which are much simpler to implement than CSS tables and which may also result in your web page being more flexible than the table version is.

The thing to remember is that CSS tables work in a completely different way to HTML tables - which is only to be expected since they serve totally different purposes. Once you familiarise yourself with these differences it will be far more obvious as to what in your web page can actually benefit from being defined using CSS tables and to reserve the use of CSS tables to where it actually provides a benefit over the alternative approaches.

HTML tables are designed to display tabular data. Each properly defined HTML table with have a <table> tag, one or more <tbody> tags, several <tr> tags, and lots of <td> tags. Of these the only tag which HTML considers to be optional is the <tbody> tag and any <tr> tags that you don't enclose in a <tbody> tag will have one generated to enclose them (something important to remember when coding your CSS and JavaScript since the tag will be there by the time that the page displays whether you code it or not). There are number of other optional tags that can be used within a table and these optional tags will often be used when using a HTML table for its intended purpose of displaying tabular data within your web page. Where a HTML table is being used to display tabular data you are using the semantically correct HTML tags to define your data and any attempt to remove the HTML table and replace it with a CSS table would be totally wrong.

CSS tables are designed to define the appearance of their content and so are the correct way of using tables for page layout. Since the purpose of using a table for layout is totally different from that of using a table to display tabular data there are no optional properties to use for defining column or row headings or for defining anything beyond a basic grid structure. In fact you might do better to think of CSS tables as grid definitions rather than table definitions. There are three properties that can be used to define CSS tables (or grids) and these are display:table, display:table-row, and display:table-cell. Since the properties themselves refer to tables I'll continue referring to the grids that CSS can create using these properties as CSS tables.

While with HTML tables all of the basic tags for defining the basic table structure are required, with a CSS table the display:table and display:table-row properties are optional and you don't even need an HTML tag for those optional CSS proeprties to attach to in order to be able to define a valid CSS table. The purpose of those two optioanl properties is to remove ambiguity. When you have more than one table-cell (as you always will when using CSS tables since one by itself does nothing) there are at least two different ways in which the cells can be arranged to form a grid. Even with the simplest case of two cells we can have them either side by side or vertically. With more cells we may have even more ways of arranging them (for example there are four ways to arrange six cells).The default if you don't specify any table-row is for all of the cells you define to be placed side by side and so where that is what you require you can leave out the table and table-row properties and the browser will still handle your CSS table correctly.

There will be situations where you need to place table-row proerties in your page and perhaps even times where you need to use table as well but there is no reason for including them in your page at all unless they are really needed in order to define your grids correctly.

The main benefit to using CSS tables is that it allows you to place elements side by side that will always be the same height or to stack elements vertically where they will always be the same width. If that isn't what you are trying to achieve then a CSS table is the wrong construct to be using and you should be looking at using some other CSs that is better suited to your goal. While CSS tables do have a place in defining the appearance of your web page they should therefore not be used to lay out the entire page, only those parts of the page where the grid structure that they provide is needed. As such most pages using CSS tables will only need to use the simplest of the table constructs and the more complex structures that CSS tables can create will only be needed in extremely rare circumstances.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow