A Fix for Finicky HTML Tables

December 17, 2003 - 2:00am ||| 0 Comments | Add new
A recent tech support call from a previous GoLive student (yes, she actually remembered that all students receive 3 years of 24/7 support from me) involved diagnosing a mysterious problem she was having getting text to align properly in a web page table.

The table was for a survey form. Most of the rows contained survey questions and radio buttons for responses. The top row, though, contained header text for the survey itself.

The problem was that although the header row copy was formatted to be centered (horizontally) within the cell, and previewed correctly in GoLive/Windows and in IE for the Macintosh; it wasn't aligning properly in IE for Windows — the browser that would be used by 99% of the site's prospective visitors.

In that browser, it looked like there was twice the amount of space to the right of the text than to the left of the text. And since this row looked distinctly different than the other rows, the misalignment really stood out.

She sent me the file and I verified that there were no extra spaces in the cell, that the column widths added up properly to the table width, and that the centering was applied correctly.

Then it occurred to me that this first row had a couple instances of merged cells ("colspan" in HTML-speak). Some browsers, IE/Windows among them, may have trouble drawing tables correctly when either the first row or the first column in a table contain merged cells. I added another row to the table, above the header row, that contained only individual (non-merged) cells.

When I opened up the modified .html file in IE/Windows, the text in the header row was now centering properly. And since the "control row" I added to the top of table contained no data in its cells and its height was set to "0", it didn't affect the appearance or position of the table when viewed in a browser. I sent my client the fixed .html file.

Moral: If your table starts out with merged cells in its first row or first column, add a control row above or to the left of it as explained above. And if you're slicing an image in Photoshop, ImageReady or Fireworks, and having that application generate the HTML for the table as well as the sliced .gifs and .jpegs, look for the option "Add Control Row/Column," and make sure it's enabled.


Post new comment

By submitting this form, you accept the Mollom privacy policy.