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




IE5.5[*], FF1, O5, S1.3, CSS2


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:



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" " xhtml1-strict.dtd"> <html xmlns=""> <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>



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.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230 © 2008-2017.
If you may any questions please contact us: