How to Add a Border to a Table in HTML

Use CSS borders when you want table rows and columns to be easier to scan. Borders make pricing tables, schedules, and comparison charts much clearer by separating each cell visually.

What you’ll build or solve

You’ll learn how to add borders to an HTML table using CSS. You’ll also know how to apply borders to the full table and to each individual cell.

When this approach works best

This approach is the right choice when readers need to compare values across rows and columns quickly.

Common real-world scenarios include:

• Pricing tables
• Product comparisons
• Schedules
• Student grade sheets
• Scoreboards

This is a bad idea when the design intentionally uses whitespace-only separation. In that case, spacing and background colors may work better than visible lines.

Prerequisites

You only need:

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

Step-by-step instructions

Step 1: Add a border to the table and cells

Apply the border property to the table, header cells, and data cells.

<table class="pricing">
  <tr>
    <th>Plan</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Basic</td>
    <td>$9</td>
  </tr>
</table>

<style>
  .pricing,
  .pricing th,
  .pricing td {
    border: 1px solid black;
  }
</style>

To avoid double lines between cells, add border-collapse.

<table class="pricing">
  <tr>
    <th>Plan</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Basic</td>
    <td>$9</td>
  </tr>
</table>

<style>
  .pricing,
  .pricing th,
  .pricing td {
    border: 1px solid black;
  }

  .pricing {
    border-collapse: collapse;
  }
</style>

What to look for:

• Apply the border to the table and each th and td
• Use border-collapse: collapse for clean single lines
• 1px solid black is the most common starting point
• Add padding later if the cells feel cramped
• Keep the border style on the same table selector group

Examples you can copy

Pricing table border

<table class="pricing">
  <tr>
    <th>Plan</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Pro</td>
    <td>$19</td>
  </tr>
</table>

<style>
  .pricing,
  .pricing th,
  .pricing td {
    border: 1px solid black;
  }

  .pricing {
    border-collapse: collapse;
  }
</style>

Grade table

<table class="grades">
  <tr>
    <th>Student</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>Ana</td>
    <td>A</td>
  </tr>
</table>

<style>
  .grades,
  .grades th,
  .grades td {
    border: 1px solid black;
  }

  .grades {
    border-collapse: collapse;
  }
</style>

Schedule table

<table class="schedule">
  <tr>
    <th>Day</th>
    <th>Task</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>HTML</td>
  </tr>
</table>

<style>
  .schedule,
  .schedule th,
  .schedule td {
    border: 1px solid black;
  }

  .schedule {
    border-collapse: collapse;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Adding a border only to the table

What the reader might do:

<style>
  table {
    border: 1px solid black;
  }
</style>

Why it breaks: only the outer edge gets a border, so the cells inside are still visually merged.

Corrected approach:

<style>
  table,
  th,
  td {
    border: 1px solid black;
  }
</style>

Mistake 2: Forgetting border-collapse

What the reader might do:

<style>
  table,
  th,
  td {
    border: 1px solid black;
  }
</style>

Why it breaks: the table may show doubled borders between cells.

Corrected approach:

<style>
  table,
  th,
  td {
    border: 1px solid black;
  }

  table {
    border-collapse: collapse;
  }
</style>

Mistake 3: Making the border too thick

What the reader might do:

<style>
  table,
  th,
  td {
    border: 10px solid black;
  }
</style>

Why it breaks: thick borders overpower the data and make the table harder to scan.

Corrected approach:

<style>
  table,
  th,
  td {
    border: 1px solid black;
  }
</style>

Troubleshooting

If only the outside border appears, add the same border rule to th and td.

If the lines look doubled, add border-collapse: collapse.

If the cells feel crowded, add padding to th and td.

If the border style does not apply, confirm the table class matches the CSS selector.

Quick recap

• Add border to the table, th, and td
• Use border-collapse: collapse for clean lines
• Start with 1px solid black
• Add padding if cells feel cramped
• Check selectors if the border does not appear