A Smarter Way To Learn HTML & CSS(2015)

45
Tables:
Spacing part 1

By default, browsers don’t add breathing room between the table cell borders and the text they contain. They’re jammed up against each other. It looks crowded.

The solution is to add padding.

th, td {
padding: .25em;
}

The CSS code above adds a little whitespace all around the text.

You increase or decrease the amount of padding by changing the em number. You can also specify different padding for different sides.

td {
padding: .25em 1.5em 0 1.5em;
}

The CSS code above adds extra padding at the top, just a little on the sides, and none on the bottom. As with margins, the numbers start at the top and proceed clockwise. To specify none, write 0, not 0em.

Suppose you want cells spaced apart—say, even farther apart than the browser default. Here’s the CSS code. I’m going to specify large spaces, so they’re easy to see.

table {
border-spacing: 1em;
}

This is the result.

Note that border-spacing is something you specify for the whole table, not the <th> or <td> elements. As usual, you can specify different border-spacing for different sides.

table {
border-spacing: 0 .25em 0 .25em;
}

The above CSS code would add extra space on the left and right and leave top and bottom space at the default width.

Even if a table doesn’t have borders, you can use border-spacing to add whitespace between the cells. Here’s the same table, with no border specified but with the all-around border-spacing of 2.5em.

In your CSS file add .25em of padding to all cells. Save the file. Display the page. Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-45-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/45.html