Tables and Ids

Apart from all the obvious arguments against using HTML tables to lay out your web page, there is one that I haven't seen mentioned anywhere. Using tables for layout breaks the functionality for being able to jump to different spots within the web page.

If you don't use HTML tables then any link that includes a hash value on the end of the address will position the page so that the tag with the id corresponding to that hash value will be positioned as close to the top of the browser window as it can be positioned. If you omit everything before the hash then the link will jump internally within the current page.

So <a href="#solution"> produces a link that will jump the page so that the <div id="solution"> tag is at the top of the page provided that there is sufficient content below it so that it can be positioned at the top without scrolling past the end of the page and also provided that the id is not inside a table.

If the id is inside a table then the id itself doesn't get moved to the top of the browser viewport in all browsers. Some browsers assume that in order to make sense of tabular data you need to be able to see the headings above the columns and so where an attempt is made to jump to a spot within the table they will place the top of the table at the top of the browser viewport instead. This might make sense when the table contains tabular data. It doesn't make any sense at all when the table is being used to lay out the page.

Of course using tables to do the page layout makes no sense at all in any case as there are far better ways to do the page layout and have been for many years. Back when Netscape 4 was the most popular browser it made sense to use tables for layout because that browser didn't support all the better methods for laying out the page and didn't support jumping to ids within the page either. Once that browser died there was no longer any reason for limiting yourself by using HTML tables for the layout of the page.

There are many page layouts that can't be done using tables. There are also a growing number of csituations where being able to jump to a specific id is a necessary part of the functioning of a web page.

Even if the huge expense in maintaining HTML table based layouts compared to pages where CSS is used (hundreds or thousands of times the cost for each change) isn't enough to convince you to get rid of unsemantic tables , the fact that the table actually breaks a lot of the other functionality that you might need in the page at some stage might make you change your mind.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow