📊 ПРОСТІ ТАБЛИЦІ

1. Розмітка таблиці

Таблиці в HTML використовуються для представлення табличних даних — інформації, організованої у рядки та стовпці. За допомогою таблиць зручно верстати макети сторінок, розміщуючи потрібним чином фрагменти тексту та зображень.

Таблиця складається зі рядків, рядки складаються з комірок. Комірки можуть містити текст і зображення. Для додавання таблиці на веб-сторінку використовується тег <table>. Цей елемент служить контейнером для елементів <tr>, які визначають рядки таблиці. Кожен рядок служить контейнером для елементів <th> або <td>, які визначають комірки. Вміст елемента <th>, на відміну від <td>, виводиться жирним шрифтом і вирівнюється по центру.

Всі властивості для таблиць вказуються у таблиці стилів.

Всередині комірок можуть знаходитися картинки. Для цього у контейнерах <td> або <th> вставляється тег <img>.

1.1 Основні елементи таблиці

<table> — контейнер для всієї таблиці
<tr> (Table Row) — визначає рядок таблиці
<td> (Table Data) — визначає ячейку з даними
<th> (Table Header) — визначає заголовкову ячейку (жирний текст, центрування)

1.2 Базовий приклад HTML-таблиці

💻 Код HTML:


<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Історичні пам'ятки України</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 600px;
            margin: 20px auto;
            padding: 20px;
            background-color: #f9f9f9;
        }
        h1 {
            color: #0057b7;
            text-align: center;
            margin-bottom: 30px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #ffd700;
            color: #0057b7;
            font-weight: bold;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
        .highlight {
            font-weight: bold;
            color: #0057b7;
        }
    </style>
</head>
<body>
    <h1>Історичні пам'ятки України</h1>
    
    <table>
        <thead>
            <tr>
                <th>Період</th>
                <th>Пам'ятка</th>
                <th>Локація</th>
                <th>Зображення</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Київська Русь</td>
                <td>Софійський собор</td>
                <td>Київ</td>
                <td><img src="16/1/sofiya.jpg" /></td>
            </tr>
            <tr>
                <td>Київська Русь</td>
                <td>Києво-Печерська лавра</td>
                <td>Київ</td>
                <td><img src="16/1/lavra.jpg" /></td>
            </tr>
            <tr>
                <td>Козацька доба</td>
                <td>Хортицька Січ</td>
                <td>Запоріжжя</td>
                <td><img src="16/1/hortica.jpg" /></td>
            </tr>
            <tr>
                <td>Середньовіччя</td>
                <td>Луцький замок</td>
                <td>Луцьк</td>
                <td><img src="16/1/Lubart.jpg" /></td>
            </tr>
            <tr>
                <td>Галицько-Волинська держава</td>
                <td>Олеський замок</td>
                <td>Львівська область</td>
                <td><img src="16/1/Olessky.jpg" /></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

📊 Результат:

Історичні пам'ятки України

Період	Пам'ятка	Локація
Київська Русь	Софійський собор	Київ
Київська Русь	Києво-Печерська лавра	Київ
Козацька доба	Хортицька Січ	Запоріжжя
Середньовіччя	Луцький замок	Луцьк
Галицько-Волинська держава	Олеський замок	Львівська область

1.3 Структура таблиці: thead, tbody, tfoot

Для кращої організації великих таблиць використовуються додаткові елементи:

<thead> — група рядків заголовка
<tbody> — група рядків з основними даними
<tfoot> — група рядків підсумку (футер)

💻 Код HTML:

<table>
  <thead>
    <tr>
      <th>Продукт</th>
      <th>Ціна</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Хліб</td>
      <td>15 грн</td>
    </tr>
    <tr>
      <td>Молоко</td>
      <td>30 грн</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Разом:</td>
      <td>45 грн</td>
    </tr>
  </tfoot>
</table>

📊 Результат:

Продукт	Ціна
Хліб	15 грн
Молоко	30 грн
Разом:	45 грн

↑ Догори

2. Межі таблиці

2.1 Додавання границь

Щоб таблиця мала видимі границі, використовуємо CSS властивість border.

table, th, td {
  border: 1px solid black;
}

2.2 Схлопування границь

Властивість border-collapse: collapse; об'єднує подвійні границі в одну лінію.

table {
  border-collapse: collapse;
}

Без collapse:

A	B
1	2

З collapse:

A	B
1	2

2.3 Різні стилі границь

table {
  border: 3px solid #333; /* Товста зовнішня границя */
}

td {
  border: 1px dotted #999; /* Пунктирні внутрішні границі */
}

↑ Догори

3. Фон і текст

3.1 Колір фону

Використовуйте властивість background-color для зміни кольору фону.

thead th {
  background-color: #4CAF50;
  color: white;
}

tbody tr:nth-child(even) {
  background-color: #f2f2f2; /* Парні рядки */
}

Результат:

Назва	Значення
Рядок 1	Дані 1
Рядок 2	Дані 2
Рядок 3	Дані 3

3.2 Колір тексту

th {
  color: #ffffff;
}

td {
  color: #333333;
}

↑ Догори

4. Вирівнювання тексту в комірках

4.1 Горизонтальне вирівнювання

Властивість text-align контролює горизонтальне розташування тексту.

th {
  text-align: center; /* по центру */
}

td {
  text-align: left;   /* ліворуч */
}

.price {
  text-align: right;  /* праворуч */
}

Результат:

Продукт (center)	Кількість (center)	Ціна (center)
Ноутбук	1	25000 грн
Миша	2	700 грн

4.2 Вертикальне вирівнювання

Властивість vertical-align керує вертикальним розташуванням вмісту.

td {
  vertical-align: top;    /* вгорі */
  vertical-align: middle; /* по центру */
  vertical-align: bottom; /* внизу */
}

↑ Догори

5. Розмір таблиці

5.1 Ширина таблиці

Використовуйте властивість width для встановлення ширини.

table {
  width: 100%;  /* На всю ширину контейнера */
  width: 600px; /* Фіксована ширина */
}

Приклад (70% ширини):

Колонка 1	Колонка 2
Дані	Дані

5.2 Висота рядків

tr {
  height: 50px;
}

td {
  padding: 15px; /* Внутрішні відступи */
}

↑ Догори

6. Ширина стовпців і висота рядків

6.1 Встановлення ширини окремих стовпців

td:first-child {
  width: 200px; /* Перший стовпець */
}

td:nth-child(2) {
  width: 100px; /* Другий стовпець */
}

6.2 Фіксована ширина стовпців

Властивість table-layout: fixed; розподіляє ширину стовпців рівномірно.

table {
  table-layout: fixed;
  width: 100%;
}

Порівняння:

Auto (за замовчуванням):

Короткий

Дуже довгий текст у цій комірці

Fixed:

Короткий

Дуже довгий текст у цій комірці

↑ Догори

7. Обтікання таблиці текстом

7.1 Використання float

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

table {
  float: right;
  margin: 0 0 10px 10px;
  width: 300px;
}

Пункт	Ціна
Товар 1	100 грн
Товар 2	200 грн

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Таблиця розміщена праворуч від тексту. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

7.2 Центрування таблиці

table {
  margin: 0 auto; /* Центрування */
}

↑ Догори

8. Вирівнювання таблиці

8.1 Горизонтальне вирівнювання

Ліворуч (за замовчуванням): таблиця прилягає до лівого краю
По центру: margin: 0 auto;
Праворуч: float: right; або margin-left: auto;

/* Центрування */
table {
  margin-left: auto;
  margin-right: auto;
}

/* Або коротше */
table {
  margin: 0 auto;
}

8.2 Caption (підпис таблиці)

Елемент <caption> додає підпис до таблиці. Розміщується одразу після <table>.

<table>
  <caption>Розклад занять</caption>
  <tr>
    <th>День</th>
    <th>Предмет</th>
  </tr>
</table>

Розклад занять на понеділок
Час	Предмет
9:00	Математика
10:30	Інформатика

caption {
  caption-side: top;    /* вгорі (за замовчуванням) */
  caption-side: bottom; /* внизу */
  font-weight: bold;
  font-size: 1.2em;
}

↑ Догори

9. Практична робота

📝 Завдання 1: Створіть таблицю "Мій розклад"

Створіть таблицю з розкладом занять на тиждень:

Використайте <thead>, <tbody>
Додайте caption "Розклад занять"
Застосуйте чергування кольорів рядків
Використайте різне вирівнювання для різних стовпців

📝 Завдання 2: Таблиця "Бюджет"

Створіть таблицю особистих витрат:

Стовпці: Категорія, План, Факт, Різниця
Використайте <tfoot> для підсумкового рядка
Числові значення вирівняйте праворуч
Застосуйте border-collapse

9.1 Додаткові властивості CSS для таблиць

/* Відступи між границями */
table {
  border-spacing: 10px; /* Працює з border-collapse: separate */
}

/* Ефект при наведенні */
tr:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}

/* Стилізація окремих рядків */
tr:first-child { border-top: 3px solid #000; }
tr:last-child { border-bottom: 3px solid #000; }

/* Стилізація окремих колонок */
td:first-child { font-weight: bold; }
td:last-child { color: #007bff; }

↑ Догори

📊 ПРОСТІ ТАБЛИЦІ

1. Розмітка таблиці

1.1 Основні елементи таблиці

1.2 Базовий приклад HTML-таблиці

💻 Код HTML:

Історичні пам'ятки України

1.3 Структура таблиці: thead, tbody, tfoot

💻 Код HTML:

2. Межі таблиці

2.1 Додавання границь

2.2 Схлопування границь

2.3 Різні стилі границь

3. Фон і текст

3.1 Колір фону

3.2 Колір тексту

4. Вирівнювання тексту в комірках

4.1 Горизонтальне вирівнювання

4.2 Вертикальне вирівнювання

5. Розмір таблиці

5.1 Ширина таблиці

5.2 Висота рядків

6. Ширина стовпців і висота рядків

6.1 Встановлення ширини окремих стовпців

6.2 Фіксована ширина стовпців

7. Обтікання таблиці текстом

7.1 Використання float

7.2 Центрування таблиці

8. Вирівнювання таблиці

8.1 Горизонтальне вирівнювання

8.2 Caption (підпис таблиці)

9. Практична робота

📝 Завдання 1: Створіть таблицю "Мій розклад"

📝 Завдання 2: Таблиця "Бюджет"

9.1 Додаткові властивості CSS для таблиць

📝 Тест: Перевірте свої знання

Перед початком тесту, введіть ваші дані:

✅ Правильні відповіді: