Tables

The look of an HTML table can be greatly improved with CSS:

Table Borders

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

The example below specifies a black border for <table>, <th>, and <td> elements:

table, th, 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.

Collapse Table Borders

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

table {
  border-collapse: collapse;
}

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

If you only want a border around the table, only specify the border property for <table>:

table {
  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:

table {
  width: 100%;
}

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.

The following example left-aligns the text in <th> elements:

th {
  text-align: left;
}

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).

The following example sets the vertical text alignment to bottom for <td> elements:

td {
  height: 50px;
  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:

th, td {
  padding: 15px;
  text-align: left;
}

Horizontal Dividers

Add the border-bottom property to <th> and <td> for horizontal dividers:

th, td {
  border-bottom: 1px solid #ddd;
}

Hoverable Table

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

tr:hover {background-color: #f5f5f5;}

Striped Tables

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

tr:nth-child(even) {background-color: #f2f2f2;}

Table Color

The example below specifies the background color and text color of <th> elements:

th {
  background-color: #4CAF50;
  color: white;
}

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:

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set).

More Examples

Make a fancy table
This example demonstrates how to create a fancy table.

Set the position of the table caption
This example demonstrates how to position the table caption.

CSS Table Properties