Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Sizing Tables, Borders, and Cells 257

10

You can also specify the padding of a table cell using the padding property in CSS. The
advantages of doing so are that you can specify the padding for the top, left, right, and
bottom separately, and you can specify different padding amounts for different cells of
the table if you choose to do so. For example, you can set the padding of header cells to
10 pixels on the top and 5 pixels on the sides and bottom and then set the padding to four
pixels on all four sides for regular table cells. This is also the valid HTML5 method of
defining padding for table cells.

To create the table in Figure 10.10 with CSS, you add the style sheet:

Input ▼

table {
border: 1px solid black;
}
td, th {
border: 1px solid black;
padding: 10px;
}

Cell Spacing

Cell spacing is similar to cell padding except that it affects the amount of space between
cells—that is, the width of the space between the inner and outer lines that make up the
table border. The nonconforming cellspacing attribute of the

element affects
the spacing for the table. Cell spacing is two pixels by default.

Cell spacing also includes the outline around the table, which is just inside the table’s
border (as set by the border attribute). Experiment with it, and you can see the differ-
ence. For example, Figure 10.11 shows our table with cell spacing of 8 and a border of 4,
as shown in the following code :

Input ▼