📊 СКЛАДНІ ТАБЛИЦІ

1. Складні таблиці

1.1 Структурні теги

• <caption>: **Заголовок** або підпис до таблиці.
• <thead>: Група вмісту, що позначає **шапку** таблиці.
• <tbody>: Група вмісту, що позначає **основне тіло** таблиці.
• <tfoot>: Група вмісту, що позначає **підвал** (футер) таблиці (наприклад, для підсумків).

1.2 Об'єднання комірок у HTML-таблицях

Атрибути colspan і rowspan дозволяють ячейкам об'єднувати кілька стовпців або рядків відповідно.

Приклад 1: Об'єднання стовпців

<table border="1">
    <tr>
        <th colspan="3">Історичні періоди України (об'єднано 3 стовпці)</th>
    </tr>
    <tr>
        <td>Київська Русь</td>
        <td>Козацька доба</td>
        <td>Сучасність</td>
    </tr>
    <tr>
        <td colspan="2">Галицько-Волинське князівство (об'єднано 2 стовпці)</td>
        <td>XXI століття</td>
    </tr>
</table>

Приклад 2: Об'єднання рядків

<table border="1">
    <tr>
        <th>Місто</th>
        <th>Визначна пам'ятка</th>
    </tr>
    <tr>
        <td rowspan="2">Київ</td>
        <td>Софійський собор</td>
    </tr>
    <tr>
        <td>Києво-Печерська лавра</td>
    </tr>
    <tr>
        <td>Львів</td>
        <td>Площа Ринок</td>
    </tr>
</table>

Приклад 3: Комбіноване об'єднання

<table border="1">
    <tr>
        <th colspan="2" rowspan="2">Об'єднано 2×2 (стовпці та рядки)</th>
        <th>Область</th>
    </tr>
    <tr>
        <td>Київська</td>
    </tr>
    <tr>
        <td>Чернігів</td>
        <td>Чернігівська</td>
        <td>Сіверщина</td>
    </tr>
</table>

2. Стилізація таблиць за допомогою CSS (Базовий стиль)

Це стандартний, чистий стиль, який використовує чергування кольорів рядків ("Зебра").

/* CSS для 3. Базовий стиль */
.styled-table-example {
  border-collapse: collapse; /* Схлопує подвійні границі в одну (обов'язково!) */
  width: 100%; /* Задає повну ширину таблиці */
}
.styled-table-example th, .styled-table-example td {
  border: 1px solid #ddd; /* Товщина, стиль та колір границь */
  padding: 12px 15px; /* Внутрішні відступи */
}
.styled-table-example tbody tr:nth-child(even) {
  background-color: #f3f3f3; /* Фон для парних рядків (ефект "зебри") */
}
.styled-table-example tbody tr:hover {
  background-color: #e9e9e9; /* Фон при наведенні курсору (інтерактивність) */
}
        

3. Додаткові приклади HTML-структур

3.1. Фіксована ширина стовпців та стилізація підсумкового рядка

Відображення:

/* CSS для 4.1. Фіксована ширина */
.fixed-width-table {
  table-layout: fixed; /* Визначає фіксовану ширину стовпців */
}
.fixed-width-table tfoot td {
  background-color: #007bff; /* Фон для підсумкового рядка (тег <tfoot>) */
  color: #ffffff;
  font-weight: bold;
}
        

4. Красиве оформлення таблиць у різних стилях CSS

4.1. Стиль "Мінімалізм"

Використовує лише тонкі горизонтальні лінії для максимальної читабельності.

Відображення:

/* CSS для 4.1. Мінімалізм */
.table-minimal th, .table-minimal td {
  border: none; /* Видаляємо всі стандартні границі */
}
.table-minimal tr {
  border-bottom: 1px solid #ddd; /* Додаємо лише нижню горизонтальну лінію */
}
        

4.2. Стиль "Картковий" (Без границь)

Рядки візуально відокремлені відступами та тінями, а не лініями.

Відображення:

/* CSS для 4.2. Картковий */
.table-cards {
  border-collapse: separate; /* Дозволяє відступи між ячейками */
  border-spacing: 0 10px; /* Вертикальний відступ 10px між рядками */
}
.table-cards tbody tr {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Легка тінь навколо кожного рядка-картки */
  border-radius: 8px; /* Заокруглення кутів рядка */
}
        

4.3. Стиль "Акцентний"

Виділення важливого стовпця за допомогою кольору фону.

Відображення:

/* CSS для 4.3. Акцентний */
.accent-column {
  background-color: #fffde7; /* Світло-жовтий фон для акцентного стовпця */
  font-weight: bold;
  color: #d84315; 
}
.table-accent thead .accent-column {
  background-color: #ffcc80; /* Інший фон для заголовка акцентного стовпця */
}

/* HTML: застосовуємо клас до потрібних комірок */
<td class="accent-column">...</td>
        

5. Просунуті Стилі: Градієнти та Тіні

5.1. Стиль "Градієнтна Шапка та Тінь"

Відображення:

/* CSS для 5.1. Градієнтна Шапка та Тінь */
.table-gradient {
  border-radius: 8px; 
  overflow: hidden; /* Обрізає градієнт по заокруглених кутах */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Тінь: зміщення по X, Y, розмиття, колір */
}
.table-gradient thead th {
  background: linear-gradient(135deg, #74b9ff, #007bff); /* Лінійний градієнт: кут, колір1, колір2 */
}
        

5.2. Стиль "Фокус на Рядках" (Hover Accent)

Відображення:

/* CSS для 5.2. Фокус на Рядках */
.table-hover-accent tbody tr {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; /* Плавність переходу (властивості, час, функція) */
}
.table-hover-accent tbody tr:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
  transform: scale(1.02); /* Збільшує розмір рядка на 2% */
  cursor: pointer; 
}
        

5.3. Стиль "Заповнені Границі та Пастель"

Відображення:

/* CSS для 5.3. Пастель */
.table-pastel {
  border-collapse: collapse;
  border: 3px solid #b2ebf2; /* Товста зовнішня границя */
}
.table-pastel th {
  background-color: #e0f7fa; /* Пастельний фон шапки */
  border: 1px solid #b2ebf2; 
}
.table-pastel .status-ok {
  background-color: #c8e6c9; /* Світло-зелений фон для акценту */
}
        

6. 📱 Адаптивні Таблиці (Responsive Tables)

Техніки для коректного відображення таблиць на мобільних пристроях.

6.1. Метод: Горизонтальний Скрол

Відображення:

/* CSS для 6.1 */
.table-responsive {
  overflow-x: auto; /* Ключова властивість: дозволяє прокрутку по осі X */
}
.table-responsive table {
  min-width: 600px; /* Задаємо мінімальну ширину, щоб примусити скрол */
}
        

6.2. Метод: Трансформація в "Картки"

Відображення (перевірте на вузькому екрані):

/* HTML: data-label - заголовок стовпця */
<td data-label="Елемент">Контактна форма</td>

/* CSS для 7.2 - Усередині @media screen and (max-width: 600px) */
.table-card thead { display: none; } /* Скриваємо шапку на мобільних */
.table-card td { display: block; /* Ячейка стає вертикальним блоком */ }
.table-card td::before {
  content: attr(data-label); /* Вставляємо вміст атрибута data-label */
  position: absolute;
}
        

© 2025 Методичний посібник з HTML та CSS таблиць