🔁 Пригадаймо: що ми вже знаємо

На попередніх уроках ми навчилися створювати списки — ненумеровані, нумеровані та вкладені. Ми вже вміємо:

• створювати структуру HTML-документа;
• робити заголовки <h1>–<h6>;
• створювати абзаци <p>;
• форматувати текст — <strong>, <em>, <u>;
• додавати посилання — <a>;
• створювати списки — <ul>, <ol>, <li>.

Сьогодні ми додамо ще один потужний інструмент — таблиці. Вони дозволяють подати дані не просто списком, а у вигляді рядків і стовпців.

📊 Навіщо потрібні таблиці

Уявіть, що вам треба показати розклад уроків на тиждень. Можна, звісно, подати його списком:

Це зрозуміло, але займає багато місця по вертикалі. А тепер подивіться, як ті самі дані виглядають у таблиці:

Понеділок	Вівторок	Середа
Математика	Фізика	Історія
Інформатика	Біологія	Географія

Ті самі дані, але компактніше й наочніше. Одразу видно, які предмети в який день. Саме для таких випадків і призначені таблиці.

---

📐 Рядки й стовпці: у чому різниця?

Перш ніж писати код таблиці, треба чітко зрозуміти дві речі: що таке рядок і що таке стовпець. Це найважливіше в цій темі, бо часто це плутають.

Що таке рядок

Подивіться на таблицю:

Понеділок

Вівторок

Середа

Це один рядок — три комірки, розташовані горизонтально.

Що таке стовпець

Подивіться на таблицю:

Понеділок

Математика

Інформатика

Це один стовпець — три комірки, розташовані вертикально.

Порівняння

Погляньмо на таблицю ще раз:

Понеділок	Вівторок	Середа
Математика	Фізика	Історія
Інформатика	Біологія	Географія

Рядків тут — три:

1. Понеділок | Вівторок | Середа
2. Математика | Фізика | Історія
3. Інформатика | Біологія | Географія

Стовпців тут — три:

1. Понеділок, Математика, Інформатика
2. Вівторок, Фізика, Біологія
3. Середа, Історія, Географія

Як запам’ятати

Уявіть зошит у клітинку:

• Рядок — це те, як ви пишете рядок тексту: зліва направо.
• Стовпець — це те, як стоять стовпи в будівлі: вертикально, зверху вниз.

---

🏗️ Будова таблиці

Тепер, коли ми розібралися з рядками й стовпцями, подивімося, з чого складається таблиця в HTML.

Для таблиці використовують три основні теги. Розберімо кожен окремо.

1. <table> — сама таблиця

2. <tr> — рядок таблиці

3. <td> — комірка таблиці

Як це поєднується

Тепер, коли ми знаємо, за що відповідає кожен тег, зберімо їх разом. Логіка така:

• Таблиця тримає в собі рядки.
• Рядок тримає в собі комірки.

Ось як виглядає найпростіша таблиця:

<table>
  <tr>
    <td>Яблуко</td>
    <td>Банан</td>
  </tr>
  <tr>
    <td>Помідор</td>
    <td>Огірок</td>
  </tr>
</table>

Розберемо код крок за кроком

Ніби ми — це браузер, який читає код згори вниз.

Крок 1. Бачимо <table> — «Ага, тут починається таблиця. Запам’ятаю».

Крок 2. Бачимо <tr> — «Починається перший рядок таблиці».

Крок 3. Бачимо <td>Яблуко</td> — «Починається комірка. У ній текст „Яблуко“. Комірка закрилася».

Крок 4. Бачимо <td>Банан</td> — «Починається ще одна комірка в цьому ж рядку. У ній текст „Банан“. Комірка закрилася».

Крок 5. Бачимо </tr> — «Перший рядок закінчився. У ньому було дві комірки».

Крок 6. Бачимо <tr> — «Починається другий рядок таблиці».

Крок 7. Бачимо <td>Помідор</td> — «Перша комірка другого рядка».

Крок 8. Бачимо <td>Огірок</td> — «Друга комірка другого рядка».

Крок 9. Бачимо </tr> — «Другий рядок закінчився».

Крок 10. Бачимо </table> — «Таблиця закінчилася. У ній було два рядки й чотири комірки».

Що тут найважливіше

• Один <tr> — це один рядок. Скільки рядків у таблиці — стільки тегів <tr>.
• Один <td> — це одна комірка. Скільки комірок у рядку — стільки тегів <td> усередині цього <tr>.
• Рядок завжди стоїть усередині <table>, а комірка — усередині <tr>. Не навпаки.

Тобто вкладеність така:

<table>       ← таблиця
  <tr>        ← рядок
    <td>...</td>   ← комірка
    <td>...</td>   ← комірка
  </tr>
</table>

---

🍎 Найпростіша таблиця: атрибут <code>border</code>

Ми вже бачили просту таблицю. Тепер розберімо атрибут border і навчімося додавати нові рядки.

Що робить border

Як додати новий рядок

Додати рядок — дуже просто. Треба дописати ще одну пару <tr>...</tr> із потрібною кількістю комірок <td> усередині.

Наприклад, була таблиця з двох рядків:

<table border="1">
  <tr>
    <td>Яблуко</td>
    <td>Банан</td>
  </tr>
  <tr>
    <td>Помідор</td>
    <td>Огірок</td>
  </tr>
</table>

А тепер додамо третій рядок:

<table border="1">
  <tr>
    <td>Яблуко</td>
    <td>Банан</td>
  </tr>
  <tr>
    <td>Помідор</td>
    <td>Огірок</td>
  </tr>
  <tr>
    <td>Апельсин</td>
    <td>Морква</td>
  </tr>
</table>

Кількість рядків — довільна. Головне — пам’ятати, що кожен рядок починається з <tr> і закінчується </tr>, а комірки всередині нього — це <td>.

А що, якщо комірок у рядках різна кількість?

Іноді початківці припускаються такої помилки: в одному рядку пишуть три комірки, а в іншому — дві.

<table border="1">
  <tr>
    <td>Яблуко</td>
    <td>Банан</td>
    <td>Апельсин</td>
  </tr>
  <tr>
    <td>Помідор</td>
    <td>Огірок</td>
  </tr>
</table>

Що станеться? Браузер не видасть помилку — він спробує відобразити це так, як написано. Але таблиця виглядатиме криво: в одному рядку буде три комірки, а в іншому — дві.

Іноді це справді потрібно — але тоді комірки об’єднують за допомогою спеціальних атрибутів colspan і rowspan. Про них — у наступному блоці.

---

🏷️ Заголовкові комірки <th>

Досі ми використовували тільки тег <td> — звичайну комірку. Але в таблицях часто потрібен перший рядок із заголовками. Наприклад:

Тварина	Клас	Де живе
Ведмідь	Ссавці	Ліс
Орел	Птахи	Гори
Крокодил	Плазуни	Річка

Тут «Тварина», «Клас» і «Де живе» — це заголовки стовпців. Для них використовують окремий тег — <th>.

Що таке <th>

Чим <th> відрізняється від <td>

Текст усередині — той самий. Різниця лише в тому, як браузер його показує:

• текст у <td> — звичайний;
• текст у <th> — жирний і вирівняний по центру.

Тобто <th> — це така сама комірка, як <td>, але браузер розуміє, що це заголовок, і робить його помітнішим.

Де ставити <th>

Зазвичай <th> використовують у першому рядку таблиці — щоб показати, що означає кожен стовпець. А далі вже йдуть звичайні рядки з <td>.

Ось як виглядає код:

<table border="1">
  <tr>
    <th>Тварина</th>
    <th>Клас</th>
    <th>Де живе</th>
  </tr>
  <tr>
    <td>Ведмідь</td>
    <td>Ссавці</td>
    <td>Ліс</td>
  </tr>
  <tr>
    <td>Орел</td>
    <td>Птахи</td>
    <td>Гори</td>
  </tr>
  <tr>
    <td>Крокодил</td>
    <td>Плазуни</td>
    <td>Річка</td>
  </tr>
</table>

Розберемо:

• <tr> — перший рядок.
  • <th>Тварина</th> — заголовок першого стовпця.
  • <th>Клас</th> — заголовок другого стовпця.
  • <th>Де живе</th> — заголовок третього стовпця.
• </tr> — перший рядок закінчився.
• <tr> — другий рядок.
  • <td>Ведмідь</td>, <td>Ссавці</td>, <td>Ліс</td> — звичайні комірки.
• </tr> — другий рядок закінчився.
• … і так далі.

Що запам’ятати

• <td> — звичайна комірка з даними.
• <th> — заголовкова комірка, браузер робить її жирною й вирівнює по центру.
• <th> зазвичай ставлять у першому рядку таблиці..

---

🔗 Об’єднання комірок: colspan і rowspan

Іноді в таблиці потрібно, щоб одна комірка займала місце двох. Наприклад, заголовок розтягується на два стовпці, або комірка «День» займає два рядки.

Для цього в HTML є два атрибути:

Розберемо кожен окремо.

colspan — об’єднання по горизонталі

Атрибут colspan ставиться на комірку <td> або <th> і вказує, на скільки стовпців вона розтягується.

Логіка проста: комірка, яка має colspan, розтягується вправо — на місце наступних комірок у цьому ж рядку.

Приклад. Уявіть таблицю з двох стовпців. Ми хочемо, щоб у першому рядку був один великий заголовок на всю ширину.

Спочатку напишемо звичайну таблицю — без об’єднання:

<table border="1">
  <tr>
    <td>Мій розклад</td>
    <td>пусто</td>
  </tr>
  <tr>
    <td>Математика</td>
    <td>Інформатика</td>
  </tr>
</table>

Тепер об’єднаймо дві комірки першого рядка в одну. Для цього:

• першій комірці додаємо colspan="2";
• другу комірку видаляємо — бо вона тепер «усередині» першої.

<table border="1">
  <tr>
    <th colspan="2">Мій розклад</th>
  </tr>
  <tr>
    <td>Математика</td>
    <td>Інформатика</td>
  </tr>
</table>

Що сталося:

• Було дві комірки в першому рядку — стала одна, але вона займає ширину двох.
• Тому другу комірку треба видалити — інакше в рядку вийде зайва комірка, і таблиця «попливе».

rowspan — об’єднання по вертикалі

Атрибут rowspan ставиться на комірку й указує, на скільки рядків вона розтягується.

Логіка проста: комірка, яка має rowspan, розтягується вниз — на місце комірок у наступних рядках.

Приклад. Хочемо, щоб у таблиці була колонка «День тижня», яка займає два рядки — тобто один «День тижня» розтягується на два уроки.

Спочатку — звичайна таблиця без об’єднання:

<table border="1">
  <tr>
    <td>Понеділок</td>
    <td>Урок 1</td>
    <td>Урок 2</td>
  </tr>
  <tr>
    <td>пусто</td>
    <td>Математика</td>
    <td>Фізика</td>
  </tr>
</table>

Тепер об’єднаймо вертикально комірки «Понеділок» і «пусто». Для цього:

• першій комірці <th>Понеділок</th> додаємо rowspan="2";
• у другому рядку комірку <td>пусто</td> видаляємо — бо вона тепер «усередині» першої.

<table border="1">
  <tr>
    <th rowspan="2">День</th>
    <th>Урок 1</th>
    <th>Урок 2</th>
  </tr>
  <tr>
    <td>Математика</td>
    <td>Фізика</td>
  </tr>
</table>

Що сталося:

• Комірка «Понеділок» тепер займає два рядки — верхній і нижній.
• Тому в другому рядку більше немає комірки «пусто». Якщо її залишити — вона з’явиться окремо, і таблиця «попливе».

Як запам’ятати

• colspan — «column span», тобто розтягується по стовпцях (вправо).
• rowspan — «row span», тобто розтягується по рядках (вниз).

💡 Як зручно створювати такі таблиці

Радимо такий підхід:

1. Спочатку напишіть звичайну таблицю — без об’єднань, з однаковою кількістю комірок у кожному рядку. Так ви побачите «кістяк» таблиці.
2. Подивіться, які комірки треба об’єднати. Наприклад, «Мій розклад» має зайняти два стовпці.
3. Додайте colspan або rowspan до потрібної комірки.
4. Видаліть «зайві» комірки — ті, які тепер поглинуті об’єднаною коміркою.
5. Перевірте результат у браузері. Якщо таблиця «попливла» — десь залишилася зайва комірка.

Так набагато простіше, ніж одразу писати код «з об’єднаннями» — бо легко заплутатися, скільки комірок має бути в кожному рядку.

Що важливо пам’ятати

• colspan і rowspan — це атрибути, які ставляться на комірку <td> або <th>.
• Значення — це числа (без лапок): colspan="2", rowspan="3".

---

📚 Коротко про <thead>, <tbody>, <tfoot>

Окрім уже відомих нам тегів <table>, <tr>, <td> і <th>, у HTML є ще три теги, які ділять таблицю на логічні частини:

Ці теги не обов’язкові — таблиця працюватиме й без них. Але вони допомагають:

• структурувати таблицю логічно;
• покращити читання коду — одразу видно, де заголовки, де дані, а де підсумки;
• полегшити оформлення — коли ми вивчимо CSS, зможемо стилізувати кожну частину окремо.

Детальніше розберемо ці теги в блоці «⭐ Підвищений рівень» наприкінці уроку — для тих, хто хоче знати більше.

---

🤔 Коли таблиця, а коли список

У нас тепер є два інструменти для структурування даних — списки й таблиці. Коли що використовувати?

Ось просте правило.

Список — коли дані йдуть «в один стовпець»

Список використовують, коли є просто перелік чогось — без додаткових характеристик.

Наприклад:

• Список покупок: молоко, хліб, сир.
• Список улюблених фільмів.
• Список кроків у рецепті.

Тут кожен пункт — це щось одне. У нього немає кількох характеристик.

Таблиця — коли в даних є «рядки й стовпці»

Таблицю використовують, коли кожен елемент має кілька характеристик, і треба їх порівнювати.

Наприклад:

Тварина	Клас	Де живе
Ведмідь	Ссавці	Ліс
Орел	Птахи	Гори
Крокодил	Плазуни	Річка

Тут кожна тварина має три характеристики: назву, клас і місце проживання. І ми можемо порівнювати тварин між собою за цими характеристиками.

Порівняння

Ситуація	Що використати
Список покупок у магазині	<ul> — список
Кроки приготування страви	<ol> — список
Розклад уроків на тиждень	<table> — таблиця
Оцінки за предметами	<table> — таблиця
Улюблені ігри	<ul> — список
Порівняння телефонів	<table> — таблиця

📌 Просте правило

Або ще простіше:

Якщо дані можна подати списком — використовуйте список.
Якщо потрібно порівнювати дані за кількома ознаками — використовуйте таблицю.

---

📋 Шпаргалка: теги та атрибути таблиць

Нижче — повний перелік тегів і атрибутів, які ми вивчили в цьому уроці.

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

Тег	Тип	Призначення
<table>	парний	Сама таблиця (контейнер)
<tr>	парний	Рядок таблиці (Table Row)
<td>	парний	Звичайна комірка (Table Data)
<th>	парний	Заголовкова комірка (Table Header)

Атрибути таблиці та комірок

Атрибут	До якого тега	Призначення	Приклад
border	<table>	Додає рамку навколо таблиці й комірок	<table border="1">
colspan	<td>, <th>	Об’єднує комірки по горизонталі	<td colspan="2">
rowspan	<td>, <th>	Об’єднує комірки по вертикалі	<td rowspan="2">

Додаткові теги (для структурування)

Тег	Призначення
<thead>	Головна частина таблиці (заголовки)
<tbody>	Основна частина таблиці (дані)
<tfoot>	Підсумкова частина таблиці

Коротко про головне

• <table> — сама таблиця. Усередині неї розміщуються рядки.
• <tr> — рядок. Усередині нього розміщуються комірки.
• <td> — звичайна комірка з даними.
• <th> — заголовкова комірка. Браузер робить її жирною й вирівнює по центру.
• border="1" — додає рамку (для наочності).
• colspan — розтягує комірку вправо (по стовпцях).
• rowspan — розтягує комірку вниз (по рядках).
• Скільки <tr> — стільки рядків.
• Скільки <td>/<th> в одному <tr> — стільки стовпців.

---

✅ Підсумок

На цьому уроці ми навчилися створювати таблиці — один із найпотужніших інструментів для подання структурованих даних.

Головні висновки:

• Таблиця — це спосіб подати дані у вигляді рядків і стовпців.
• Рядок — горизонтальний, іде зліва направо. Стовпець — вертикальний, іде зверху вниз.
• Таблиця будується з трьох основних тегів:
  • <table> — сама таблиця;
  • <tr> — рядок;
  • <td> — комірка.
• <th> — це заголовкова комірка. Браузер робить її жирною й вирівнює по центру.
• border="1" — додає рамку навколо таблиці та комірок (для наочності).
• colspan — об’єднує комірки по горизонталі (вправо).
• rowspan — об’єднує комірки по вертикалі (вниз).
• Після об’єднання кількість комірок у рядку зменшується — це не помилка, так і має бути.
• <thead>, <tbody>, <tfoot> — додаткові теги, які ділять таблицю на логічні частини.

---

❓ Перевірте себе

Спробуйте відповісти на запитання самостійно, а потім натисніть, щоб перевірити себе.

1. Які три основні теги використовують для створення таблиці?

<table> — сама таблиця, <tr> — рядок, <td> — комірка.

2. Чим <th> відрізняється від <td>?

<td> — звичайна комірка з даними. <th> — заголовкова комірка: браузер робить текст жирним і вирівнює по центру. Зазвичай <th> ставлять у першому рядку таблиці.

3. Що таке рядок і що таке стовпець?

Рядок — горизонтальний ряд елементів, іде зліва направо. Стовпець — вертикальний ряд елементів, іде зверху вниз.

4. Що робить атрибут colspan?

Об’єднує комірки по горизонталі — комірка розтягується вправо на місце наступних комірок у цьому ж рядку.

5. Що робить атрибут rowspan?

Об’єднує комірки по вертикалі — комірка розтягується вниз на місце комірок у наступних рядках.

6. У чому різниця між таблицею та списком?

Список використовують, коли є просто перелік чогось — один «стовпець» характеристик. Таблицю — коли кожен елемент має кілька характеристик, і треба їх порівнювати.

7. Що станеться, якщо в одному рядку написати три комірки <td>, а в іншому — дві?

Браузер не видасть помилку — він спробує відобразити так, як написано. Але таблиця виглядатиме криво: в одному рядку буде три комірки, а в іншому — дві. Якщо так задумано — використовують colspan або rowspan.

---

⭐ Підвищений рівень: <thead>, <tbody>, <tfoot>

Це необов’язковий матеріал. Якщо ви впевнено розібралися з основами таблиць — читайте далі. Якщо ні — можете повернутися до цього блоку пізніше.

Навіщо ці теги

Раніше ми створювали таблиці з трьох тегів: <table>, <tr>, <td> (і <th>). Цього достатньо, щоб таблиця працювала.

Але в великих таблицях буває складно зрозуміти, де заголовки, де дані, а де підсумки. Саме для цього в HTML існують три додаткові теги, які ділять таблицю на логічні частини.

Як це виглядає

Ось звичайна таблиця без цих тегів:

<table border="1">
  <tr>
    <th>Предмет</th>
    <th>Оцінка</th>
  </tr>
  <tr>
    <td>Математика</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Інформатика</td>
    <td>11</td>
  </tr>
  <tr>
    <td>Середній бал</td>
    <td>10.5</td>
  </tr>
</table>

А ось та сама таблиця з розділенням на частини:

<table border="1">
  <thead>
    <tr>
      <th>Предмет</th>
      <th>Оцінка</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Математика</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Інформатика</td>
      <td>11</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Середній бал</td>
      <td>10.5</td>
    </tr>
  </tfoot>
</table>

Розберімо

• <thead> — тримає в собі рядок із заголовками. Тут у нас <th>Предмет</th> і <th>Оцінка</th>.
• <tbody> — тримає в собі рядки з даними. Тут — «Математика» та «Інформатика».
• <tfoot> — тримає в собі підсумковий рядок. Тут — «Середній бал».

Кожна з цих частин має власний <tr> усередині. І кожен <tr> — свої комірки <td> або <th>.

Що це дає

• Логічну структуру. Коли дивишся на код, одразу видно: ось заголовки, ось дані, ось підсумки.
• Читабельність. У великих таблицях із 20+ рядків це дуже допомагає.
• Оформлення через CSS. Коли ми вивчимо CSS, зможемо стилізувати кожну частину окремо: наприклад, зробити заголовок сірого кольору, а підсумок — жирним.

📌 Просте правило

---