Урок 8. Таблиці: Створення таблиць, атрибути table, tr, td, thead, tbody

План уроку: Таблиці — створення таблиць, атрибути table, tr, td, thead, tbody (25-30 хвилин)

1. Вступ: Що таке таблиці в HTML (2-3 хвилини)

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

2. Структура таблиць у HTML (5 хвилин)

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

Тег <table>:

• Тег <table> огортає всю таблицю і визначає її початок і кінець.

Тег <tr>:

• Тег <tr> означає "table row" і використовується для визначення рядків таблиці.

Тег <td>:

• Тег <td> означає "table data" і використовується для створення комірок (клітинок) у таблиці.

• Приклад:

  
  

  <table>
    <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
    </tr>
    <tr>
      <td>Ячейка 3</td>
      <td>Ячейка 4</td>
    </tr>
  </table>
  

3. Атрибути таблиць та їх частини (10 хвилин)

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

Заголовки таблиць: Тег <thead> і <th>:

• Тег <thead> використовується для огортання всіх рядків із заголовками таблиці.

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

  • Приклад:

    <table>
      <thead>
        <tr>
          <th>Ім'я</th>
          <th>Вік</th>
        </tr>
      </thead>
      <tr>
        <td>Олена</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Петро</td>
        <td>30</td>
      </tr>
    </table>
    

Тіло таблиці: Тег <tbody>:

• Тег <tbody> огортає основні дані таблиці (тобто рядки і комірки, які йдуть після заголовків).

  • Приклад:

    <table>
      <thead>
        <tr>
          <th>Ім'я</th>
          <th>Вік</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Олена</td>
          <td>25</td>
        </tr>
        <tr>
          <td>Петро</td>
          <td>30</td>
        </tr>
      </tbody>
    </table>
    

4. Практика: Створення базової таблиці (10 хвилин)

• Ціль: Учні мають створити таблицю, яка міститиме заголовки і дані.

Завдання:

• Створити таблицю з заголовками "Назва товару", "Кількість", "Ціна".
• В таблиці мають бути принаймні три рядки з товарами і цінами.

Приклад завдання:

<table>
  <thead>
    <tr>
      <th>Назва товару</th>
      <th>Кількість</th>
      <th>Ціна</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Помідори</td>
      <td>5 кг</td>
      <td>50 грн</td>
    </tr>
    <tr>
      <td>Огірки</td>
      <td>3 кг</td>
      <td>30 грн</td>
    </tr>
    <tr>
      <td>Картопля</td>
      <td>10 кг</td>
      <td>100 грн</td>
    </tr>
  </tbody>
</table>

5. Підсумок і обговорення (5 хвилин)

• Ціль: Закріпити розуміння основних тегів таблиць та їх використання.

• Що повторити:

  • Як правильно створювати рядки та комірки в таблиці.
  • Для чого використовуються теги <thead>, <tbody> та <th>.

    
    

• Запитання:

  • Чим відрізняється <th> від <td>?
  • Як організувати дані в таблиці, щоб вони були структуровані та зрозумілі?

Домашнє завдання

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

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