Recipe 8.1. Setting the Cell Spacing

Problem

You want to adjust the space between the table border and the cell borders.

Solution

Use the cellspacing table attribute:

<table cellspacing="15">  <tr>    <th colspan="2">     General Demographic Characteristics of Tallahassee, FL    </th>  </tr>  <tr>    <th>    </th>    <th>     Estimate    </th>  </tr>  <tr>    <td>     Total population    </td>    <td>     272,091    </td>  </tr> </table>

Discussion

The CSS 2.1 specification describes a standard mechanism to manipulate the cellspacing table attribute through the use of the border-spacing property, when the border-collapse value is set to separate:

border-collapse: separate;  border-spacing: 15px;

However, implementation of this part of the specification isn't visible in Internet Explorer 6 for Windows. It does work in Firefox and Netscape Navigator 7+. Using the cellspacing attribute is currently the best solution that works in Internet Explorer for Windows, Netscape Navigator, Safari, and Opera browsers.

See Also

Recipes 8.2 and 8.7 on setting table borders and cell padding; the CSS 2.1 specification for border-collapse at http://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse; the CSS 2.1 specification for border-spacing at http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing.