1. Тема заняття:Тема заняття:
Включення таблицьВключення таблиць
до web-сторінкидо web-сторінки
Мета:Мета: Навчити учнів вставляти таблиціНавчити учнів вставляти таблиці
до найпростішої web-сторінки. Вивчитидо найпростішої web-сторінки. Вивчити
основні теги для вставляння таблиць доосновні теги для вставляння таблиць до
web-сторінки.web-сторінки. ;
• Продемонструвати використання цих
команд на конкретних прикладах
оформлення WEB -сторінок;
2. Тег <table>… </table>
-створює таблицю.
Всі інші елементи таблиці - текст, малюнки, списки
повинні бути вкладеними в нього. Допускається також
вкладення таблиць одна в іншу, тобто вмістом комірки
може бути інша таблиця.
Теги <tr>…</tr> и <td>…</td>
- описують рядки і стовпці (комірки таблиці).
Тег <th> …</th>
- описує заголовки в першому рядку таблиці.
Тег <caption>… </ caption >
- описує заголовок таблиці.
3. Атрибути для тега <table>Атрибути для тега <table>…… <<//table>table>
Align вирівнювання таблиці щодо документа.
Можливі значення: center, left, right
Valign – вирівнює текст в таблиці по вертикалі.
Значення: top, bottom, middle, baseline.
background=“ім'я файл“ - рядок, що визначає малюнок для
заднього фону таблиці
bgcolor =“колір” -визнаучає задній фон таблиці
border -товщина зовнішньої рамки в пікселях. Якщо атрибут
не вказаний, то таблиця виводиться без видимої межі
bordercolor = “колір” - колір рамки
bordercolorlight = “колір” - колір рамки зліва та зверху
bordercolordark = “колір” - колір рамки справа та знизу
4. Атрибути для тега <table>… </table>
title =“Текст“ - підказка
width = число - ширина таблиці у відсотках або пікселях
height = число -рекомендована висота таблиці в пікселях
cellspacing = число – відстань між
комірками
cellpadding = число -відстань між
вмістом комірки і рамкою
colls = число - заздалегідь
повідомляє браузеру кількість
стовпців у таблиці .
border cellspacing cellpadding
6. Тег <tr>…</tr> - рядок таблиці
У цьому тегу можна використовувати майже всі атрибути,
що і має тег таблиці. Але діють вони тільки у цьому
рядку.
<th> -комірки таблиці з заголовками стовпців
<td>-комірки таблиці з даними
В цих тегах теж можна застосовувати майже
всі атрибути таблиці.
Для оформлення тексту можна
використовувати всі теги форматування.
Таблиця будується за рядками. Спочатку
прописуються всі клітинки першого рядка,
потім - у другого, і т.д.
7. COLSPAN -Вказує, яка кількість клітинок буде
об'єднана по горизонталі для вказаної комірки .
ROWSPAN -Вказує, яка кількість клітинок буде
об'єднано по вертикалі для вказаної комірки
8. Практичне завдання
Створіть документ під назвою
ROZKLAD.html, що містить таблицю з
розкладом уроків:
• <TABLE border>
• <TR><TH> ПОНЕДІЛОК < /TH>
• <TR><TD> Математика< /TD> <TD>
8 </TD></TR>
• <TR><TD> Хімія < /TD> <TD> 9
</TD></TR>
• <TR><TD> Фізика < /TD> <TD>
12</TD></TR>
• і т.д..
• </TABLE>
9. Домашнє завдання
• Опрацювати конспект
• оформити власну веб-сторінку
на тему “Моє хобі” з
використання тегів для
створення таблиці в HTML-
документі
10. Домашнє завдання
• Опрацювати конспект
• оформити власну веб-сторінку
на тему “Моє хобі” з
використання тегів для
створення таблиці в HTML-
документі