The border-spacing property

The border-spacing property specifies a distance between td or th cells of HTML table (and also between the cell border and the table itself). The property value is any size units, except percentages.

Syntax

selector {
	border-spacing: one or two values;
}

Values

Value	Description
one value	One value specifies equal vertical and horizontal space between cells.
two values	The first value specifies the horizontal spacing, and the second value specifies the vertical one.

Default value: 0. However, each browser has its own, non-zero cellspacing attribute value, so by default you will see spacing between cells.

Comments

Apply the property to the table, not its cells (it will not work for cells).

A similar effect cannot be achieved using margin, since margin does not work for table cells.

If the border-collapse property is set to collapse then border-spacing will not work.

Example . One value

Let's make the 10px spacing between cells (and between the cell and the table border):

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-spacing: 10px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

Example . Two values

Now let’s make spacing of 10px horizontally and 30px vertically:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-spacing: 10px 30px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

Example . Let's set border-collapse: collapse

But now border-spacing will not work due to the border-collapse property in the value of collapse:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: collapse;
	border-spacing: 10px 30px;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}