Styling Tables - Beginning CSS3 - page 318

Figure 14-7. Tables can have different style borders or none at all on each side
For that extra special table, you can even use a border image. You apply it in exactly the same way as to any
other element (see Chapter 9 for details). The styles in border-image.html add a default double border, and then
use the border-image shorthand property with browser-specific prefixes like this:
table {
border: 24px double #4B8896;
-moz-border-image: url(images/frame1.png) 24 round;
-o-border-image: url(images/frame1.png) 24 round;
-webkit-border-image: url(images/frame1.png) 24 fill round;
border-image: url(images/frame1.png) 24 fill round ;
}
Browsers that support border images render the table as shown in Figure 14-8 .
Figure 14-8. You can even use a border image for a table
Adding Borders to Table Cells
Because adding a table border with CSS has no effect on the table cells, you need to create a separate style for the
cells. This gives you the freedom to choose a different color and/or style for the cell borders. The style rules in
cell_borders.html add a 1px solid red border to all table cells like this:
td {
border: #F00 solid 1px;
}
As you can see in Figure 14-9 , the border around each cell is separate from the table border, and there is a
small gap between each cell.
Figure 14-9. By default, there is a space between each cell border