Recipe 6.1 Setting the Cell Spacing

Problem

You want to change the space between the table border and 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 for Windows. (It does work in 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

Recipe 6.2 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.