Версія за 22:00, 18 жовтня 2013

Урок 4

Таблиці

Таблиці у Web-документах застосовуються не лише для розміщення табличних даних. Їх також використовують для вставки зображень і посилань, для компонування Web-сторінки тощо.

Теги

<table> обов'язковий парний йому </table> - створення таблиці

<tr> НЕобов'язковий парний йому </tr> - створення рядка таблиці

<td> НЕобов'язковий парний йому </td> - створення комірки таблиці у рядку

Приклад таблиці

А так виглядає сам HTML-код.

<table>
<tr>
<td>№ <td>Прізвище <td>Ім'я

<tr>
<td>1 <td> Франко <td>Іван

<tr>
<td>2 <td> Шевченко <td>Тарас

<tr>
<td>3 <td>Українка <td> Леся

<tr>
<td>4 <td>Загребельний <td> Павло

<tr>
<td>5 <td> Гончар <td>Олесь </table>

Атрибути тега <table>

align -
Вирівнювання таблиці відносно документа. Можливі значення: center, left, right
bgcolor -
Визначає колір фону в таблиці
border -
Товщина рамки в пікселях. Якщо атрибут не вказаний, то таблиця виводиться без видимої рамки
bordercolor -
Колір рамки таблиці
width -
Ширина таблиці в процентах (80%) або в пикселях (700)

Приклад застосування атрибутів тега <table>

А так виглядає сам HTML-код.

<table align=center
bgcolor=#00FFFF
border=2
bordercolor=red
width=400
>
<tr>
<td>№ <td>Прізвище <td>Ім'я

<tr>
<td>1 <td> Франко <td>Іван

<tr>
<td>2 <td> Шевченко <td>Тарас

<tr>
<td>3 <td>Українка <td> Леся

<tr>
<td>4 <td>Загребельний <td> Павло

<tr>
<td>5 <td> Гончар <td>Олесь </table>

Атрибути тега <tr>

align -
Вирівнювання таблиці відносно документа. Можливі значення: center, left, right, justify, char
bgcolor -
Визначає колір фону рядка таблиці
bordercolor -
Колір рамки рядка таблиці. Рамка відображається, коли встановлено атрибут border з ненульовим значенням у тега <table>.
valign Вирівнює текст у комірках рядка по вертикалі
top - по верхньому краю
middle - по центру
bottom - по нижньому краю

Атрибути тега <td>

align -
Вирівнювання таблиці відносно документа. Можливі значення: center, left, right, justify, char
bgcolor -
Визначає колір фону рядка таблиці
bordercolor -
Колір рамки рядка таблиці. Рамка відображається, коли встановлено атрибут border з ненульовим значенням у тега <table>.
valign Вирівнює текст у комірках рядка по вертикалі
top - по верхньому краю
middle - по центру
bottom - по нижньому краю

height -
Висота комірки.

nowrap -
Забороняє перенесення рядків у комірці.

width -
Ширина комірки.

Завдання

1. Створіть HTML-сторінку за зразком поданим на Рис. 1

2. Створіть HTML-сторінку за зразком поданим на Рис. 2