Skip to main content

Getting StartED with CSS

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:
left for 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.