Styling Tables - Beginning CSS3 - page 317

Table 14-1. CSS Table Properties

Property Initial Value Inherited Description

border-collapse separate Yes By default, the table and each cell have independent

borders. Borders are merged by setting the value of this
property to collapse .

border-spacing 0

Yes Controls the spacing between table cells. Horizontal

and vertical spacing can be controlled independently.

caption-side top Yes Determines whether the table caption is displayed

above or below the table.

empty-cells show If set to hide , turns off the display of borders and

backgrounds associated with empty table cells.

Yes

table-layout auto If set to fixed , the width of each column is set in the

column definitions or first row.

No

text-align left Yes Controls the horizontal alignment of content in table

cells. With right-to-left languages, the default is right .

vertical-align middle

No Controls vertical alignment in table cells.

All the properties in Table 14-1 are fully supported by all browsers in widespread use, including IE 8. Earlier
versions of Internet Explorer support them with some minor exceptions.

Styling Table Borders
When you use CSS to add a border to a table, the border affects only the table, and not the cells inside.
You can control each border independently, using the same border properties described in Chapter 9 . The
styles in double_border.html define the table border like this (see Figure 14-6 ):

table {
border: #000 double 10px;
}

Figure 14-6. With CSS, you can use any border style for a table; the cells are not affected

In fact, you don't need to declare a border or use the same style on every side. The styles in different_
borders.html add a top and bottom border like this (see Figure 14-7 ):

table {
border-top: #000 double 10px;
border-bottom: #999 solid 5px;
}