HTML cellpadding Attribute

Introduction

In HTML, the cellpadding attribute is used within table elements to control the amount of space between the content of a cell and its border. This attribute allows developers to adjust the padding of individual cells within a table, enhancing the visual presentation and spacing of tabular data.

What You’ll Learn

Purpose of cellpadding Attribute

The primary purpose of the cellpadding attribute is to specify the amount of space, in pixels, between the content of a table cell and its border. By default, most browsers apply some level of padding to table cells for better readability. However, the cellpadding attribute provides developers with the ability to customize this padding according to their design requirements.

📝 Syntax

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

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

Syntax Rules

• Set on the <table> element only — not on individual td or th cells.
• Value is a non-negative integer representing pixels of internal cell padding.
• cellpadding="0" removes internal padding from all cells.
• For per-cell control, use CSS padding on td and th instead.

💎 Values

The cellpadding attribute accepts a numerical value representing the desired amount of padding in pixels. The higher the value, the more space will be added between the content of the cell and its border. A value of 0 (zero) indicates no padding, while larger values increase the padding proportionally.

<table cellpadding="0">...</table>
<table cellpadding="10">...</table>
<table cellpadding="20">...</table>

<!-- CSS alternative -->
<style>
  td, th { padding: 10px; }
</style>

Applicable Elements

Examples Gallery

Implementation example with cellpadding and dynamic JavaScript cellPadding.

<table cellpadding="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 cellpadding for a table
  var table = document.getElementById("dynamicTable");
  table.cellPadding = 15;
</script>

♿ Accessibility

• Adequate padding helps readability — Enough space around cell text makes tables easier to scan.
• Do not rely on spacing alone — Use proper <th> headers and <caption> for structure.
• Avoid excessive padding — Very large values can break layouts on small screens.
• Use responsive CSS — CSS padding can adapt with media queries better than fixed HTML attributes.
• Maintain contrast — Padding does not replace readable text and background contrast.

💡 Best Practices

• Use the cellpadding attribute to control the spacing between the content of table cells and their borders, ensuring optimal readability and visual presentation of tabular data.
• Avoid excessive padding values, as they can negatively impact the overall layout and aesthetics of the table.
• Test your tables across different browsers to ensure consistent rendering and spacing, as browser behavior may vary.