How to set cellpadding and cellspacing in CSS

Use the padding and border-spacing CSS properties to set cellpadding and cellspacing in CSS.

Before HTML5 came along, the HTML table attributes cellpadding and cellspacing were used to set the amount of space between the content of a cell and its edges, as well as between cells, respectively.

Although these HTML equivalents may still work in some browsers, this is mainly for backward compatibility purposes, and their usage is now outdated.

The currently recommended method of setting cell padding and spacing is to do so using CSS, as that is where style adjustments are now meant to be made.

Adjusting cell padding and cell spacing using CSS

In this example, you have a table on a HTML page, and would like to adjust the padding and spacing of its cells:

<html>
	<body>
		<table>
			<tr>
				<th>Color</th>
				<th>Size</th>
			</tr>
			<tr>
				<td>Blue</td>
				<td>Small</td>
			</tr>
		</table>
	</body>
</html>

Here, the padding and border-spacing CSS properties are used to make these adjustments:

table {
	border-spacing: 2px;
}
th, td {
	padding: 3px;
}

That’s all there is to it! Both the cell padding and cell spacing have now been adjusted using CSS.