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

(singke) #1
ptg16476052

Sizing Tables, Borders, and Cells 255

10


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



If I applied that style sheet to the vital statistics table used in the previous example, it
would appear as it does in Figure 10.8.


As you can see, there are gaps between the borders on each cell for this table. To fix this,
we need to use the CSS border-collapse property on the table element. It has two pos-
sible values, separate and collapse. The default is separate, it produces the result you
see in Figure 10.8. The style sheet that follows shows how to apply it:



Figure 10.9 shows the results.


FIGURE 10.8
A table with cell
borders applied
using CSS.


FIGURE 10.9
A table that uses
the border-
collapse property
to eliminate space
between cells.

Free download pdf