Table Borders

You will be able to draw borders around table cells and collapse adjacent borders into a single clean line.

What it is

Table borders are CSS borders applied to a table, th, or td element. A table can use two border models. The default model keeps each cell border separate, which often creates double lines between adjacent cells. The collapsed model merges touching borders into one line, making data tables look tighter and more professional.

Related terms include border-collapse, border-spacing, border, and padding. Padding is not a border, but it is usually added with borders so text does not touch the lines. In most practical table styling, you set the border model on the table and then style the cells directly.

Why it matters

• It removes ugly double borders between adjacent cells.
• It makes tables easier to scan, especially for reports, invoices, and dashboards.
• It gives you predictable control over outer and inner lines.
• It helps separate header rows from body rows without extra markup.
• It creates a cleaner visual grid for dense tabular data.

Syntax or steps

1. Set border-collapse: collapse; on the table.
2. Apply a border to the cells you want outlined, usually th and td.
3. Add padding so content has breathing room.
4. Optionally style the outer table border or header border differently.
5. Use border-spacing only when you intentionally want separate borders.

Example

<table class="report">
  <thead>
    <tr>
      <th>Item</th>
      <th>Qty</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget</td>
      <td>12</td>
    </tr>
    <tr>
      <td>Gadget</td>
      <td>7</td>
    </tr>
  </tbody>
</table>

.report {
  border-collapse: collapse;
  width: 100%;
}

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

.report thead th {
  background: #f7f7f7;
  border-bottom: 2px solid #999;
}

Part-by-part explanation

• .report turns on collapsed borders for the whole table.
• .report th, .report td draws a light border around every header and data cell.
• padding: 8px; keeps text away from the border.
• .report thead th makes the header row visually stronger with a background and a thicker bottom border.
• The table still uses normal HTML structure, so the CSS improves presentation without changing the data.

Common mistakes

• Putting border-collapse on td instead of table. It belongs on the table.
• Forgetting borders on cells. If only the table has a border, inner cells may still look open.
• Using large border-spacing while expecting collapsed borders. Spacing only applies when borders are separate.
• Adding borders to tr and expecting clean cell lines. In collapsed tables, style th and td for predictable results.

When to use it

Use collapsed borders for most data tables. Use separate borders when you need visible gaps between cells or rounded corners on individual cells.

Practice

Guided exercise: Create a table with two columns and three rows. Add a 1 pixel solid border to every cell, then collapse the borders.

Challenge: Make the header row have a darker bottom border than the body rows.

Expected result: The table should show one line between cells, not double lines, and the header should stand out.

Quick check

Question: Which property merges adjacent table cell borders into a single line?

Answer: border-collapse: collapse; on the table.

Summary

Table borders are easiest to control when you set the border model on the table and style the cells directly. Collapsing borders gives you a clean, single-line grid that works well for most tabular data.