Tables For Layout - Why Not?

There are still plenty of people who use HTML tables to do the layout of their web page despite the fact that HTML tables were never intended to be used that way and that the standards say that the appearance of the page should be defined using CSS. The usual excuse that they give is that they don't have time to learn the alternative way of doing their page layout.

There are a number of reasons why those people ought to reconsider that have nothing to do with what is considered to be right or wrong or repated to standards or semantics. So we'll forget about the fact that HTML tables for page layout are considered to be bad and are definitely non-semantic and will instead look at some of the real benefits that can be achieved by abandoning this practice and getting rid of the layout tables out of your existing web pages.

One consideration where getting rid of HTML layout tables can make a real difference is with regard to the media used to access web pages. Long gone are the days when web pages wereonly viewed in a web browser. Today there are many people who look at web pages on a variety of mobile devices. Also the standard screen sizes of the past 640x480 and 800x600 are well behind us with people now having much larger screens on their computers which makes it far more likely that they will not have their browser open full screen (on a 1920x1080 screen you can quite easily fit two windows side by site and so a width of just over 900 for the browser viewport would possibly be common on screens using that resolution). One of the big problems with using a table for layout is that the columns on your page will be either fixed or variable width and so you will either end up with the horizontal scrolling on narrow screens, lots of wasted space on large screens, or will have lines of content that are either too short or too long to read easily. Doing away with layout tables opens up the possibility of a variable number of columns across the screen depending on the available width so as to allow better utilisation of an unknown amount of space across the screen.

The other aspect to using layout tables with respect to the width is that the table has to be able to work with a width of 740 pixels since if it doesn't then people will be unable to print your web page. If you instead use CSS then you can define a completely separate layout for printing which may leave out some columns (such as navigation and advertising).

A third consideration relating to appearance is with respect to those people using screen readers to listen to your web page. A layout table means that they hear the content in the order that you needed to place it in order to get it to appear in the right place on the screen. This is not necessarily the order that the content needs to be in so as to make sense when read out. Getting rid of the layout table and using CSS to do the layout not only means you can style the audio version but it also means that you can place the content in a more logical order in the HTML and use the CSS to rearrange where it needs to appear on the screen.

This leads directly into what is perhaps the most significant reason for getting rid of layout tables and that is page maintenance. Every so often you will need to change the appearance of the web page in some way so as to avoid having it end up looking stale and dated. Some of these changes will involve swapping data between columns. Using layout tables you will need to update each and every web page in order to make such a change (unless your pages are built using a server side language in which case you may be able to make modifications to two or three files to swap things around.On a significant sized web site with hundreds or thousands of pages this could take quite some time to test even if you are using includes on the server. Get rid of the HTML layout tables and use a common CSS file instead and you only have that one file that needs changing whenever you want to amend the page layout. This will result in a significant time saving. By the second or third time you need to make such a change you will have more than justified the amount of time taken to learn CSS and get rid of the layout tables just in the time saved in refreshing the appearance of your site


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow