Web Design in a Nutshell

Table Troubleshooting

Despite the control they offer over page layout, tables are also notorious for causing major headaches and frustrations. This is partly due to the potential complexity of the code—it’s easy to miss one little character that will topple a table like a house of cards. Another source of chaos is that browsers are inconsistent and sometimes quirky in the way they interpret table code. It is not uncommon to spend several careful hours crafting a table that looks perfect in browsers X and Y, but crumbles into a little ball in browser Z. Or it may look great with one user’s settings, but unacceptable with another’s.

Although not every problem can be anticipated, there are a number of standard places tables tend to go wrong. HTML tables have some inherent peculiarities that can make them frustrating to work with, but knowing about the potential pitfalls up front can make the design process go more smoothly. As always, it is necessary to test your designs on as many browser and platform configurations as possible.

Text in Tables

When designing tables that contain text, remember that text size can vary greatly from user to user. This adds an inherent level of unpredictability to the way your tables display.

Not only does text display larger on PCs than on Macs, each individual can set the font size for text display. So although you’ve put a nice, tidy column of options in a table cell, for the user whose font is set to 16 points, the text may get some extra line breaks ...