3rd February 2005
With pretty much all of our work being outsourced from marketing, advertising and web design firms we are typically working with other people’s HTML. While many of our customers have now moved over to using DIVs with CSS, we are still getting quite a few table-based HTML pages. We have no problem in working with table-based HTML, but it is important to remember that the HTML must be properly structured – especially if it is going to be dynamically driven from a database.
If the text in a page can be dynamically driven, the amount of text is going to change. And if you are displaying a list of items from the database, the number of items shown is probably going to change too. It’s important to make sure that these changes do not have an adverse effect on the page layout.
Start off by printing out your page design and drawing tables onto it with a pen. It doesn’t contribute much to the idea of a paperless office, but it’s an easy way to start. Work from the outside and move in. If you have a three-column site, start by drawing one table with three columns. Then inside each table element, break it up with another table. NEVER merge two table elements into one using colspan or rowspan attributes. In my 8 years of web development, I don’t think I have ever seen a page design that requires rowspan or colspan. Nested tables should be able to account for every possible eventuality. Programs like Adobe GoLive are OK for chopping up the images, but don’t use them to create the HTML.
Next, make sure you don’t use the height attribute for table elements. With the data being dynamic it can change size (and it should be able to change size anyway if the user changes their text size preferences).
Finally – make the structure of the HTML match the information you are displaying. It sounds obvious, but if you have a table of events then make sure it is one table and not one table per row. If you don’t do this, it might look OK when you have the same information in every row, but when the site goes live with real data, the columns might not line up.
Before you send it through, test it. Change the number of elements in a table and change the amount of text. Make sure this doesn’t break the design. Also, open up the HTML files in notepad and run a search for the words “rowspan”, “colspan” and “height”. If you find these within TABLE, TD or TR tags – the HTML is no good.
To be clear, remember the three golden rules of table-based HTML structure:
1. Do not use colspan, rowspan or height attributes.
2. Remember not to use colspan, rowspan or height attributes.
3. Never use colspan, rowspan or height attributes.