# 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; }`

:

← →
↑
en ru