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

ptg16476052

Sizing Tables, Borders, and Cells 251

10

Output ▼

Oops! What happened with that top row? The headings are all messed up. The answer, of
course, is that you need an empty cell at the beginning of that first row to space the head-
ings out over the proper columns. HTML isn’t smart enough to match it all up for you.
(This is exactly the sort of error you’re going to find the first time you test your tables.)

Add an empty table heading cell to that first row. (Here, it’s the line .)

Input ▼

FIGURE 10.5
The not-quite-
perfect color table.

I used <th> here, but it could be <td> just as easily. Because

there’s nothing in the cell, its formatting doesn’t matter.

NOTE

If you try it again, you should get the right result with all the headings over the right col-
umns, as the original example in Figure 10.4 shows.

Sizing Tables, Borders, and Cells

With the basics out of the way, now you’ll look at how you can change the overall
appearance of your tables. As with most other appearance features on web pages, you use
CSS to design how your tables should look.

▼

▲