Embedded Files
Для створення таблиць в html використовується елемент table.
Між тегами <table> і </ table> вставляються рядки, що задаються елементом tr.
У рядку між тегами <tr> і </ tr> є комірки двох видів:
звичайні задаються елементом td;
комірки заголовків задаються елементом th.
У тегах td і th
для об'єднання рядків служить атрибут rowspan="число рядків"
об'єднання стовпців служить атрибут colspan="число стовпців"
Приклад 1.
Створіть таблицю і збережіть її з іменем Sample_2_4_2.html у папці Урок_2.4..
2. Для кращого представлення таблиці додайте стилі елементів table, th i td:
Для правильної логічної розмітки таблиць в html5 передбачені елементи, які додають таблиці логічного наповнення, що використовується пошуковими системами:
caption - визначення спільного заголовку таблиці;
thead, - заголовки стовпців;
tbody - тіло таблиці;
tfoot - футер (підвал) таблиці.
Розмітьте таблицю за правилами. Додайте до неї спільний заголовок та футер.
Приклад 2. Таблиці складної конфігурації. Об'єднання рядків та стовпців
Перший рядок розмічається так. У ньому три комірки:
<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: collapse; задає спільний кордон для суміжних комірок таблиці
border-spacing: 2px; задає проміжки між кордонами суміжних комірок таблиці (встановлюється за замовчкванням)
caption-side: top; caption-side: bottom; встановлює положення елемента 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.
Page updated
Google Sites
Report abuse