HTML Table Padding & Spacing

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.

Example: Adding Padding Inside Cells

<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.

Example: Controlling Space Between Cells with border-spacing

<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.

Example: Zebra Striping with Padding for Readability

<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.

Example: Padding for Compact vs Comfortable Tables

<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.

Example: Responsive Padding Adjustments

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