HTML cellspacing Attribute

HTML cellspacing Attribute

The obsolete HTML cellspacing attribute was historically used with the <table> element to specify the amount of space between adjacent table cells.

Historical Syntax

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

<table cellspacing="10">
  <tr>
    <td>Cell One</td>
    <td>Cell Two</td>
  </tr>
</table>

The value specified the amount of space between adjacent table cells. Increasing the value created larger gaps between the cells.

Historical Elements

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

Historical Use

The cellspacing attribute was commonly used to create visible space between the individual cells of a table. It was often used together with cellpadding, which controlled the space inside the cells.

These two attributes controlled different types of spacing. cellspacing created space between cells, while cellpadding created space between a cell's content and its border.

Why It Became Obsolete

The cellspacing attribute controlled visual presentation directly from HTML. CSS provides the border-spacing property for controlling the distance between adjacent table cell borders.

CSS provides greater control because horizontal and vertical spacing can be specified separately when needed, and table presentation can be maintained independently from the HTML structure.

Modern Alternative

Use the CSS border-spacing property to control the space between table cells. The table must use separated borders for border-spacing to have an effect.

Historical HTML

<table border="1" cellspacing="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="spaced-table">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Garden Gloves</td>
    <td>$12.00</td>
  </tr>
</table>

<style>
.spaced-table {
  border-collapse: separate;
  border-spacing: 10px;
}

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

The CSS border-spacing property can use one value for equal horizontal and vertical spacing or two values to specify the horizontal and vertical spacing separately.

border-spacing: 10px 20px;

In this example, the first value specifies the horizontal spacing and the second value specifies the vertical spacing between cells.

Learn More About CSS Table Spacing

The CSS tutorials provide more information about controlling table spacing and presentation:

• CSS Styling Tables - Learn how to control table spacing, borders, and other presentation with CSS.
• CSS Padding - Learn how to create space inside table cells and other elements.

Legacy Browser Support

The cellspacing attribute was widely recognized by older browsers and was commonly used to control the spacing between table cells. Browsers may continue to recognize it when displaying older webpages.

Browser recognition of the cellspacing attribute does not make it valid modern HTML. When updating older tables, use the CSS border-spacing property with separated table borders.

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:

• cellpadding - Historically used to control the space inside 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 cellspacing attribute is obsolete in modern HTML. Spacing between table cells should be controlled with CSS. See the WHATWG HTML Living Standard for information about obsolete and non-conforming features.