How to Style a Table in CSS

Use CSS table styling when you want rows and columns to feel easier to scan and visually aligned with the rest of your page. The biggest upgrades usually come from borders, spacing, zebra striping, and clearer header styles.

What you’ll build or solve

You’ll learn how to style a table in CSS using borders, padding, row backgrounds, and header emphasis. You’ll also know how to improve readability without overcomplicating the layout.

When this approach works best

This approach is the right choice when default browser table styles look cramped or too plain.

Common real-world scenarios include:

• Pricing comparisons
• Analytics dashboards
• Schedules
• Grade sheets
• Feature matrices

This is a bad idea when the content is better presented as cards on smaller screens.

Prerequisites

You only need:

• A basic HTML table
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Add borders, spacing, and readable headers

Start by styling the table container and cells.

<table class="pricing">
  <tr>
    <th>Country</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>$29</td>
  </tr>
</table>

<style>
  .pricing {
    width: 100%;
    border-collapse: collapse;
  }

  .pricing th,
  .pricing td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
  }
</style>

Then improve row readability with header emphasis and zebra striping.

<style>
  .pricing th {
    background: #f5f5f5;
  }

  .pricing tr:nth-child(even) {
    background: #fafafa;
  }
</style>

What to look for:

• border-collapse removes doubled borders
• Padding improves readability
• Header backgrounds improve scanning
• Zebra striping helps follow rows
• Left alignment usually works best for text data

Examples you can copy

Pricing table

<table class="plans">
  <tr>
    <th>Region</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>UK</td>
    <td>£25</td>
  </tr>
</table>

Analytics table

<table class="metrics">
  <tr>
    <th>Country</th>
    <th>CTR</th>
  </tr>
  <tr>
    <td>France</td>
    <td>4.2%</td>
  </tr>
</table>

Schedule table

<table class="schedule">
  <tr>
    <th>Market</th>
    <th>Launch</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Monday</td>
  </tr>
</table>

Common mistakes and how to fix them

Mistake 1: Forgetting border-collapse

What the reader might do:

table {
  width: 100%;
}

Why it breaks: borders can appear doubled and messy.

Corrected approach:

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

Mistake 2: No cell padding

What the reader might do:

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

Why it breaks: the table feels cramped and harder to scan.

Corrected approach:

td,
th {
  padding: 12px;
}

Mistake 3: Over-styling every row

What the reader might do:

tr {
  background: #eee;
}

Why it breaks: every row looks the same, so row tracking becomes harder.

Corrected approach:

tr:nth-child(even) {
  background: #fafafa;
}

Troubleshooting

If borders look doubled, add border-collapse: collapse.

If the table feels cramped, increase cell padding.

If row tracking is difficult, add zebra striping.

If the table overflows mobile, consider switching to cards or horizontal scroll.

Quick recap

• Use borders and border-collapse
• Add cell padding for readability
• Style headers clearly
• Use zebra striping for long tables
• Simplify on mobile when needed