HTML Table Usage Design Tips

The tips below will help you to create effective tables to control your layout.

1 Keep your HTML code easy to read.

HTML code can, at times become very complicated once you begin to add content to your tables. Images, alt tags and the content text can soon create a myriad of coding that is very hard to follow. Try to keep your code easy to follow, using comment HTML snippets to ensure when you revisit or deploy your site, each section is clearly labelled.

2 Remove dead white space.

In your coding, remember to view the rows and remove the spaces between elements. Some browsers will recreate these spaces if they remain after publishing and this can alter the appearance of your design.

3 Centre your tables.

When working with a fixed resolution table (such as 800 X 600), aligning your table in the centre will keep your design independent of resolution changes and ensure your content is displayed as you intended.

4 Stack your large tables.

All browsers must read the complete table code before the results can be displayed. Text that is outside of the table will be displayed first. Should you build a large table, this will severely impact on the download speed and increase the risk of the viewer leaving before the display has arrived on the monitor.

To avoid this, build several smaller tables. As you stack your tables, they will load independently and this will allow the viewer to read your content of the first table whilst the remaining content downloads.

5 Nesting tables

Nesting tables will also achieve controlled content display. You can display a whole table within a larger table cell. Both IE and Netscape support this format.

Daren Jephcote. BSc. Is the owner of Leicester Office Solutions and has over 5 years experience in his chosen field. With professional qualifications in design and website applications, he has chosen to provide ground breaking service levels in the internet industry that has been shrouded in mystery for far too long.

Visit his business website at http://www.losdesign.co.uk to find out more about his services and products.