заняття 5

Тема заняття:Тема заняття:
Включення таблицьВключення таблиць
до web-сторінкидо web-сторінки
Мета:Мета: Навчити учнів вставляти таблиціНавчити учнів вставляти таблиці
до найпростішої web-сторінки. Вивчитидо найпростішої web-сторінки. Вивчити
основні теги для вставляння таблиць доосновні теги для вставляння таблиць до
web-сторінки.web-сторінки. ;
• Продемонструвати використання цих
команд на конкретних прикладах
оформлення WEB -сторінок;

Тег <table>… </table>
-створює таблицю.
Всі інші елементи таблиці - текст, малюнки, списки
повинні бути вкладеними в нього. Допускається також
вкладення таблиць одна в іншу, тобто вмістом комірки
може бути інша таблиця.
Теги <tr>…</tr> и <td>…</td>
- описують рядки і стовпці (комірки таблиці).
Тег <th> …</th>
- описує заголовки в першому рядку таблиці.
Тег <caption>… </ caption >
- описує заголовок таблиці.

Атрибути для тега <table>Атрибути для тега <table>…… <<//table>table>
Align вирівнювання таблиці щодо документа.
Можливі значення: center, left, right
Valign – вирівнює текст в таблиці по вертикалі.
Значення: top, bottom, middle, baseline.
background=“ім'я файл“ - рядок, що визначає малюнок для
заднього фону таблиці
bgcolor =“колір” -визнаучає задній фон таблиці
border -товщина зовнішньої рамки в пікселях. Якщо атрибут
не вказаний, то таблиця виводиться без видимої межі
bordercolor = “колір” - колір рамки
bordercolorlight = “колір” - колір рамки зліва та зверху
bordercolordark = “колір” - колір рамки справа та знизу

Атрибути для тега <table>… </table>
title =“Текст“ - підказка
width = число - ширина таблиці у відсотках або пікселях
height = число -рекомендована висота таблиці в пікселях
cellspacing = число – відстань між
комірками
cellpadding = число -відстань між
вмістом комірки і рамкою
colls = число - заздалегідь
повідомляє браузеру кількість
стовпців у таблиці .
border cellspacing cellpadding

<body bgcolor="#008080">
<table border="3" bordercolor="#ff00ff“
cellpadding="10" cellspacing="10">
<tr>
<td background="4.jpg"> A </td>
<td bgcolor="#C0C0C0"> <img src="6.jpg" > </td>
</tr>
</table>
</body>
border cellspacing cellpadding

Тег <tr>…</tr> - рядок таблиці
У цьому тегу можна використовувати майже всі атрибути,
що і має тег таблиці. Але діють вони тільки у цьому
рядку.
<th> -комірки таблиці з заголовками стовпців
<td>-комірки таблиці з даними
В цих тегах теж можна застосовувати майже
всі атрибути таблиці.
Для оформлення тексту можна
використовувати всі теги форматування.
Таблиця будується за рядками. Спочатку
прописуються всі клітинки першого рядка,
потім - у другого, і т.д.

COLSPAN -Вказує, яка кількість клітинок буде
об'єднана по горизонталі для вказаної комірки .
ROWSPAN -Вказує, яка кількість клітинок буде
об'єднано по вертикалі для вказаної комірки

Практичне завдання
Створіть документ під назвою
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>

Домашнє завдання
• Опрацювати конспект
• оформити власну веб-сторінку
на тему “Моє хобі” з
використання тегів для
створення таблиці в HTML-
документі

заняття 5

Recomendados

Recomendados

Más contenido relacionado

Similar a заняття 5

Similar a заняття 5 (10)

Más de Людмила Олефіренко

Más de Людмила Олефіренко (20)

заняття 5