Styling Table

Let's consider the following table -

<div class="box">
<table>
  <caption>A summary of the UK's most famous punk bands</caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>
    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>
</div>

Table Borders

To specify table borders in CSS, use the border property.

.table1, .table1 th, .table1 td{
	border: 1px solid black;
}

Notice that the table in the example above has double borders. This is because both the table and the <th> and <td> elements have separate borders.

border-collapse

The border-collapse property sets whether the table borders should be collapsed into a single border:

.table2{
	border-collapse: collapse;
}
.table2, .table2 th, .table2 td{
	border: 1px solid black;
}

Table Width and Height

Width and height of a table are defined by the width and height properties.

The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:

.table3{
	border-collapse: collapse;
	width: 100%;
}
.table3, .table3 th, .table3 td{
	border: 1px solid black;
}
.table3 th{
	height: 50px;
}

Horizontal Alignment

The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.

By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.

.table4{
	border-collapse: collapse;
	width: 100%;
}
.table4, .table4 th, .table4 td{
	border: 1px solid black;
}
.table4 th{
	height: 50px;
}
.table4 td{
	text-align: center;
}

Vertical Alignment

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.

By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).

.table5{
	border-collapse: collapse;
	width: 100%;
}
.table5, .table5 th, .table5 td{
	border: 1px solid black;
}
.table5 th{
	height: 50px;
}
.table5 td{
	text-align: center;
	vertical-align: bottom;
}

Table Padding

To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:

.table6{
	border-collapse: collapse;
	width: 100%;
}
.table6, .table6 th, .table6 td{
	border: 1px solid black;
}
.table6 th{
	height: 50px;
	padding: 10px;
}
.table6 td{
	text-align: center;
	vertical-align: bottom;
	padding: 10px;
}

Horizontal Dividers

Instead of using border like before, add the border-bottom property to and for horizontal dividers:

.table7{
	border-collapse: collapse;
	width: 100%;
}
.table7, .table7 th, .table7 td{
	/*border: 1px solid black;*/
}
.table7 th{
	height: 50px;
	padding: 10px;
	border-bottom: 1px solid #eee;
}
.table7 td{
	text-align: center;
	vertical-align: bottom;
	padding: 10px;
	border-bottom: 1px solid #eee;
}

Hoverable Table

Use the :hover selector on to highlight table rows on mouse over:

.table8{
	border-collapse: collapse;
	width: 100%;
}
.table8, .table8 th, .table8 td{
	/*border: 1px solid black;*/
}
.table8 th{
	height: 50px;
	padding: 10px;
	border-bottom: 1px solid #eee;
}
.table8 td{
	text-align: center;
	vertical-align: bottom;
	padding: 10px;
	border-bottom: 1px solid #eee;
}
.table8 tr:hover{
	background-color: #eee;
}

Striped Table

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

.table9{
	border-collapse: collapse;
	width: 100%;
}
.table9, .table9 th, .table9 td{
	/*border: 1px solid black;*/
}
.table9 th{
	height: 50px;
	padding: 10px;
	border-bottom: 1px solid #eee;
}
.table9 td{
	text-align: center;
	vertical-align: bottom;
	padding: 10px;
	border-bottom: 1px solid #eee;
}
.table9 tr:nth-child(even){
	background: #ddd;
}
.table9 tr:hover{
	background-color: #eee;
}

Responsive Table

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content. Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:

.tableResponsiveContainer{
	overflow-x: auto;
}
.table10{
	border-collapse: collapse;
	width: 1200px;
}
.table10, .table10 th, .table10 td{
	/*border: 1px solid black;*/
}
.table10 th{
	height: 50px;
	padding: 10px;
	border-bottom: 1px solid #eee;
}
.table10 td{
	text-align: center;
	vertical-align: bottom;
	padding: 10px;
	border-bottom: 1px solid #eee;
}
.table10 tr:nth-child(even){
	background: #ddd;
}
.table10 tr:hover{
	background-color: #eee;
}

border-spacing

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

This property only works on table element.

The value specifies the distance between the borders of adjacent cells in px, cm, etc. Negative values are not allowed. You can provide two value instead of one value -

• If one value is specified, it defines both the horizontal and vertical spacing between cells
• If two values are specified, the first sets the horizontal spacing and the second sets the vertical spacing

.table11, .table11 th, .table11 td{
	border: 1px solid black;
}
.table11{
	border-spacing: 20px;
}

caption-side

The caption-side property specifies the placement of a table caption. It can one of the following two values -

• top Puts the caption above the table. This is default.
• bottom Puts the caption below the table

Here is an example -

.table12{
	caption-side: top;
}
.table12, .table12 td, .table12 th{
	border: 1px solid #ddd;
}
.table13{
	caption-side: bottom;
}
.table13, .table13 td, .table13 th{
	border: 1px solid #ddd;
}

empty-cells

The empty-cells property sets whether or not to display borders on empty cells in a table.

The empty-cells property in CSS selects empty table cells for the purpose of specifying whether or not to display borders and backgrounds on them. In other words, it tells the browser whether or not to draw borders around a table cell or fill in the background when that cell contains no content. It's kind of like applying a visibility property on empty table cells. It can take one of the following two values -

• hide display a border and background on an empty cell.
• show does not display a border or background on an empty cell.

This property has no effect if border-collapse is "collapse".

table {
  empty-cells: show;
}

A good use case for empty-cells could be a situation where you may not know whether a table will or will not contain empty data points and you decide to hide them. Tables used to be the de-facto way webpage layouts were constructed, so it could be a useful tool for showing and hiding elements when tables are used for presentation or where elements contain the display: table property.

Here is an example -

.table14{
	caption-side: top;
	empty-cells: hide;
}
.table14, .table14 td, .table14 th{
	border: 1px solid #ddd;
}
.table14 td, .table14 th{
	background: #eee;
}

table-layout

The table-layout property defines what algorithm the browser should use to lay out table rows, cells, and columns.

It can accept either of two values -

• auto The default. The browser's automatic algorithm is used to define how a table's rows, cells, and columns are laid out. The resulting table layout is generally dependent on the content of the table.
• fixed With this value, the table's layout ignores the content and instead uses the table's width, any specified width of columns, and border and cell spacing values. The column values used are based on widths defined on columns or cells for the first row of the table. If you don't specify width for each column in the table, then each column will have equal width to fill the width of the table.

Here is the example -

.table15{
	caption-side: top;
	table-layout: auto;
	width: 100%;
}
.table15, .table15 td, .table15 th{
	border: 1px solid #ddd;
}
.table16{
	caption-side: bottom;
	table-layout: fixed;
	width: 100%;
}
.table16, .table16 td, .table16 th{
	border: 1px solid #ddd;
}