CSS for Tables

Tables Concepts

As discussed in HTML for Tables, a table is meant to represent tabular data. A table without any CSS styles applied will look something like this:

It puts the information into rows and columns, but it’s difficult to read and identify the different parts and structure of the table. With a little styling we can make it much easier for the visitor to recognize the important information in the table, and how it all relates to each other.

The styles applied are fairly simple, but this underscores the philosophy of this site. Use HTML first, and add in CSS (and JavaScript) where it will make your site better.

.table {
  border: 1px solid black;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  table-layout: fixed;
}
.table caption {
  background-color: black;
  color: white;
  padding: .25rem;
}
.table th {
  background-color: gainsboro;
  padding: .25rem;
}
.table td {
  background-color: whitesmoke;
  padding: .25rem;
}

For more information about why the second table looks so much better see Getting Better at Design.

CSS used in tables

The following standard CSS properties (border, padding, text-align, and background-color) are the most common properties that you’ll end up using on tables.

border

Adding a border to different elemments of the table can help differentiate the elements from each other.

padding

The default styles on a table doesn’t include cell padding. Adding just a little helps to differentiate the information in each cell.

text-align

The convention used in most tables is that digits are right-aligned, and other forms of data are left-aligned.

background-color

The background-color property when used in tables can help differentiate captions and headers from normal table cells.

Table display properties

• display: inline-table
• display: table
• display: table-caption
• display: table-row
• display: table-cell
• display: table-column
• display: table-column-group
• display: table-header-group
• display: table-footer-group

Using the different table display properties it’s entirely possible to recreate a table structure using non-table elements.

Even though it’s possible, you’re still better off using real table elements when you need a table. The best actual use case for these properties is if you set the display property to none on a table or table element, and need to set it back to the original value.

Table Specific Properties

The table specific properties can only be used on tables or table elements.

border-collapse

The border-collapse property controls the space between cell borders. By setting it to collapse you can remove that spacing.

border-spacing

The border-spacing property controls the amount space between cell borders. Using border-spacing: 0px; is effectively the same as using border-collapse: collapse;.

caption-side

Using caption-side can change the location of the table’s caption. The default value is top.

empty-cells

The empty-cells property controls how the table handles the display of empty cells. The default value is show.

table-layout

The table-layout property can even out the columns on a table, when the value is set to fixed. The default style is auto.

Table Helpers

Zebra Stripes

Using the :nth-child(odd) pseudo-class you can have the table row colors alternate.

.table.zebra tr:nth-child(odd) td {
  background-color: gainsboro;
}

Highlighting

Using the :hover pseudo-selector you can set a row to change color on hover, highlighting the row that the visitor is focused on.

.table.hightlighting tr:hover td {
  background-color: yellow;
}

Responsive

Wide tables on small devices can be a challenge. For exceptionally wide tables, you might consider wrapping the table in an element with width: 100%; overflow-x: auto; values.

width: 100%;
overflow-x: auto;

Types of Tables

Tables are usually intimately tied to the data within them. Various types of tables include:

Multiplication

Calendar

Rows

Lookup

Comparison

CRUD Dashboard

Invoice