CSS Tables

Tables are a great way to display structured data, but by default, they can look really plain. Let’s explore how to improve their appearance using CSS.

Table Borders

By default, table cells have separate borders.

	Mon	Tue	Wed
Hours Worked – Week 1	8	6	4
Hours Worked – Week 2	5	4	6
Money Earned	$260	$200	$200

You can collapse them into one using the border-collapse property set to collapse.

table {
  border-collapse: collapse;
}

	Mon	Tue	Wed
Hours Worked – Week 1	8	6	4
Hours Worked – Week 2	5	4	6
Money Earned	$260	$200	$200

Alternatively, you can keep cell borders separate and spaced apart using border-spacing.

table {
  border-collapse: separate; /* default */
  border-spacing: 10px;
}

	Mon	Tue	Wed
Hours Worked – Week 1	8	6	4
Hours Worked – Week 2	5	4	6
Money Earned	$260	$200	$200

💡 Tip: border-spacing only works when border-collapse is set to separate.

Table Captions

Tables support captions for better readability. Add a caption right after the <table> tag:

<table>
  <caption>Earnings Overview<caption>
  /* the table content */
</table>

Earnings Overview

	Mon	Tue	Wed
Hours Worked – Week 1	8	6	4
Hours Worked – Week 2	5	4	6
Money Earned	$260	$200	$200

By default, captions appear above the table, but you can reposition them below using the caption-side property:

table {
  caption-side: bottom;
}

Earnings Overview

	Mon	Tue	Wed
Hours Worked – Week 1	8	6	4
Hours Worked – Week 2	5	4	6
Money Earned	$260	$200	$200

Handling Empty Cells

Sometimes, tables contain empty cells that look awkward. You can control their visibility using:

table {
  empty-cells: hide; /* Hides borders of empty cells */
}

💡 This only works when the border-collapse value is separate.

Earnings Overview

	Mon	Tue	Wed
Hours Worked – Week 1	8	6	4
Hours Worked – Week 2	5		6
Money Earned	$260	$200	$200

Final Thoughts

With these simple styling techniques, you can transform a basic HTML table into a well-structured, readable data display.