Table Properties
These properties control the appearance of tables. They provide a more sophisticated way to control table borders and spacing than the HTML border and cellspacing attributes. Using the padding property within table cells also offers much greater flexibility than the HTML cellpadding attribute. The table-layout property makes it possible to fix the width of a table, overriding the default behavior of automatically expanding the table to accommodate the widest content. See Chapter 9 for a detailed description.
border-collapse
- Accepted values:
collapse,separate- Default:
separate- Inherited:
- Yes
Controls the way table and cell borders are handled. By default, the table and each cell have independent borders. Adjacent borders are merged by setting the value of this property to collapse. If the borders are of different widths, the wider one is applied. If both are the same width, the single width is used. For example, if a 2px border is adjacent to a 5px one, the resulting width is 5px; but if both borders are 2px wide, the resulting width is 2px. Example
border-spacing
- Accepted values:
- One or two sizes with a unit of measurement
- Default:
0- Inherited:
- Yes
Controls the spacing between table cells. A single value is applied to both horizontal and vertical spacing. If two values are supplied, the first one is applied to horizontal spacing, and the second to vertical spacing. Not supported by IE6 or IE7. Example
caption-side
- Accepted values:
top,bottom- Default:
top- Inherited:
- Yes
Controls whether the table caption is placed above or below the table. Not supported by IE6 or IE7. Example
empty-cells
- Accepted values:
show,hide- Default:
show- Inherited:
- Yes
If set to hide, turns off the display of borders and backgrounds associated with empty table cells. If all cells in a row are empty, the entire row is removed from the display when border-collapse is set to collapse. Not supported by IE6 or IE7.
Example demonstrating the use of empty-cells to hide the last three empty cells. This example also shows how border-spacing can be controlled differently on the horizontal and vertical axes, as well as moving the caption to the bottom of the table.
table-layout
- Accepted values:
auto,fixed- Default:
auto- Inherited:
- No
Determines whether a table automatically expands to accommodate oversized content. If set to fixed, the width of each column is set in the column definitions or the first row.
Example demonstrating what happens when table-layout is set to fixed, but nothing is done to compensate for oversized cells.
text-align
- Accepted values:
left,right,center,justify- Default:
leftfor languages written left to right- Inherited:
- Yes
Although this is principally a text property, it also controls the horizontal alignment of content in table cells.
vertical-align
- Accepted values:
top,middle,bottom,baseline- Default:
middle- Inherited:
- No
Controls the vertical alignment of content in table cells. See Chapter 9 for a definition of baseline as applied to tables. Examples, including a demonstration of the effect of using baseline.