What is Cellspacing? - Scaler Topics

The cellspacing attribute was used to add or remove the space between the table cells, i.e., you can control the space between the cells of the table without increasing the margin of what is inside the table cells. With the help of this attribute, the designers could easily change the space between the edges of different cells and alter the looks of the HTML tables. Before HTML5 was introduced, the cell spacing attribute was used to change the spaces between the cells, which is deprecated in HTML5.

Similar results of the cell spacing attribute can be achieved using relevant CSS properties. The border-spacing CSS property can be used to add or remove the spaces between the edges of the table cells. Let's look at the syntax of the border-spacing property in CSS.

Syntax

Before HTML5 was introduced, the cell spacing attribute was the only way to alter the spaces between the edges of the table's cells. Below are the syntax of the cell spacing attribute and border-spacing property.

The CSS alternative for cellspacing is:

Attribute values

The attribute value of the cellspacing attribute is given below:

As shown in the above code snippet, the cellspacing attribute has a value associated with it, representing the amount of space between the edges of the table cells. Below given is the attribute value.

pixels: The value of the cellspacing attribute can be given in pixels. As it specifies the space between the edges of the cells, it can be given in pixels.

Example

As discussed above, to add the spaces between the cells, you can use the cellspacing attribute, but as this attribute is deprecated, you can use the CSS property, which is also shown in the below example. Now, let's take some examples to understand how you can add spaces between the edges of the table cells.

Output:

Output of cellspacing having the value equal to 7

Note: The cellspacing attribute is deprecated in HTML5, hence you should not use it. You can derive the same results with the help of the CSS property border-spacing.

Let's take a look at how you can achieve the same output by using the border-spacing property in CSS.

Output: Output of border spacing having the value equal to 7px

As you can see, both the outputs are the same; hence, you should use the CSS property border-spacing to handle the space between the edges of the cells.

Learn more

Like the cellspacing attribute, various attributes are specific to the HTML tables. To learn more about table attributes in HTML, you can refer to - Scaler Topics - Table Attributes.

Conclusion

The cellspacing attribute is used to set the distance or the space between the edges of the cells of the table.
The table's looks can be improved by using the cellspacing attribute in HTML. It increases the space between the cells.
The value of the cellspacing attribute can be given in the pixels.
The cellspacing attribute is deprecated in HTML5 and shouldn't be used to alter the space between the table's cells.
There is a CSS property named border-spacing, which produces similar results as the cellspacing attribute.