CSS Tables

Styling HTML Tables with CSS

Enhance the readability and appearance of your data tables.

Default HTML tables are plain. CSS can significantly improve their presentation:

Example of a styled table:

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria

CSS applied to the example above (simplified):

table {
  width: 100%;
  border-collapse: collapse; /* Crucial for clean borders */
  margin-bottom: 1em;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  color: #333;
}

Table Borders

Use the border property to add borders to table elements (<table>, <th>, <td>).

Applying borders individually often results in double borders (one for the table cell, one for the adjacent cell or table itself):

/* This creates double borders */
table, th, td {
  border: 1px solid black;
}

To fix this and achieve clean, single borders, use the border-collapse property on the <table> element.

Collapsing Borders

The border-collapse property controls whether table borders are separated or merged into a single border.

• separate (default): Each cell has its own distinct border.
• collapse: Adjacent borders are merged into a single border. This is generally preferred for a cleaner look.

Example using border-collapse: collapse;:

table {
  border-collapse: collapse;
  width: 100%; /* Often used together */
}

th, td {
  border: 1px solid black;
  padding: 8px; /* Add padding for spacing */
}

Table Width and Height

Use the width and height properties to control table dimensions. Setting width: 100% on the <table> is common to make it span its container.

You can also set dimensions for specific columns (<col> element) or rows/cells (<tr>, <th>, <td>), though heights are often determined by content.

Example setting table width and header height:

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

th {
  height: 40px;
  background-color: #eee;
}

td {
  border: 1px solid #ccc;
  padding: 5px;
}

Text Alignment

Horizontal Alignment (text-align):

Controls left, right, center, or justify alignment within <th> and <td> cells. By default, <th> text is usually centered and <td> text is left-aligned.

Example: Left-align header text and right-align numeric data:

th {
  text-align: left;
}

/* Example: Target a class for numeric cells */
td.numeric {
  text-align: right;
}

Vertical Alignment (vertical-align):

Controls top, middle, bottom, or baseline alignment within <th> and <td> cells. The default is usually middle.

Example: Align cell content to the top:

td {
  height: 60px; /* Make cell taller to see effect */
  vertical-align: top;
  border: 1px solid #ccc;
}

Table Padding

Use the padding property on <th> and <td> elements to create space between the cell content and the cell border.

th, td {
  padding: 12px 15px; /* 12px top/bottom, 15px left/right */
  border: 1px solid #ccc;
}

Table Colors and Styling

Use background-color and color to set background and text colors for the table, rows, or cells. Pseudo-classes like :nth-child are great for creating “zebra stripes” for better readability.

Example: Styling headers and adding zebra stripes to rows:

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

th {
  background-color: #04AA6D; /* Green background */
  color: white;
  padding: 10px;
  text-align: left;
}

td {
  border: 1px solid #ddd;
  padding: 8px;
}

/* Zebra striping for rows */
tr:nth-child(even) {
  background-color: #f2f2f2; /* Light grey for even rows */
}

/* Hover effect */
tr:hover {
  background-color: #ddd; /* Darker grey on hover */
}

Practical Application: Styling tables is essential for presenting tabular data clearly in reports, dashboards, product comparisons, etc.

Table Caption: Use the <caption> HTML element for table titles and style it using caption-side (top or bottom) and standard text/background properties.

Further Reading: MDN Styling Tables Guide