Tables

border-collapse

border-collapse property is used to collapse the border of the table cells with the table border. Possible values are:

  • collapse
  • separate
  • inherit

Syntax for using border-collapse:

table
{
    border-collapse:collapse;
}

border-spacing

border-spacing property is used to set the distance between the border of adjacent-cells of a table.

Syntax for using border-spacing:

table
{
    border-spacing:10px;
}

If you assign only one border-spacing value then it will set both horizontal as well as vertical spacing with that value. If you assign two values then first one will become horizontal value and second one will become vertical value.

caption-side

caption-side property is used to define the position of the caption for a table. Possible values are:

  • top
  • bottom
  • inherit

Syntax for using caption-side:

table
{
    caption-side:top;
}

empty-cells

empty-cells property is used to decide whether to render border and background for empty cells or not. Possible values are:

  • show - draws the border and background for empty cell.
  • hide - hides the border and background for empty cell.
  • inherit - inherits the property of its parent.

Syntax for using empty-cell:

table
{
    empty-cell:show;
}

table-layout

table-layout property is used to set the layout of a table. Possible values are:

  • auto(default) - sets the layout of table automatically. It sets the width of a cell according to the width of its content without overlapping.
  • fixed - It sets the width of a cell according to the value specified in width property for th or td and can overlap the cell's content with the border.
  • inherit - inherits the property of its parent.

Syntax for using table-layout:

table
{
    table-layout:10px;
}
<< Lists Positioning Elements >>