Основи HTML. Робота з таблицями
Актуалізація знань:
Для створення таблиці в HTML використовується парний тег <table></table>:
Тег <table></table>
Елемент <table> служить контейнером для елементів, що визначають вміст таблиці. Будь-яка таблиця складається з рядків і стовпців, які задаються за допомогою тегів <tr> і <td>.
Атрибути
- align - визначає вирівнювання таблиці.
- background - задає фоновий малюнок у таблиці.
- bgcolor - колір фону таблиці.
- border - товщина рамки в пікселях.
- bordercolor- колір рамки.
- cellpadding - відступ від рамки до вмісту осередку.
- cellspacing - відстань між комірками.
- cols - число колонок в таблиці.
- frame - повідомляє браузеру, як відображати межі навколо таблиці.
- height - висота таблиці.
- rules - повідомляє браузеру, де відображати межі між комірками.
- summary - короткий опис таблиці.
- width - ширина таблиці.
Тег <tr></tr>
Тег <tr> служить контейнером для створення рядка таблиці. Кожна клітинка в межах такого рядка може задаватися за допомогою тега <th> або <td>.
Атрибути
- align - визначає вирівнювання вмісту комірок по горизонталі.
- bgcolor - колір фону комірок.
- bordercolor - колір рамки.
- char - вирівнювання вмісту комірок відносно заданого символу.
- charoff - зсув вмісту осередків щодо зазначеного символу.
- valign - вирівнювання вмісту комірок по вертикалі.
Тег <td></td>
Призначений для створення однієї комірки таблиці. Тег <td> повинен розміщуватися всередині контейнера <tr>, який в свою чергу розташовується всередині тега <table>.
Атрибути
- abbr - короткий опис вмісту комірки.
- align - визначає вирівнювання вмісту комірки по горизонталі.
- axis - групує осередки пов'язані між собою схожою інформацією.
- background - задає фоновий малюнок в комірці.
- bgcolor - колір фону комірки.
- bordercolor - колір рамки.
- char - вирівнює вміст комірки по заданому символу.
- charoff - зміщує вміст комірки відносно заданого символу.
- colspan - об'єднує горизонтальні осередки.
- headers - дозволяє зв'язати осередки з заголовком.
- height - висота комірки.
- nowrap - забороняє перенесення рядків.
- rowspan - об'єднує вертикальні осередки.
- scope - дозволяє зв'язати осередку простий таблиці з заголовками в мовних браузерах.
- valign - вирівнювання вмісту осередку по вертикалі.
- width - ширина комірки.
Тег <th></th>
Тег <th> призначений для створення однієї комірки таблиці, яка позначається як заголовна. Текст в такій клітинці відображається браузером зазвичай жирним шрифтом і вирівнюється по центру. Тег <th> повинен розміщуватися всередині контейнера <tr>, який в свою чергу розташовується всередині тега <table>.
Атрибути
Такі ж як і для тега <tr>
Додаткові матеріали:
Завдання:
1. Опрацювати статтю та законспектувати основні моменти.
2. Створити веб сторінку з розкладом ваших уроків, використовуючи теги для створення таблиць.
Хід виконання:
- Створити сторінку з назвою timetable.html
- У створеному документі створити структуру пустої веб сторінки.
- Використовуючи теги таблиць, створити таблицю розміром 6х9 і заповнити її розкладом уроків для 9 класу.
- Першу стрічку створити використовуючи теги <th>
- Додати над таблицею відповідний заголовок.
- Зберегти створений документ та перевірити його працездатність.
3. Створену веб сторінку переслати на перевірку використовуючи E-mail.