There are two ways of defining table borders with the CSS 2. The first way is suitable for the borders around individual cells, while the other is suitable for borders that cover the whole length of the table.

The property that selects which model to use is called border-collapse property.

Border-collapse property

The border-collapse property contains following information:

  1. value: collapse, separate or inherit;
  2. initial: separate;
  3. applies to: table and inline-table elements;
  4. inherited: yes;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: as specified.

Borders separated model

If the model is set to separate then the property border-spacing may be used to define borders separation space.

The border-spacing property contains following information:

  1. value: <length> <length> or inherit;
  2. initial: 0;
  3. applies to: table and inline-table elements;
  4. inherited: yes;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: two absolute lengths.

The value specified in length defines the distance between two cell borders in the manner that if only one number is given, then it applies to the horizontal and vertical spacing, while if both numbers are given, then the first one refers to the horizontal spacing and the second the vertical spacing.

In this model each cell has an individual border and the spacing defined by the border-spacing property is transparent, meaning that the table's background will be visible through. The other elements (row, column, row group and column group) cannot have borders.

In the separated borders model the property empty-cells controls the rendering of borders and backgrounds around the cells with invisible content (empty cells or visibility: hidden cells).

Empty-cell property

The empty-cells property contains following information:

  1. value: show, hide or inherit;
  2. initial: show;
  3. applies to: table-cell elements;
  4. inherited: yes;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: as specified.

With the value show the borders and backgrounds of the empty cells will be rendered as normal. However with the value hide the no borders and backgrounds will be rendered.

Borders collapsed model

If the collapsed model is applied the borders between cells (and ultimately rows) merge (collapse) with the table's borders and each other; in other words they share the width, why the cells padding area remain intact on both sides of the cell.

In this model the width of the table includes half the table border (instead of full width) and the table does not have padding but does have margins.

Borders at every edge cell may be specified by border properties on a variety of elements meeting the edge (cells, rows, groups and the table) and in such environment the borders styling may vary. There are few rules that help browser determine which styles to apply. These are:

  1. Borders with the border-style with the value hidden take precedence over other borders.
  2. Borders with the value none have the lowest priority.
  3. If none of the values are hidden and at least one of them is not none as well, then the narrow borders are discarded in place of wider ones.
  4. If several borders have the same width, the priority that takes place goes in this order: double, solid, dashed, ridge, outset, groove and inset.
  5. If styles differ only in color, the style set on a cell wins over one on a row, row group, column, column group and table (in respective order).
  6. If the two elements of the same type conflict in other manner, then the further one to the left (if table direction is ltr, otherwise the further one to the right) has the priority.

Borders styling

The table border styles have almost the same meaning as the normal CSS border style with some smaller differences.

The value hidden is understood same as the value none except that in the collapsing model it also inhibits any other border. The values inset and outset in the separated model will make the entire box look like it were embedded or coming out of the canvas respectively, while in the collapsing model will be drawn the same as ridge or groove respectively.

Example

CSS table borders example:

 

›› go to examples ››