HTML Table Padding & Spacing

Without any padding, table cell text sits pressed right up against its own border, which is uncomfortable to read. Padding adds breathing room inside each cell, while spacing (in a non-collapsed table) adds a gap between separate cells. These two are easy to confuse but control very different things: one is space inside a cell, the other is space between cells.

In this page:

Adding Padding Inside Cells
Controlling Space Between Cells with border-spacing
Zebra Striping with Padding for Readability
Padding for Compact vs Comfortable Tables
Responsive Padding Adjustments

Adding Padding Inside Cells

padding on td and th elements adds space between the cell's border and its content, exactly like padding works on any other HTML element -- without it, text sits pressed directly against the cell edges, which looks cramped and is harder to read at a glance.

Note: A padding value between 8px and 12px on all sides is a comfortable, commonly used default for readable data tables.

Warning: Setting padding only on td and forgetting th leaves header cells visually tighter than the data rows beneath them.

Example: Adding Padding Inside Cells

markup

<style>
  td, th {
    padding: 10px;
  }
</style>
<table>
  <tr><th>Name</th></tr>
  <tr><td>Alex</td></tr>
</table>

Controlling Space Between Cells with border-spacing

border-spacing sets the gap between separate, adjacent cells -- but it only has any visible effect when border-collapse is set to separate (the table default), since border-collapse: collapse merges cell edges together and eliminates any gap to space out.

Note: Use border-spacing when you deliberately want visible gaps between cells, giving a table a card-like, segmented appearance.

Warning: border-spacing is completely ignored once border-collapse: collapse is applied, a frequent source of confusion.

Example: Controlling Space Between Cells with border-spacing

markup

<style>
  table {
    border-spacing: 10px;
  }
</style>
<table>
  <tr><td>Cell 1</td><td>Cell 2</td></tr>
</table>

Zebra Striping with Padding for Readability

Combining generous cell padding with alternating row background colors (zebra striping) makes wide data tables significantly easier to scan, since the eye can follow a single row across many columns without accidentally jumping to a neighboring row.

Note: Pair zebra striping with adequate padding (at least 8px vertically) so each striped row has enough visual weight to read as a distinct band.

Warning: Zebra striping with too little padding can look like thin, hard-to-follow lines rather than clearly readable row bands.

Example: Zebra Striping with Padding for Readability

markup

<style>
  td {
    padding: 10px;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
</style>
<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
</table>

Padding for Compact vs Comfortable Tables

Not every table needs the same amount of breathing room -- a dense data-analysis table might use compact 4-6px padding to fit more rows on screen at once, while a customer-facing pricing table might use generous 16-20px padding for a more relaxed, premium feel.

Note: Match padding density to the table's purpose: compact for data-heavy dashboards, generous for marketing or pricing tables.

Warning: Extremely compact padding on a data-dense table can make it feel cramped and increase the chance of misreading adjacent rows.

Example: Padding for Compact vs Comfortable Tables

markup

<table>
  <tr><td style="padding: 4px;">Compact</td></tr>
</table>
<table>
  <tr><td style="padding: 20px;">Comfortable</td></tr>
</table>

Responsive Padding Adjustments

On small mobile screens, generous desktop-sized padding can waste precious horizontal space, squeezing content unnecessarily. Reducing padding inside a media query for narrow viewports keeps a table's content readable without forcing excessive horizontal scrolling.

Note: Scale table padding down (not just font size) inside your mobile media query breakpoints for a genuinely comfortable small-screen table.

Warning: Leaving desktop-sized padding untouched on mobile can make a table's columns feel artificially squeezed even when the font size itself is reduced.

Example: Responsive Padding Adjustments

markup

<style>
  td {
    padding: 16px;
  }
  @media (max-width: 600px) {
    td {
      padding: 8px;
    }
  }
</style>

Common Mistakes

Confusing padding (space inside one cell, around its content) with border-spacing (the gap between separate cells).
Setting border-spacing on a table that uses border-collapse: collapse, where the property is silently ignored entirely.
Applying padding only to td and forgetting th, leaving header cells looking cramped compared to the data rows below them.

Chapter Summary

padding on td and th adds internal breathing room between a cell's border and its content.
border-spacing sets the gap between adjacent cells, but only works when border-collapse is set to separate (the default).
Consistent padding across both header and data cells keeps a table's visual rhythm even and easy to scan.

Browser Support

Table padding and border-spacing have been supported in every browser since the earliest CSS implementations.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Table Headers Next Lesson → HTML Colspan & Rowspan

HTML Table Padding & Spacing

Adding Padding Inside Cells

Controlling Space Between Cells with border-spacing

Zebra Striping with Padding for Readability

Padding for Compact vs Comfortable Tables

Responsive Padding Adjustments

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code