How to Style HTML tables with CSS

Style HTML tables with CSS to control their presentation, separating the styling from the HTML structure. CSS offers more control over the appearance of tables compared to older HTML attributes.

Basic CSS for Tables

Apply CSS rules to table elements such as <table>, <th> (table header), <td> (table data cell), and <caption> (table caption) using selectors. CSS rules consist of a selector and a declaration block containing properties and their values.

example, you can set the font-family and width of the entire table:

table {
  font-family: Arial, Verdana, sans-serif; /* */
  width: 600px; /* */
}
You can also style table header (<th>) and table data (<td>) elements. For instance, to add padding within cells:
th, td {
  padding: 7px 10px 10px 10px; /* */
}

Table Backgrounds

Set background colors for the table or individual rows and cells using the background-color property. Alternating row backgrounds can improve readability.

tr.even {
  background-color: #efefef; /* Shade even rows */
}
th {
  background-color: #90b4d6; /* Style table header background */
  color: #fff; /* Style table header text color */
}

Text Styling

Standard CSS text properties like text-align, text-transform, letter-spacing, and font-size can be used to style the text content of table elements.

th {
  text-transform: uppercase; /* Make header text uppercase */
  letter-spacing: 0.1em; /* Add letter spacing to headers */
  font-size: 90%; /* Reduce header font size */
  text-align: left; /* Align header text to the left */
}
.money {
  text-align: right; /* Align numbers to the right */
}
td {
  text-shadow: 1px 1px 1px #fff; /* Add a text shadow to data cells */
}

Padding and Spacing

The padding property controls the space between the content of a table cell and its border, improving readability.

th, td {
  padding: 5px 30px 5px 10px; /* Set padding for header and data cells */
}

Pseudo-classes for Table Styling

CSS pseudo-classes can be used to style table rows based on user interaction or their position in the table. For example, :hover can highlight a row when the mouse cursor is over it.

tr:hover {
  background-color: #c3e6e5; /* Highlight row on hover */
}

Uuse pseudo-classes like :first-child and :last-child to apply specific styles to the first or last elements within their parent, although the example shows them used for rounded corners on the table header. :nth-child() can be used to style specific rows, such as shading every other row.

table.one {
  empty-cells: show; /* Show borders for empty cells */
}
table.two {
  empty-cells: hide; /* Hide borders for empty cells */
}

HTML tables layout

Tables were also used for web page layout, but CSS is now the preferred method for controlling the positioning and appearance of web page elements. CSS offers various properties to control the layout of HTML tables.

display Property:

Table elements have default display values (table, table-row, table-cell, etc.) that create the table structure, the display property can be used to change how these elements are extracted. For example, setting display: block on table elements will make them behave like block-level elements, overriding their normal table display.

table, tr, td {
  display: block;
}

table-layout

This property controls the algorithm used to lay out the table cells, rows, and columns. It has two main values:

auto (default): The layout of the table is determined by the content of its cells. The table’s width can become wider than specified if the content requires it.
fixed: The table layout is determined by the width property of the table and the width of the columns. If the content exceeds the cell width, it might overflow.

/* Table with automatic layout based on content */
table.auto-layout {
  width: 150px; /* Might be overridden by content */
  table-layout: auto;
  border-collapse: collapse;
}
/* Table with fixed layout based on defined widths */
table.fixed-layout {
  width: 150px;
  table-layout: fixed;
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
}

border-collapse:

This property specifies whether table borders should be collapsed into a single border or separated.

collapse: Adjacent cell borders are collapsed into a single border.
separate: Borders of adjacent cells are displayed independently. The border-spacing property can then be used to set the distance between them.

/* Collapse table borders */
table.collapsed-borders {
  border-collapse: collapse;
  border: 1px solid black;
}
/* Separate table borders with spacing */
table.separated-borders {
  border-collapse: separate;
  border-spacing: 10px;
  border: 1px solid black;
}
th, td {
  border: 1px solid black; /* Needed for both collapse and separate */
  padding: 8px;
}

border-spacing:

This property sets the distance between the borders of adjacent table cells. It is only effective when border-collapse is set to separate.

table {
  border-collapse: separate;
  border-spacing: 15px;
  border: 1px solid black;
}
th, td {
  border: 1px solid black;
  padding: 8px;
}

empty-cells:

This property controls the rendering of borders around empty table cells.

show (default): Borders are displayed around empty cells.
hide: Borders are not displayed around empty cells.

table {
  border-collapse: collapse;
  border: 1px solid black;
}
td {
  border: 1px solid #0088dd;
  padding: 15px;
}
table.show-empty {
  empty-cells: show;
}
table.hide-empty {
  empty-cells: hide;
}

caption-side:

This property specifies the placement of the table’s <caption> element. Values include top, bottom, left, and right.

caption {
  caption-side: bottom; /* Place the caption below the table */
  padding: 10px;
  font-style: italic;
}

CSS3 Topics

Page Content

Tutorials