Skip to main content

Learn CSS tables to create flexible and customizable layouts

CSS tables are a way to create table layouts using CSS. With CSS tables, you can create tables that are more flexible and customizable than traditional HTML tables.

Here are some of the most commonly used CSS properties for tables:

The border-collapse​

The border-collapse property specifies whether the table borders are collapsed into a single border or separated as in standard HTML tables.

The default value is separate, which means that the table borders are separated. The collapse value makes the table borders collapse into a single border.

As an example:

table {
  border-collapse: collapse;
}

The border-spacing​

The border-spacing property specifies the distance between the borders of adjacent cells.

The default value is 0, which means that there is no space between the cells. The value can be any length unit, such as px or em.

As an example:

table {
  border-spacing: 5px;
}

The caption-side​

This property specifies the position of the table caption, which is displayed above or below the table depending on the value.

As an example:

table {
  caption-side: bottom;
}

The empty-cells​

The empty-cells property specifies whether to show or hide empty cells that have no content.

The default value is show, which means that empty cells are shown. The hide value makes the empty cells hidden.

As an example:

table {
  empty-cells: hide;
}

The table-layout​

This property specifies the algorithm used to lay out the table. The default value is auto, which means the browser determines the layout. The fixed value makes the table have a fixed width and the content may overflow its cells.

As an example:

table {
  table-layout: fixed;
}

The text-align and vertical-align​

The text-align property specifies the horizontal alignment of text. And vertical-align property specifies the vertical alignment of text.

As an example:

table {
  text-align: center;
  vertical-align: middle;
}

The background-color​

This property sets the background color for the table.

As an example:

Editor

Loading...

In this example:

  • We've set the border-collapse property to collapse to create a single border around the table cells.
  • We've also set the background-color property to #f2f2f2 to give the table a light gray background color.
  • We've used the th and td selectors to style the table cells.
  • We've set the padding property to 8px to create some space between the content and the cell borders.