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
In this example:
- We've set the
border-collapse
property tocollapse
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
andtd
selectors to style the table cells. - We've set the
padding
property to8px
to create some space between the content and the cell borders.