Свойство border-spacing задает расстояние между ячейками в таблице.
Свойство применяется только в том случае, когда каждая ячейка имеет свои собственные границы: при значении separate свойства border-collapse.
И не применимо, когда свойство border-collapse принимает значение collapse.
Это свойство применимо к таблицам.
Не поддерживается Internet Explorer до версии 8.0.
Значение свойства border-spacing
Расстояние задается в пикселях.
- одно значение - расстояние между всеми ячейками таблицы одинаковое,
- два значения – первое значение задает расстояние между ячейками по вертикали, второе – по горизонтали,
- inherit - принимает значение свойства родительского элемента.
Значение по умолчанию
Около 2 пикселей
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство border-spacing </title>
</head>
<body>
<table width="570" border="2" style="border-spacing:10px; border-color:#0000FF">
<tr>
<td> Расстояние </td>
<td> между соседними ячейками </td>
</tr>
<tr>
<td> и между ячейками и границей таблицы </td>
<td> составляет 10 пикселей </td>
</tr>
</table>
<table width="570" border="2" style="border-spacing:0px 20px; border-color:#FF00FF">
<tr>
<td> Расстояние между ячейками </td>
<td> по вертикали составляет 10 пикселей </td>
</tr>
<tr>
<td> А по горизонтали - </td>
<td> 25 пикселей </td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство border-spacing </title>
</head>
<body>
<table width="570" border="2" style="border-spacing:10px; border-color:#0000FF">
<tr>
<td> Расстояние </td>
<td> между соседними ячейками </td>
</tr>
<tr>
<td> и между ячейками и границей таблицы </td>
<td> составляет 10 пикселей </td>
</tr>
</table>
<table width="570" border="2" style="border-spacing:0px 20px; border-color:#FF00FF">
<tr>
<td> Расстояние между ячейками </td>
<td> по вертикали составляет 10 пикселей </td>
</tr>
<tr>
<td> А по горизонтали - </td>
<td> 25 пикселей </td>
</tr>
</table>
</body>
</html>
Результат
