Оригінальна публікація: HTML Tables – Table Tutorial with Example Code

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

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

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

Але перш за все: що таке таблиця в HTML?

Що таке таблиця в HTML?

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

Використання таблиць стало популярнішим завдяки тегам у HTML, які полегшують їх створення та дизайн.

Для створення таблиці в HTML потрібні теги. Найважливішим є тег <table>, який є головним контейнером таблиці. Він показує, де таблиця починається і закінчується.

Загальні теги для HTML таблиці

До інших тегів входять:

  • <tr> — представляє рядки
  • <td> — використовують для створення комірок
  • <th> — використовують для додавання заголовків
  • <caption> — використовують для додавання підпису
  • <thead> — додає окремий заголовок до таблиці
  • <tbody> — показує головне тіло таблиці
  • <tfoot> — створює окремий колонтитул таблиці

Синтаксис HTML таблиці:

<table>
  <tr>
    <td>Комірка 1</td>
    <td>Комірка 2</td>
    <td>Комірка 3</td>
  </tr>
  <tr>
    <td>Комірка 4</td>
    <td>Комірка 5</td>
    <td>Комірка 6</td>
  </tr>
</table>
Комірка 1 Комірка 2 Комірка 3
Комірка 4 Комірка 5 Комірка 6

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

Як додати заголовок таблиці в HTML

Щоб додати заголовок до таблиці, використовують <th>. У базових таблицях заголовок завжди займатиме верхній рядок, тобто ми матимемо <th> оголошеним у першому рядку таблиці, за яким йтимуть дані. Текст у заголовку вирівняний за центром і жирний за замовчуванням.

Приклад використання <th>

<table>
  <tr>
    <th>Ім'я</th>
    <th>Прізвище</th>
    <th>Електронна пошта</th>
  </tr>
  <tr>
   <td>Гілларі</td>
   <td>Ньякунді</td>
   <td>tables@mail.com</td>
  </tr>
  <tr>
    <td>Ларі</td>
    <td>Мак</td>
    <td>developer@mail.com</td>
  </tr>
</table>
Ім'я Прізвище Електронна пошта
Гілларі Ньякунді tables@mail.com
Ларі Мак developer@mail.com

У наведеному вище прикладі ми можемо сказати, яку інформацію містить кожен стовпчик. Це можливо завдяки тегу <th>.

Як додати підпис до таблиці

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

Використайте тег <caption>, щоб додати заголовок до таблиці.

Синтаксис підпису

<table>
  <caption></caption>
  <tr> </tr>
</table>

Приклад використання <caption>

<table>
  <caption>Безоплатні ресурси для програмування</caption>
  <tr>
    <th>Сайти</th>
    <th>Ютуб канали</th>
    <th>Мобільні додатки</th>
  </tr>
  <tr>
    <td>Freecode Camp</td>
    <td>Freecode Camp</td>
    <td>Enki</td>
  </tr>
  <tr>
    <td>W3Schools</td>
    <td>Academind</td>
    <td>Programming Hero</td>
  </tr>
  <tr>
    <td>Khan Academy</td>
    <td>The Coding Train</td>
    <td>Solo learn</td>
  </tr>
</table>
Безоплатні ресурси для програмування
Сайти Ютуб канали Мобільні додатки
Freecode Camp Freecode Camp Enki
W3Schools Academind Programming Hero
Khan Academy The Coding Train Solo learn

Як використовувати атрибут scope у HTML таблицях

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

Головна мета елемента scope — показати цільові дані, щоб користувач не догадувався сам. Атрибут оголошений в заголовку <th> та приймає значення col, row, colgroup й rowgroup.

Значення col й row вказують на те, що заголовок надає інформацію для рядка чи стовпчика відповідно.

Синтаксис scope

<table>
 <tr>
   <th scope="значення">
 </tr>
</table>

Приклад використання <scope>

<table>
  <tr>
    <th></th>
    <th scope="col">Семестр</th>
    <th scope="col">Оцінка</th>
  </tr>

  <tr>
    <td>1</td>
    <td>Січень - Квітень</td>
    <td>Задовільно</td>
  </tr>

  <tr>
    <td>2</td>
    <td>Травень - Серпень</td>
    <td>Добре</td>
  </tr>
    
  <tr>
    <td>2</td>
    <td>Вересень - Грудень</td>
    <td>Відмінно</td>
  </tr>
</table>
Семестр Оцінка
1 Січень - Квітень Задовільно
2 Травень - Серпень Добре
2 Вересень - Грудень Відмінно

Атрибут scope показує, куди належить заголовок: до стовпчика, рядка чи обох.

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

Як об’єднати комірки в HTML таблиці

Можливо, ви стикались з комірками, які об’єднані у два або більше рядків чи стовпчиків. Це називається об’єднанням комірок.

Якщо ви працювали в таких програмах, як MS office або Excel, ймовірно, ви виділяли комірки та натискали на команду.

Ті самі функції можна застосувати до HTML таблиці, використавши два атрибути: colspan для горизонтального об’єднання та rowspan для вертикального об’єднання. Атрибутам присвоюються числа, більші за нуль, що позначають кількість комірок, які потрібно об’єднати.

Приклад використання span

<table>
  <tr>
    <th>Ім'я</th>
    <th>Предмет</th>
    <th>Оцінка</th>
  </tr>
  <tr>
    <td rowspan = "2">Гілларі</td>
    <td>Передова веброзробка</td>
    <td>75</td>
  </tr>
  <tr>
    <td>Операційна система</td>
    <td>60</td>
  </tr>
      <tr>
    <td rowspan = "2">Ларі</td>
    <td>Передова веброзробка</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Операційна система</td>
    <td>75</td>
  </tr>
  <tr>
     <td></td>
    <td colspan="3">Середній бал: 72.5</td>
  </tr>
</table>
Ім'я Предмет Оцінка
Гілларі Передова веброзробка 75
Операційна система 60
Ларі Передова веброзробка 80
Операційна система 75
Середній бал: 72.5

У наведеному вище прикладі ми маємо об’єднання двох комірок в рядках та трьох комірок в стовпчиках. Нам вдалось об’єднати комірки як вертикально, так і горизонтально.

При використанні атрибутів colspan та rowspan переконайтесь, що правильно оголосили значення.

Як додати заголовок, тіло та колонтитул до HTML таблиці

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

У таблиці вони розділені за допомогою атрибутів, а саме:

  • <thead> — окремий заголовок для таблиці
  • <tbody> — основний вміст тіла
  • <tfoot> — окремий колонтитул до таблиці

Приклад використання <thead>, <tbody> та <tfoot>

<table>
  <thead>
    <tr>
      <th colspan="2">Жовтень</th>
      <th colspan="2">Листопад</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Продаж</td>
      <td>Прибуток</td>
      <td>Продаж</td>
      <td>Прибуток</td>
    </tr>
    <tr>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$300,000</td>
      <td>$70,000</td>
    </tr>
  </tbody>
    
  <tfoot>
    <tr>
      <th colspan= "4">Листопад був продуктивнішим</th>
    </tr>
  </tfoot>
</table>
Жовтень Листопад
Продаж Прибуток Продаж Прибуток
$200,00 $50,00 $300,000 $70,000
Листопад був продуктивнішим

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

Варто зазначити, що таблиця може мати не лише одне тіло. У подібному сценарії кожне тіло групує пов’язані між собою рядки.

Як стилізувати HTML таблиці за допомогою CSS

Таблиці набули широкого користування і майже кожна з них була стилізована. Більшість з них використовують різні стилі, будь то кольори, шрифти, виділення важливих значень тощо.

Стилізування допомагає таблицям виглядати професійно та привабливо для очей. Зрештою, ви б не хотіли, щоб ваш читач дивився на дані, розділені лише одним рядком.

На відміну від стилізації за допомогою інших мов чи інструментів, у HTML потрібен додатковий файл із розширенням .css, у якому ви додасте свої стилі та зв’яжете його з файлом HTML.

Знизу прикріплений код з прикладом стилізованої таблиці. Перегляньте, як різні стилі змінюють дисплей.

У наведеному вище коді ми створили таблицю та використали деякі атрибути, описані в публікації.

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

Ми розглянули таблиці, створили декілька з них та навіть забігли наперед, стилізувавши їх.

Але мати знання і не знати, як їх застосувати, нічим не допоможе. Отже, де і коли потрібно використовувати таблиці у своєму дизайні?

Коли використовувати таблицю

Існує багато ситуацій, коли таблиці можуть стати в пригоді:

  • Ви можете використати таблицю, якщо потрібно порівняти дані за спільними характеристиками. Наприклад, відмінності між A та B, або результати команд X та Y.
  • Ви також можете використати її, якщо хочете надати загальний огляд числових даних. Хорошим прикладом є порівняння оцінок студентів або турнірна таблиця.
  • Таблиця може допомогти читачам швидко знайти потрібну інформацію. Наприклад, якщо ви переглядаєте довгий список імен, таблицю можна використати для поділу списку, що полегшить роботу читачам.

Висновок

Таблиці — це чудовий спосіб представити табличні дані. Їх можна створити за допомогою базових HTML елементів, як-от <table>, <tr>, <td>.

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

Перш ніж закінчити, виконайте одне завдання:

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