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

Вигляд порожніх комірок таблиці в CSS

Вивчаємо властивість empty-cells, яка керує відображенням порожніх комірок у HTML-таблицях.

Властивість empty-cells

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

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

Значення властивості

  • show — порожні комірки відображаються (значення за замовчуванням).
  • hide — порожні комірки приховуються.

Приклад таблиці з порожньою коміркою


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

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

Стандартна поведінка


table {
  empty-cells: show;
}

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

Приховування порожніх комірок


        
table {
  empty-cells: hide;
}

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

Взаємодія з border-collapse

Властивість empty-cells працює тільки при режимі border-collapse: separate. При collapse межі комірок об'єднуються, тому empty-cells не впливає на результат.

❗ Важливо:

У сучасній верстці ця властивість використовується рідко, але вона може бути корисною при створенні складних таблиць.

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

📌 Завдання:
  1. №1. Створіть таблицю 3×3.
  2. №2. Залиште одну комірку порожньою.
  3. №3. Додайте межі коміркам.
  4. №4. Перевірте роботу empty-cells зі значеннями show та hide.
💡 Показати підказку

Властивість empty-cells задається для елемента table, а не для td.

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

table {
  empty-cells: hide;
  border-collapse: separate;
}

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