HTML cellspacing Attribute

Introduction

The cellspacing attribute is an attribute in HTML used within the <table> element to define the spacing between cells in a table. It allows developers to control the amount of space between adjacent cells both vertically and horizontally.

What You’ll Learn

Purpose of cellspacing Attribute

The primary purpose of the cellspacing attribute is to adjust the visual presentation of tables by specifying the amount of space between table cells. This can help improve readability and aesthetics of the table layout.

📝 Syntax

Add cellspacing to the <table> element with a pixel value:

<table cellspacing="10" border="1">
  <tr><td>Cell</td></tr>
</table>

Syntax Rules

• Set on the <table> element only.
• Value is a non-negative integer representing pixels between cells.
• cellspacing="0" removes gaps so cells appear adjacent.
• For modern layouts, use CSS border-spacing on the table.

💎 Values

The cellspacing attribute accepts numerical values, typically in pixels, to determine the amount of space between cells. Common values include integers representing the number of pixels for the desired spacing. A value of 0 (zero) removes any spacing between cells, effectively making them appear adjacent to each other.

<table cellspacing="0">...</table>
<table cellspacing="10">...</table>

<!-- CSS alternative -->
<style>
  table { border-spacing: 10px; }
</style>

Applicable Elements

Examples Gallery

Implementation example with cellspacing and dynamic JavaScript cellSpacing.

<table cellspacing="10">
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

<table id="dynamicTable">...</table>

<script>
  // Dynamically set cellspacing for a table
  document.getElementById("dynamicTable").cellSpacing = "5";
</script>

♿ Accessibility

• Spacing aids scanning — Moderate gaps between cells can make dense tables easier to read.
• Do not rely on spacing alone — Use headers, captions, and semantic structure for accessibility.
• Avoid excessive gaps — Large cellspacing values can push content off small screens.
• Use responsive CSS — border-spacing adapts better than fixed HTML attributes.
• Maintain contrast — Cell gaps show the page background; ensure borders and text remain readable.

💡 Best Practices

• Use cellspacing judiciously to enhance the visual presentation of tables without cluttering the layout with excessive space.
• Test the appearance of tables with different cellspacing values to find the optimal spacing for your design.
• Remember that excessive spacing may lead to tables occupying more space on the page, so balance aesthetics with functionality.