Вправа №3

Оформленя таблиць

Для раціонального розподілу площі сторінки між її текстовими фрагментами використовують таблиці.

Таблиця задається тегом <table> </table>

Рядки таблиці задається тегом <tr> </tr> стовпчики таблиці задаються тегом <td> </td>.

Нехай потрібно створити таблицю з двома рядками і трьома стовпчиками наведеного виду і наповненя. Для створення цієї таблиці необхідно набрати текст (спочатку задаються рядки):

<table>

<tr>

<td> 1x1,tr>	1	2	3
<td> 1x2 </tr>	1х1	1х2	1х3	1
<td> 1x3 </tr>	2х1	2х2	2х3	2

</tr>

<tr>

<td> 2x1 </tr>

<td> 2x2 </tr>

<td> 2x3 </tr>

</tr>

<table>

Щоб у відповідних комірках таблиці задати колір фону, і висоту і ширину комірок таблиці в пік селях, треба вище наведений текст доповнити таким чином: <table>

<tr>

<td height =”35” width = “50” bd color=”#FFCC33”>1x1</tr>

Td width =”50” bgcolor=”#336699”>1x2</tr>

<td width =”50” bgcolor=”#336699”>1x3</tr>

<tr>

</tr>

<td height =”35” witdh=”50” bgcolor=”#3336699”>2x1</tr>

<tdwitdh=”50” bgcolor=#FFCC33>2x2</tr>

<td witdh=”50” bg color=#336699>2x3</tr>

</tr>

<table>

Вирівнюваня вмісту комірок

Щоб вирівняти вміст комірок таблиці по горизонталібтреба вище наведений текст редагувати таким чином:

<table>

<tr>

<td height =”35” witdh=”50” bgcolor=”#FFCC33”><сentr>1x1

</сentr></tr>

<td witdh=”50” bgcolor =“#336699”> <сentr>1x2<сentr></tr>

<td witdh=“50” bgcolor=”#FFCC33”> <сentr>1x3<сentr></tr>

</tr>

<tr>

<td height=”35” witdh =”50” bgcolor =”#336699”> <сentr>2x1</tr>

<td height =”50” bgcolor =”#FFCC33”> <сentr>2x2<сentr></tr>

<td witdh=”50” bgcolor=”#336699”> <сentr>2x3<сentr></tr>

</tr>

<table>

В комірці таблиці може знаходитись текст, малюнок і навіть вкладені таблиці. Їх вміст форматується за допомогою вже відомих тегів. Кожна комірка таблиці є ніби окрема кімната,тому теги для центрування в попередньому прикладі довелось писати для кожної комірки.

Вирівнювання по вертикалі виконується за допомогою атрибута valign= «middle» (top, botom) – посередині комірки (зверху, вниз).

Щоб вирівняти вміст комірок таблиці по вертикалі, треба вище наведений текст редагувати таким чином:

<table>

<tr>

<td height=”35” witdh=”50” bgcolor=”#FFCC33” valign=<”top”>

<center>1x1</center></tr>

<td witdh=”50” bgcolor=”#336699”><center>1x2</center>,/tr>

<tr witdh=”50” bgcolor=”FFCC33” valign=”bottom”><center>1x3

</center></tr>

</tr>

<tr>

<td height=”35” witdh=”50” bgcolor =”#336699” valign=”bottom”>

<center>2x1</tr>

<td witdh=”50” bgcolor=”#FFCC33” <center> 2x2 </center></tr>

<td witdh=”50” bgcolor=”#336699” valign=”top”><center>2x3

</center></tr>

</tr>

<table>

Тут параметр valign встановлено не для всіх комірок,можна було побачити різницю у вирівнюванню вмісту комірок.

Форматуваня комірок

Параметр colspan визначає кількість стовпчиків, параметр rovspan визначає кількість рядків, на які простягається дана комірка.

Індивідульне завдання.

«СтвореняHTML-файла»

Виконати такі дії:

У власній папці створити HTML-файл для відображеня у вікні браузера головного документа Web-сторінки за наведеним взірцем.

Привіт це моя перша сторінка

Шановний колего!я вивчаю мову html, щоб створити власну домашню Web-сторінку для спілкуваня з друзями і знайомими. Щоб вони могли подивитися на фотокартку.

Прочитати про мене, написати пару рядків в мою гостьову книгу.

Ось перші прізвища гостей в цій книзі:

◦ Більмондо Сидір

◦ Киркоров Пилип

◦ Філімонов Олег

Створити HTML-файл додаткового документа, де розмістити текст і малюнок, знятий на сканері або створений графічним редакторм, а також електрону адресу свого навчального закладу.

В головному документі створити посиланя на додатковий

- завантажити браузер і головний документ в ньому.

- здійснити перехід у додатковий документ і назад.

закрити всі програми і папки.