HTML cellpadding Attribute

HTML cellpadding Attribute

The obsolete HTML cellpadding attribute was historically used with the <table> element to specify the amount of space between the content of each table cell and the cell's border.

Historical Syntax

The cellpadding attribute was added to the <table> element and assigned a numeric value:

<table cellpadding="10">
  <tr>
    <td>Table content</td>
  </tr>
</table>

The value specified the amount of space between the contents of the table cells and their borders. The setting applied to the cells throughout the table.

Historical Elements

The cellpadding attribute was historically associated with the <table> element.

Historical Use

The cellpadding attribute was commonly used to prevent text and other content from appearing too close to the edges of table cells. Increasing the value created more space inside each cell and often made table content easier to read.

The attribute was applied to the table rather than to individual cells, so the specified cell padding was generally used throughout the table. Authors who needed more detailed control had limited options compared with modern CSS.

Why It Became Obsolete

The cellpadding attribute controlled presentation directly from HTML. CSS provides the padding property, which can control the space inside table cells as well as nearly any other element.

CSS also provides much greater control. Padding can be applied to selected cells, different types of cells, or individual sides of a cell without changing the HTML structure.

Modern Alternative

Use the CSS padding property on <th> and <td> elements to control the space between table cell content and the cell border.

Historical HTML

<table border="1" cellpadding="10">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Garden Gloves</td>
    <td>$12.00</td>
  </tr>
</table>

Modern HTML and CSS

<table class="product-table">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Garden Gloves</td>
    <td>$12.00</td>
  </tr>
</table>

<style>
.product-table {
  border-collapse: collapse;
}

.product-table th,
.product-table td {
  padding: 10px;
  border: 1px solid #333;
}
</style>

Unlike the old cellpadding attribute, CSS can control the padding on each side of a cell independently with properties such as padding-top, padding-right, padding-bottom, and padding-left.

Learn More About CSS Table Spacing

The CSS tutorials provide more information about padding and styling tables:

• CSS Padding - Learn how padding creates space between an element's content and its border.
• CSS Box Model - Learn how content, padding, borders, and margins work together.
• CSS Styling Tables - Learn how to control table spacing, borders, and other presentation with CSS.

Legacy Browser Support

The cellpadding attribute was widely recognized by older browsers and was commonly used to control spacing inside table cells. Its widespread historical use means browsers may continue to recognize it when displaying older webpages.

Browser recognition of the cellpadding attribute does not make it valid modern HTML. When updating older tables, use the CSS padding property on the appropriate <th> and <td> elements.

For additional information about historical browser compatibility, visit Can I Use? . Search for the HTML element or attribute you want to check. Search results can include related HTML features, element attributes, APIs, and other technologies, so select the result that most closely matches the legacy feature you are researching.

Related Attributes

Other obsolete HTML attributes historically used to control table spacing and presentation include:

• cellspacing - Historically used to control the space between table cells.
• border - Historically used to request or control visible table borders.
• bordercolor - Historically used to specify the color of table borders.
• bgcolor - Historically used to specify table and table cell background colors.
• frame - Historically used to control which outer borders of a table were displayed.
• rules - Historically used to control borders between table rows and columns.

Specifications

The cellpadding attribute is obsolete in modern HTML. Spacing inside table cells should be controlled with CSS. See the WHATWG HTML Living Standard for information about obsolete and non-conforming features.