Урок: "Створення таблиць в HTML"

Про матеріал
Мета:  познайомити учнів зі створенням таблиць на веб-сторіноках;  розвивати дизайнерські здібності учнів, уміння планувати свою роботу;  виховувати культуру представлення інформації.
Перегляд файлу

Тема: Створення таблиць.

Мета:

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

Використане обладнання: комп’ютер; дошка;таблиці для гри;

Хід уроку.

1 Актуалізація опорних знань.

Таблиці на веб-сторінках

  • Для створення таблиць в html використовується елемент table. 
  • Між тегами <table> і </ table> вставляються рядки, що задаються елементом tr. 
  • У рядку між тегами <tr> і </ tr> є комірки двох видів: 
    • звичайні задаються елементом td;
    • комірки заголовків задаються елементом th.
  • У тегах td і th
    •  для об'єднання рядків служить атрибут rowspan="число рядків"
    •  об'єднання стовпців служить атрибут colspan="число стовпців"

Приклад 1. 

  1. Створіть таблицю і збережіть її з іменем Sample_2_4_2.html у папці Урок_2.4.

 

  1. Для кращого представлення таблиці додайте стилі елементів table, th i td::

  • Для правильної логічної розмітки таблиці в html5 передбачені елементи:
    • caption - визначення спільного заголовку таблиці;
    • thead, - заголовки стовпців;
    • tbody -  тіло таблиці; 
    • tfoot  - футер (підвал) таблиці.
  • Вони додають таблиці логічного наповнення, що використовується пошуковими системами. 
  • В цій таблиці перший рядок - заголовки стовпців (thead), а решта три рядки - вміст таблиці (tbody). 
  • Розмітьте таблицю за правилами.  Додайте до неї спільний заголовок та футер. 

 

 

Таблиці складної конфігурації. Об'єднання рядків та стовпців

 

Перший рядок розмічається так. У ньому три комірки:

<tr>

        <td rowspan="2" colspan="2" > 1-1 </td>

        <td colspan = "2" > 1-2 </td> 

        <td rowspan ="2"> 1-3 </td> 

 </tr>

Другий рядок рядок (дві комірки):

<tr>
        <td > 2-1 </td>

        <td >  2-2 </td> 

</tr>

Третій рядок рядок (чотири комірки)::

<tr>

        <td colspan = "2" > 3-1 </td>

        <td >  3-2 </td>

        <td >  3-3 </td>

        <td >  3-4 </td>

 </tr>


 

Стилізація таблиць

  • border: задає кордон  для всієї таблиці або для її частин (рядки, комірки)
  • border-collapse: задає кордон  для комірок таблиці так, що суміжні комірки мають спільний кордон
  • border-spacing: задає кордон  для комірок таблиці так, що встановлює проміжки між кордонами суміжних комірок
  • caption-side: встановлює положення елемента caption
  • empty-cells: задає режим відтворення для порожніх клітинок
  • table-layout: визначає розміри таблиці
  • width: задає ширину елемента (таблиці, рядка, комірки)
  • height: задає висоту елемента (таблиці, рядка, комірки).
  • margin: auto; вирівнює таблицю по центру вікна.

Завдання 1. Відредагуйте файл Тема2-4-1.html.

  1. Змініть колір заголовка на блакитний.
  2. Задайте ширину таблиці - 400 пікселів.
  3. Змініть стиль межі.
  4. Доповніть таблицю інформацією: Іван Мазепа (1687-1709)
  5. Вирівняйте всі дати правління гетьманів за правим краєм (за замовчуванням вирівнюється за лівим краєм).

 

Завдання 2. Відредагуйте файл Тема2-4-2.html.

  1. Змініть колір лівого стовпця на світлозелений.
  2. Задайте ширину таблиці - 70%.
  3. Вирівняйте таблицю по центру сторінки.
  4. Доповніть таблицю  інформацією: гетьман війська Запорізького Іван Мазепа

 

Завдання 3.  Відредагуйте файл Тема2-4-3.html.

 


 

Завдання 4. Самостійна  робота. Створіть файл Тема2-4-4.html і помістіть в ньому таблицю згідно зразка.


 

Таблиці на веб-сторінках  використовувалися не лише для подання табличної інформації, але і для розмітки сторінок в старих версіях HTML.

 

Середня оцінка розробки
Структурованість
5.0
Оригінальність викладу
5.0
Відповідність темі
5.0
Загальна:
5.0
Всього відгуків: 1
Оцінки та відгуки
  1. Івашина Тетяна
    Загальна:
    5.0
    Структурованість
    5.0
    Оригінальність викладу
    5.0
    Відповідність темі
    5.0
doc
До підручника
Інформатика (академічний, профільний рівень) 11 клас (Лисенко Т.І., Ривкінд Й.Я., Чернікова Л.А., Шакотько В.В.)
Додано
26 жовтня 2020
Переглядів
7237
Оцінка розробки
5.0 (1 відгук)
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку