When to use a Table

Before the CSS commands for positioning elements in the page were supported by browsers, the only way to place elements in your page anywhere other than directly under one another was to use a table in the HTML. Once all the popular browsers did support the CSS then it became possible to lay out web pages with elements positioned next to or even on top of each other without using a table. Many people at that point decided that tables were bad and that web pages should use divs and CSS instead.

Now there is nothing inherently wrong with using HTML tables in your web page. The tags were added to HTML long before anyone thought of using them to do a page layout. They were originally added so that tabular data could be displayed properly. The HTML table tags are still the right ones to use when their content is to be tabular data.

So how do we know when the content that we are thinking of placing in a table is actually tabular data and that we are not just using the HTML table for layout? Well there are a number of things that will provide us with clues as to whether the content we are thinking of placing in the table is tabular data or not.

The most obvious clue is whether you want the cells in your table to have borders or not. If the content will look perfectly reasonable with a visible border around each cell in the table then that is a good indication that what you have is tabular data and should be in a table. Even if you decide that you will not actually display the borders your content is probably tabular data if the absence of borders is not essential for the content to display meaningfully. There is at least one browser for mobile devices that always displays table cell borders regardless of any attempt by the page to hide them and so even where you prefer not to display borders anyone using that browser will still see the cell borders.

Another good indication that you have tabular data is when you have column and row headings for the content of your table. Placing all the elements in the top row of the table inside of <th> instead of lt;td> tags and wrapping that row inside of a <thead> means that you are most likely using the correct semantic tags for the content. Similarly when you are using <th> instead of lt;td> tags for the first column of the table.

With tabular data the entire content of your table is related to something so having some sort of "heading" that describes what all of the tabular data is will help to make the table more understandable. The appropriate tag to use to give a table a "heading" is <caption>.

Where you don't have a single "heading" for the table or headings for the columns and rows, or where having borders around the individual cells would be completely meaningless then most likely what you have is not tabular data and therefore it should not be placed in a table - at least not in an HTML table. Where you want to use a grid structure for layout purposes then an HTML table is not the correct way to code the content. Instead you should use whichever tags semantically identify the individual pieces of your content (only using a div when no more semantic tag exists). You can then apply the grid structure that you want using a CSS table instead of an HTML one.

A CSS table uses display:table, display:table-row and display:table-cell to arrange the content of the web page using a grid structure. By applying these styles to the tags wrapping the content of the page we can establish the same page layout as used to be done using HTML tables for layout but with more appropriate semantic tags wrapped around the content instead. In addition we can apply that style selectively based on the device that the visitor is using and the display area available in their browser and use a different layout when the display area is too wide or too narrow for a particular grid layout to look right - something that you can't do when you embed the layout in the HTML.

The only disadvantage to using CSS to define your layout table is that those commands are not recognised in Internet Explorer 7 but as very few people still use such an antiquated browser that should not be of any concern.

So when you want to display tabular data in the web page or when you want to layout the page using a grid you can use a table. The only difference between the two is where you define the table. Back in the days before CSS the table always had to be defined in the HTML. Now layout tables can and should be defined in the CSS instead.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow