CSS Styling Tables

CSS Styling Tables

CSS can improve the appearance and readability of HTML tables by controlling borders, spacing, alignment, backgrounds, and other visual properties.

HTML provides the structure and meaning of a table, while CSS controls its presentation. A few carefully chosen styles can make rows and columns easier to distinguish and tabular information easier to read.

Table Borders

The border property can add borders around the table and its cells.

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

Applying the border to the <table>, <th>, and <td> elements makes the boundaries of the table and its individual cells visible.

Without additional styling, adjacent cell borders remain separate and can appear as double lines.

border-collapse

The border-collapse property controls whether adjacent table-cell borders remain separate or are combined into a single border.

table {
  border-collapse: collapse;
}

The collapse value combines adjoining borders. This is commonly used when creating a table with continuous grid lines.

The initial value is separate, which keeps the borders of neighboring cells separate.

border-spacing

When a table uses separate borders, the border-spacing property controls the distance between adjacent cell borders.

table {
  border-collapse: separate;
  border-spacing: 8px;
}

One value sets both horizontal and vertical spacing. Two values can set them separately.

table {
  border-spacing: 12px 6px;
}

In this example, the first value controls horizontal spacing and the second controls vertical spacing.

The border-spacing property has no effect when border-collapse is set to collapse.

Table Cell Padding

Padding adds space between the contents of a table cell and its border.

th, td {
  padding: 10px 14px;
}

Adding padding prevents text and other content from sitting directly against the cell borders and usually makes tabular information easier to scan.

Table Width

The width property can control how much horizontal space a table occupies.

table {
  width: 100%;
}

A percentage width allows the table to use space relative to its containing element. A table does not need to be 100% wide, and its appropriate width depends on the content and page layout.

Individual columns can also be influenced by applying widths to cells, although the browser's table layout algorithm and the table's content can affect the final column sizes.

Table Alignment

The text-align property controls horizontal alignment of content inside table cells.

th {
  text-align: left;
}
td.number {
  text-align: right;
}

Text is often left-aligned, while numerical data may be right-aligned to make values easier to compare.

The vertical-align property can control vertical alignment within a table cell.

th, td {
  vertical-align: top;
}

Common table-cell values include top, middle, and bottom.

Table Backgrounds

Background colors can visually distinguish headings or important sections of a table.

thead {
  background-color: #006699;
  color: white;
}

Backgrounds can be applied to the entire table, table sections, rows, or individual cells.

tfoot {
  background-color: #e9ecef;
  font-weight: bold;
}

When choosing foreground and background colors, maintain sufficient contrast so the table remains easy to read.

Zebra-Striped Tables

Alternating row backgrounds can help users visually follow information across wide tables.

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

The :nth-child(even) pseudo-class selects every even-numbered row within the table body.

You can use odd instead when you want the alternating style to begin with the first row.

Table Hover Effects

A hover style can make it easier for pointer users to visually follow a row across a table.

tbody tr:hover {
  background-color: #e6f4fa;
}

The effect is useful as supplemental visual feedback, but information should not depend on hover because keyboard and touch users may not receive the same interaction.

Responsive Tables

Tables containing many columns can become wider than a small screen. One straightforward approach is to place the table inside a container that allows horizontal scrolling when necessary.

.table-wrapper {
  overflow-x: auto;
}

The HTML table remains intact while its container provides horizontal scrolling when the table is wider than the available space.

<div class="table-wrapper">
  <table>
    ...
  </table>
</div>

This technique preserves the relationship between rows, columns, and table headers instead of changing the table into an unrelated layout on smaller screens.

Styling Tables Example

The following example combines borders, collapsed border spacing, cell padding, header colors, alignment, zebra stripes, and a row hover effect. Open the example in the editor and change the colors, padding, borders, alignment, or width to see how each property affects the table.

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 10px 14px;
  border: 1px solid #999;
  text-align: left;
}
thead {
  color: white;
  background-color: #006699;
}
tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}
tbody tr:hover {
  background-color: #e6f4fa;
}