Урок 19 із 104
18%
← Назад

Відстань між комірками таблиці в CSS

Вивчаємо властивість border-spacing, яка дозволяє задавати проміжок між комірками HTML-таблиці.

Властивість border-spacing

Властивість border-spacing використовується для встановлення відстані між межами сусідніх комірок таблиці.

Вона працює тільки тоді, коли таблиця використовує стандартний режим відображення меж (border-collapse: separate).

Синтаксис


table {
  border-spacing: 20px;
}
  • Одне значення — задає однакову відстань між рядками і стовпцями.
  • Два значення — перше задає відстань між стовпцями, друге між рядками.

Приклад таблиці


<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>

  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

table {
  border-spacing: 15px;
}

td {
  border: 1px solid black;
  padding: 10px;
}

Різні відступи по горизонталі та вертикалі


table {
  border-spacing: 30px 10px;
}

У цьому прикладі між стовпцями буде 30px, а між рядками — 10px.

border-spacing та border-collapse

Якщо встановити border-collapse: collapse, властивість border-spacing перестане працювати, оскільки межі комірок будуть об'єднані.

❗ Важливо:

Для таблиць із проміжками між комірками використовуйте border-collapse: separate. Для таблиць із суцільними межами — border-collapse: collapse.

Практичне завдання

📌 Завдання:
  1. №1. Створіть таблицю 3×3.
  2. №2. Додайте межі всім коміркам.
  3. №3. Встановіть відстань між комірками за допомогою border-spacing.
💡 Показати підказку

Властивість border-spacing задається для таблиці, а не для окремих td.

✅ Показати відповідь

table {
  border-spacing: 20px;
}

td {
  border: 1px solid black;
  padding: 10px;
}