Styling Tables

CSS Styling Tables

CSS can improve the appearance and readability of HTML tables by controlling borders, spacing, alignment, backgrounds, and other visual details. Table styling changes presentation while the HTML table elements continue to provide the structure and meaning of the data.

Basic Table Styling

Browsers provide basic default styles for tables, but CSS can make tabular data easier to read and better match the rest of a page design.

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  border: 1px solid #cccccc;
}

Table Width

The width property can control how much horizontal space a table uses within its containing element.

table {
  width: 100%;
}

A width of 100% makes the table fill the available width of its container. A table can also use a smaller percentage, a fixed width, or its natural width depending on the content and design.

Table Borders

Borders can be applied to the table cells to make rows and columns easier to distinguish.

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

The border width, style, and color can be changed to create stronger or more subtle separation between cells.

Collapsing Borders

By default, table cells use separate borders. The border-collapse property can combine adjacent cell borders into a single border.

table {
  border-collapse: collapse;
}

The collapse value is commonly used when a table should have continuous grid lines instead of spacing between separate cell borders.

Cell Padding

Padding adds space between a cell's content and its border, making table data easier to read.

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

Increasing cell padding provides more breathing room, while smaller values create a more compact table.

Table Alignment

The text-align property controls the horizontal alignment of text and other inline content inside table cells.

th {
  text-align: left;
}

.price {
  text-align: right;
}

Text is often aligned to the start of a cell, while numeric data may be aligned differently to make values easier to compare.

Styling Table Headers

Table header cells can use a different background, text color, or font weight to distinguish headings from the table data.

th {
  color: #ffffff;
  background-color: #0088cc;
  font-weight: bold;
  text-align: left;
}

Visual styling supplements the semantic meaning provided by the HTML <th> element rather than replacing it.

Alternating Row Colors

The :nth-child() pseudo-class can apply a different background color to alternating table rows.

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

Alternating row colors can help visitors follow data horizontally across wider tables.

Highlighting Rows

The :hover pseudo-class can temporarily highlight a row when a pointing device is positioned over it.

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

A hover effect can make it easier to follow a row across several columns, but important information should not depend on hover because not every device provides a hover interaction.

Responsive Tables

Tables with many columns may become wider than the viewport on smaller screens. One simple approach is to place the table inside a container that allows horizontal scrolling when necessary.

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

table {
  width: 100%;
}

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

This preserves the table's rows and columns while allowing visitors to scroll horizontally when the table requires more width than its container provides.

Try Styling Tables

Edit the CSS in the example to change the table borders, cell padding, header colors, alignment, alternating rows, and hover effect.

Summary

CSS can improve table readability by controlling width, borders, cell padding, alignment, backgrounds, and row highlighting. The border-collapse property can create continuous borders, while :nth-child() can create alternating row colors. Wide tables can be placed inside an overflow container to provide horizontal scrolling on smaller screens.

The next tutorial covers Styling Forms and explains how CSS can control the appearance of form controls, labels, spacing, focus states, and form layouts.