Setting the Space Between Table Cells

Although they can use many of the box properties we discussed in chapter 6, table data cells (including table header cells) cannot use the margin property. Instead, CSS provides the border-spacing (Table 9.2) property, which provides the ability to set an equal amount of space between data cells' top, bottom, left, and right sides.

Table 9.2. Border-Spacing Values
VALUE	COMPATIBILITY
<length>	IE5.5^[*], FF1, O5, S1.3, CSS2
inherit	IE5.5^[*], FF1, O5, S1.3, CSS2

^[*] For Windows only; buggy

In this example (Figure 9.2), the table data cells have had an extra 8 pixels of space added around them to create a more open feeling to the table.

Figure 9.2. The top table shows the code without any extra spacing, while the bottom table has an extra 8 pixel spacing added around all 4 sides of each table data cell.

To collapse the borders in a table:

border-spacing:

Type the border-spacing property name, followed by a colon (Code 9.2).

Code 9.2. The `border-spacing` property works like a margin around the table data cell.

[View full width]

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Setting the Space Between Table Cells</title> <style type="text/css" media="screen"> table {      border: 2px solid red;      background-color: #fcc; } td {      padding: 5px;      border: 1px solid red;      background-color: white; } .spacey { border-spacing: 8px; } </style> </head> <body> <table > <caption>Results from the Queens Croquet Tournament</caption> <tr><th></th><th>1</th><th>2</th><th>3</th> <th>4</th><th>5</th><th>6</th><th>7</th> <th>8< /th> <th>Total</th> </tr><tr> <td>Alice</td> ... </tr><tr> <td>Queen</td> ... </tr><tr> <td>Jack</td> ... </tr><tr> <td>Duchess</td> ... </tr></table> </body></html>

8px;

Type a length value (such as 8px) to specify the distance each cell should be from another. See "Values and Units Used in this Book" in the Introduction for more details. Alternatively, use inherit to set the cell to use the same border spacing as its parent element.

Table 9.2. Border-Spacing Values

Figure 9.2. The top table shows the code without any extra spacing, while the bottom table has an extra 8 pixel spacing added around all 4 sides of each table data cell.

Code 9.2. The border-spacing property works like a margin around the table data cell.

Code 9.2. The `border-spacing` property works like a margin around the table data cell.