HTML Cellpadding & Cellspacing Explained | Table Padding and Spacing Complete Guide

HTML Tutorials · HTML Table Padding & Spacing Tag · Introduction

How to Add Padding & Spacing in HTML Tables | Cellpadding, Cellspacing & CSS Guide

When user or coder writing HTML code, working with HTML tables, making them look clean and readable is just as important as displaying the data itself. Two key aspects that control the appearance of content inside a table are padding and spacing.

What is Padding in HTML Tables?

Padding refers to the space inside a table cell, between the content (text or images) and the cell border. It gives your content some breathing room, making the table more readable and visually appealing.

💡 How to Add Padding Example

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

Padding and Spacing Examples

📋 1. Cell Padding (padding)

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

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Desktop</td>
    <td>$500</td>
  </tr>
</table>

🧹 2. Cell Spacing (cellspacing) – Modern CSS Method

<style>
  table {
    border: 1px solid black;
    border-collapse: separate;
    border-spacing: 10px;
  }
  th, td {
    border: 1px solid black;
    padding: 5px;
  }
</style>

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Desktop</td>
    <td>$500</td>
  </tr>
</table>

🧹 Cell Spacing (cellspacing) – Old HTML Method

<table border="1" cellspacing="10">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Desktop</td>
    <td>$500</td>
  </tr>
</table>

🧹 Cell Padding (cellpadding) – Old HTML Method

The same legacy approach also exists for padding, using the cellpadding attribute directly on the table tag, often combined with cellspacing in the same tag:

<table border="1" cellpadding="10" cellspacing="10">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Desktop</td>
    <td>$500</td>
  </tr>
</table>

🔍 Table Tag Breakdown

Try It Yourself (Copy This Code and Paste. See how it works). Paste any padding or spacing example above into the live playground below and adjust the pixel values to see the change instantly.

Live Code Preview

Cellpadding vs Cellspacing: What Is the Difference?

The two terms sound similar and are frequently confused, but they control two entirely different gaps in a table's layout.

A helpful way to picture the difference: cellpadding pushes the border of a single cell outward, away from its own content, while cellspacing pushes an entire cell away from its neighbors, leaving a visible gap between two separate cells rather than more room inside just one.

border-collapse and Why It Matters for Spacing

The Modern CSS Method example earlier on this page pairs border-spacing with border-collapse: separate;, and that pairing is not optional, border-spacing only has a visible effect when cells are allowed to remain separate rather than merged.

This is exactly why the Cell Padding example earlier on this page uses border-collapse: collapse;, since a single-line grid with generous padding is the goal there, while the Cell Spacing example intentionally leaves border-collapse: separate; in place so the gaps between cells can actually appear.

Responsive Table Spacing on Mobile

Generous padding and spacing values that look comfortable on a desktop monitor can quickly consume too much of a narrow phone screen, leaving very little room for actual content. A couple of adjustments keep padded, spaced tables usable on small devices.

• Reduce padding at smaller screen widths using a media query, rather than keeping the same generous value across every device.
• Wrap a spaced table in a horizontally scrollable container (overflow-x: auto;) so generous padding does not force the whole page to widen.
• Test the Cell Padding example's 50px value specifically, which is deliberately generous for a desktop demonstration but would likely feel excessive on a phone-sized table with many columns.

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

Common Mistakes With Table Padding and Spacing

• Forgetting border-collapse: separate; when trying to use border-spacing, resulting in a spacing value that appears to do nothing.
• Using extremely large padding values, such as the 50px demonstration on this page, on a real, data-dense table, which can make the table awkwardly tall or force horizontal scrolling.
• Mixing the legacy cellpadding/cellspacing attributes with modern CSS on the same table, which can produce confusing, conflicting results.
• Not testing padded or spaced tables on mobile, where generous desktop values can consume too much of a narrow screen.
• Assuming padding and spacing are the same thing, when they control two genuinely different gaps, as the comparison table earlier on this page explains.

Practice Exercises: Try Every Padding and Spacing Technique

The fastest way to make padding and spacing feel intuitive is to build a few variations yourself. Try each of these directly in the live editor above:

1. Recreate the Cell Padding example, then reduce the padding from 50px to a more realistic 12px.
2. Recreate the Modern CSS Method spacing example, then change border-spacing from 10px to 20px and compare.
3. Build a table with both cellpadding="10" and cellspacing="10" using the legacy attributes, then rebuild the exact same look with modern CSS instead.
4. Set border-collapse: collapse; on a table that also has border-spacing set, and confirm the spacing disappears.
5. Add a media query that reduces padding on small screens, then resize your browser window to see it take effect.

Working through these five exercises covers every padding and spacing technique discussed in this tutorial, both legacy and modern.

Frequently Asked Questions About HTML Cellpadding and Cellspacing