Table Troubleshooting 187TablesTable TroubleshootingWeb Design in a Nutshell, eMatter EditionTable 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 inconsis-
tent 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 neces-
sary 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 and stretch off the screen.
In general, variable text sizes affect the height of cells and tables as the cells
stretch longer to accommodate their larger contents (particularly if the width has
been specified with an absolute pixel value). If you have HTML text in a cell,
particularly if the cell needs to be displayed at specific pixel dimensions within the
table, be sure to give it lots of extra room and test your page with different
browser font settings.
If you are using style sheets, you can control the size of the text by setting it to a
specific pixel height; bear in mind, however, that many users still use browsers
that do not support style sheets.
Form Elements in Tables
Like text, the way form elements display in a browser is dependent on the size of
the default monospace (or constant width) font that is specified in the user’s
browser preferences. If the user has his monospace font set to 24 points (or to
“largest” in Internet Explorer), your form elements (particularly text fields) will
resize larger accordingly.
In the real-world example in Figure 10-10, I used a table to hold together a badge
illustration, which contained a form for entering a name and password. In testing,
we found that the target audience generally had their browser fonts set to 18
points (they were working on very high-resolution monitors), which caused the