Index by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

O'Reilly logo

Setting the Borders and Cell Padding for Tables

Problem

You want to set the borders and the amount of space within table cells to create a stronger visual display than the default rendering of a table, as shown in Figure 9-1, for example.

Borders and padding applied to the table and table cells

Figure 9-1. Borders and padding applied to the table and table cells

Solution

Use the padding property to address the amount of space between the content in the cell and the edges of the cell. Use the border property to set the borders on both the table and its cells:

table {
 border-collapse: collapse;
 border: 5px solid #444;
}
td {
 padding: 10px;
}
th {
 padding: 10px;
 color: white;
 background-color: black;
}
td, th+th {
 border: 5px solid #666;
}
td+td {
 border: 5px solid #ccc;
 text-align: center;
}
td#winner {
 border: 7px dotted #999;
}

Discussion

There are two border models for HTML tables: collapse and separate. With the collapse model, table cells share borders and appear to be placed on top of each other, as shown in the first table in Figure 9-1.

The second, bottom table in Figure 9-1 showcases the separate model, in which the table cells are detached with their own distinct borders.

Browser issues

At the time of this writing, the collapse model is more widely implemented by browsers, and thus is used more frequently by designers, than the separate model.

All browsers today default to the collapse model, except for Firefox, which defaults to the separate ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required