Відстань між осередками помітна під час використання меж навколо осередків або заливки осередків кольором, що виділяється на тлі веб-сторінки. Для керування відстанню між осередків використовується стильова властивість border-spacing. Якщо задане єдине значення, воно встановлює відстанню між сусідніми осередками. Якщо задати два значення, то перше визначає відстань по горизонталі (тобто ліворуч і праворуч від осередку), а друге по вертикалі (зверху і знизу).
У прикладі 1 показано додавання властивості border-spacing до селектора table.
Приклад 1. Використання border-spacing
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Відстань між осередками</title> <style> table { width: 100%; /* Ширина таблиці */
border: 1px solid #333; /* Кордон навколо таблиці */
border-spacing: 7px 5px; /* Відстань між осередків */
}
td { background: #fc0; /* Колір тла */
border: 1px solid #333; /* Кордон навколо осередків */
padding: 5px; /* Поля в осередках */
}
</style>
</head>
<body> <table> <tr><td>Леонардо</td><td>5</td><td>8</td></tr> <tr><td>Рафаель</td><td>4</td><td>11</td></tr> <tr><td>Мікеланджело</td><td>24</td><td>9</td></tr> <tr><td>Донателло</td><td>2</td><td>13</td></tr>
</table>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Вигляд таблиці під час використання border-spacing
При додаванні до селектора table властивості border-collapse зі значенням collapse, значення border-spacing ігнорується, вигляд самої таблиці змінюється (мал. 2).
Мал. 2. Вигляд таблиці при використанні border-collapse з collapse