-
Для створення таблиць в html використовується елемент table.
-
Між тегами <table> і </ table> вставляються рядки, що задаються елементом tr.
-
У рядку між тегами <tr> і </ tr> є комірки двох видів:
-
звичайні задаються елементом td;
-
комірки заголовків задаються елементом th.
-
У тегах td і th
-
для об'єднання рядків служить атрибут rowspan="число рядків"
-
об'єднання стовпців служить атрибут colspan="число стовпців"
Приклад 1.
-
Створіть таблицю і збережіть її з іменем Sample_2_4_2.html у папці Урок_2.4..
-
Для кращого представлення таблиці додайте стилі елементів 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.
-
Змініть колір заголовка на блакитний.
-
Задайте ширину таблиці - 400 пікселів.
-
Змініть стиль межі.
-
Доповніть таблицю інформацією: Іван Мазепа (1687-1709)
-
Вирівняйте всі дати правління гетьманів за правим краєм (за замовчуванням вирівнюється за лівим краєм).
Завдання 2. Відредагуйте файл Тема2-4-2.html.
-
Змініть колір лівого стовпця на світлозелений.
-
Задайте ширину таблиці - 70%.
-
Вирівняйте таблицю по центру сторінки.
-
Доповніть таблицю інформацією: гетьман війська Запорізького Іван Мазепа
Завдання 3. Відредагуйте файл Тема2-4-3.html.
Завдання 4. Самостійна робота. Створіть файл Тема2-4-4.html і помістіть в ньому таблицю згідно зразка.
Таблиці на веб-сторінках використовувалися не лише для подання табличної інформації, але і для розмітки сторінок в старих версіях HTML.
|