Getting Rid of Spaces in HTML Tables

If you’re using tables for page layout (a no no in XHTML, by the way), you may have run into the problem of extra space in your layouts. In order to fix this you need to check several things:

  1. Does your table have the cellpadding attribute set to 0?
    cellpadding="0"
  2. Does your table have the cellspacing attribute set to 0?
    cellspacing="0"
  3. Are there any spaces before or after your <td>, </td>, <th>, and </th> tags?

    Number 3 is the kicker. Many HTML editors like to have the code all spaced out, to make it easy to read. But many browsers interpret those tabs, spaces, and carriage returns as desired extra space inside your tables. Get rid of the whitespace surrounding your tags and you’ll have crisper tables.

    For example, using this HTML:

    <table>
      <tr>
        <th>
          this is a header
        </th>
        <td>
          this is a cell
        </td>
      </tr>
    </table>

    Some browsers will add a bunch of space inside the table cells. A tighter table would look like this:

    <table cellpadding="0" cellspacing="0">
      <tr>
        <th>this is a header</th>
        <td>this is a cell</td>
      </tr>
    </table>