CSS Lara Template Generator and Web Design Blog

Lara is like the Mr. Potato Head of web design. You just put all the pieces together and wham, you've got a cool new website!

Enter Lara's Gallery, a CSS Template Designer »

XHtml Cellspacing and XHtml Padding for XHtml Tables

Tuesday, November 11, 2008

A common problem faced by html developers who are now moving toward xhtml is how to convert tables which have been using cellspacing and cellpadding. Cellpadding and cellspacing are not supported in xhtml transitional. Consider the following common html:

Unfortunately, when you run it past the w3 validator you will get an error. Here is the xHtml way of doing this (always put your CSS in a separate linked file):

This solution will yield the same result, but pass as xhtml. But now, what if we want to put some padding just on cell 1 to separate it from cell 2? Keeping in line with our external css we would most likely add a class to the td of cell 1 (lets call it PadMe) and just put the padding in our css. Unfortunately, there is a little trick here that may cause you some trouble. The .xTable td css will still override your class with regards to the padding. So your cell will not actually pad out. There are two solutions to this problem, the first is to put your padding inline on the html. This will work but the more correct way is to force the browser to prioritize your CSS class using the format:

td.PadMe { padding-right: 10px; }

The full correct way to style your xhtml table is outlined below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .xTable { border-spacing: 0; /*Others*/ border-collapse: collapse; /*IE*/ } .xTable td { padding: 0; } /* .PadMe { padding-right: 10px; } (will be overridden by above) */ td.PadMe { padding-right: 10px; } </style> </head> <body> <table class="xTable"> <tr> <td class="PadMe"> Cell 1 </td> <td> Cell 2 </td> </tr> <tr> <td> Cell 3 </td> <td> Cell 4 </td> </tr> </table> </body> </html>

There is one more tricky little problem (bug?) you may encounter in Internet Explorer. The problem arises when you put only an image inside of a given cell. Whether you are using cellspacing="0" or the CSS solution above you will find a gap problem when trying to align images inside of a table:

This problem occurs because IE adds a text node inside of the cell even if there is no text, having a carriage return or tab will cause this to occur. There are two possible solutions for this, remove all formatting (whitespace) in the html or set the font-size of the cell or table to 0:

.xTable
{
    border-spacing: 0; /*Others*/
    border-collapse: collapse; /*IE*/
    font-size: 0; /*IE Images Only*/
}

This solution will close up your gap:

I hope you find this helpful in updating all your html tables to xhtml. If you find any other issues with xhtml table please let me know so I can add them here!

Would you like to comment?

Kristiina - Helsinki, Finland - Tuesday, March 17, 2009 12:26 AM

Thanks! I manage to find this issue by my own but now when I actually knew that this was due to doctype, padding and xhtml combination, I was able to search for the answer.
Earlier was trying like "extra space in a table" and similar and couldn't find right results in Google.
There was still an issue with a customer having some Internet Explorer version (her other computer shows table fine) but this font to zero solves that too. So it actually needed both font to zero and the border-spacing in zero.