
- •Тема 1.4 Робота з таблицями та графікою Web-сторінках.
- •Засоби опису таблиць в html
- •Використання таблиць в дизайні
- •Атрибути аlign і valign
- •Атрибут bgcolor
- •Використання таблиць в дизайні сторінки
- •Використання таблиць в дизайні
- •Створення різноколірних таблиць
- •Як працюють фрейми
- •Підготовка утримуваного фрейма
- •Підготовка фрейма main
- •Вкладені і множинні кадрові структури
- •Плаваючі фрейми
- •Vspace - Вертикальний відступ від фрейма до навколишнього контенту.
- •Навігаційні карти
Атрибут bgcolor
Цей атрибут дозволяє встановити колір фону. Залежно від того, з яким тегом(TABLE, TR, TD) він застосовується, колір фону може бути встановлений для усієї таблиці, для рядка або для окремого комірку. Значенням цього атрибуту є RGB- код або стандартна назва кольору.
<HTML>
<BODY>
<CENTER>
<TABLE BORDER BGCOLOR=yellow>
<TR BGCOLOR=blue>
<TD>Текст або дані</TD>
<TD BGCOLOR=red>Текст або дані
</TD>
<TD>Текст або дані</TD>
</TR>
<TR BGCOLOR=green>
<TD>Текст або дані</TD>
<TD>Текст або дані</TD>
<TD BGCOLOR=lime>Текст або дані
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Атрибут BACKGROUND
Цей атрибут задає фонове зображення для таблиць. Застосуємо до тегів TABLE і TD. Його значенням є URL файлу з фоновим зображенням. Застосування цього атрибуту розглядається нижче.
Інші атрибути тегу TABLE
frame - задає відображення меж навколо таблиці, може набувати значень:
void - не відображати межі;
border - відображати межу навколо таблиці;
above - провести межу тільки по верхньому краю таблиці;
below - провести межу тільки по нижньому краю таблиці;
hsides - відмалювати тільки горизонтальні межі;
vsides - відмалювати тільки вертикальні межі;
rhs - провести межу тільки по правій стороні таблиці;
lhs - провести межу тільки по лівій стороні таблиці;
height - задає висоту таблиці;
rules - задає відображення меж між комірками, може набувати значень:
all - відображати межі навколо кожного елементу таблиці;
groups - відображати межі між групами, що задаються тегами <thead>, <tfoot>, <tbody>, <colgroup>, <col>;
cols - відображати межі між колонками;
none - приховати усі межі;
rows - відображати межі між рядками таблиці;
summary - задає короткий опис таблиці;
width - задає ширину таблиці.
Усередині тега <table>, окрім <tr> і <td> допускається використання тегів :
<caption> - задає заголовок таблиці;
<col> - задає характеристики однієї, або декількох колонок таблиці;
<colgroup> - задає стиль для групи колонок таблиць;
<tbody> - зберігає одну, або декілька рядків таблиці, допустиме застосування тільки одного такого тега у рамках <table>;
<tfoot> - зберігає одну, або декілька рядків, що відображаються внизу таблиці;
<thead> - містить один, або декілька рядків, що відображаються вверху таблиці;
Використання таблиць в дизайні сторінки
Таблиці хороші тим, що за бажання можна зробити їх межі невидимими. Це дозволяє за допомогою тега <ТАВLЕ> красиво розміщувати на сторінці текст і графіку. Поки тег <ТАВLЕ> залишається єдиним потужним засобом форматування в HTML. Дизайнери Web- сторінок зараз мають практично ту ж свободу відносно використання «порожнього простору», що і творці друкарських сторінок. Таблиці краще всього допомагають відійти від ієрархічного розміщення тексту на Web- сторінках.
Якщо браузер підтримує таблиці, він зазвичай правильно відображає найцікавіші ефекти, отримані з їх допомогою
<HTML>
<BODY>
<CENTER>
<TABLE CELLPADDING="10" CELLSPACING="0"
BORDER="16">
<TR>
<TD ALIGN="center">
<H2>Прикарпатський національний університет імені В.Стефаника </H2>
<H3>Ласкаво просимо!</H3>
<TABLE BORDER WIDTH="100%">
<TR>
<TD ALIGN="center"><I>Учбовий курс
"WEB-технології"</I></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>