Таблиці у HTML-документах

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

Таблиці будуються за принципом вкладання і вводяться на WEB-сторінку за допомогою ряду елементів. Кожна таблиця починається тегом < TABLE> і закінчується тегом < /TABLE>. Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками. При цьому всередину тегів < TABLE> …< /TABLE> можуть вставлятися такі елементи:

TR – елемент створення рядка;

TD – елемент, що визначає вміст комірки даних;

TH – елемент, що визначає комірку заголовка.

Наприклад, для створення таблиці 3*2 використовується такий шаблон:

< TABLE>

< TR> < TD> …. < /TD> < TD> … < /TD> < /TR>

< TR> < TD> …. < /TD> < TD> … < /TD> < /TR>

< TR> < TD> …. < /TD> < TD> … < /TD> < /TR>

< /TABLE>

де крапками позначений вміст кожної комірки.

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

Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Примітка: В даному прикладі створена таблиця з фіксованою шириною (WIDTH=" 200" пікселів), але краще використовувати проценти, т.я. в цьому випадку розмір таблиці буде змінюватися в залежності від розміру вікна.

Така таблиця реалізується наступним кодом: < TABLE BORDER=" 2" WIDTH=" 200" BGCOLOR=" #00FF00" > < TR> < TD> Ячейка 1< /TD> < TD> Ячейка 2< /TD> < /TR> < TR> < TD> Ячейка 3< /TD> < TD> Ячейка 4< /TD> < /TR> < /TABLE>

Таблиця починається тегом < TABLE> и завершується тегом < /TABLE>;.
Тег < TABLE> може включати такі атрибути:

WIDTH=" n"	Визначає ширину таблиці в пікселях або процентах, за замовчуванням ширина таблиці визначається вмістом клітинок.
BORDER=" n"	Встанаолює товщину рамки. За замовчуанням n=0 – таблиця відображається без рамки.
BORDERCOLOR=" #FFFFFF"	Встановлює колір обрамлення, де #FFFFFF (білий) - шістнадцяткове значення кольору.
BGCOLOR=" #FFFFFF"	Встановлює колір фону для всієї таблиці, де #FFFFFF - шістнадцяткове значення кольору.
BACKGROUND=" image.gif"	Заповнює фон таблиці зображенням.
CELLSPACING=" n"	Визначає відстань між рамками клітинок таблиці в пікселях.
ALIGN=LEFT	Визначає положення таблиці в документі. За замовчуванням таблиця притиснута до лівого краю сторінки. Допустимі значення аттрибута: LEFT (зліва), CENTER (по центру сторінки), RIGHT (зправа).
FRAME=" значение"	Управляє зовнішнім обрамленням таблиці і може приймати такі значення: VOID - обрамлення немає (значення за замовчуванням). ABOVE – межа тільки зверху. BELOW - межа тільки знизу. HSIDES - межа тільки зверху і знизу. VSIDES - межа тільки зліва і справа. LHS - тільки ліва межа. RHS - тільки права межа. BOX - малюються всі чотири сторони. BORDER - також всі чотири сторони.
RULES=" n"	Управляє лініями, що розділяють клітинки таблиці. Можливі такі значення (n): NONE – немає ліній (значення за замовчуванням). GROUPS - лінії будуть тільки між групами рядів. ROWS - тільки між рядами. COLS - тільки між колонками. ALL - між всіма рядами і колонками.

Таблиця може включати заголовок, який розміщується між тегами < CAPTION> < /CAPTION>. Він має бути безпосередньо після тега < TITLE>. До заголовку можна застосувати атрибут ALIGN, що визначає його положення відносно таблиці:

TOP – значення за замовчуванням, заголовок над таблицею по центру.
LEFT - заголовок над таблицею зліва.
RIGHT - заголовок над таблицею справа.
BOTTOM - заголовок під таблицею по центру.

Рядки таблиці починаються тегом < TR> и завершаються тегом < /TR>, а кожна клітинка таблиці починається тегом < TD> и завершується < /TD>. Дані теги можуть мати такі атрибути:

Атрибути, що можуть застосовуватися до рядків і клітинок
ALIGN=LEFT	Встановлює горизонтальне вирівнювання тексту в клітинках рядка. Може приймати значення LEFT (вирівнювання вліво), CENTER (вирівнювання по центру), RIGHT (вправо).
VALIGN=CENTER	Встановлює вертикальне вирівнювання тексту в клітинках рядка. Допустимі значення: TOP (вирівнювання по верхньому краю), CENTER (вирівнювання по центру -це значення приймається за замовчуванням), BOTTOM (по нижньому краю).
BGCOLOR=" #FFFFFF"	Встановлює колір фону рядка або клітинки.
BACKGROUND=" image.gif"	Заповнює фон рядка або клітинки зображенням.
Атрибути, що можуть застосовуватися тільки до клітинок
WIDTH=" n"	Визначає ширину клітинки в n пікселях.
HEIGHT=" n"	Визначає висоту клітинки в n пікселях
COLSPAN=" n"	Растягивание ячейки по горизонтали. Например, < TD COLSPAN=" 2" > означает, что ячейка будет растянута на 2 колонки.
ROWSPAN=" n"	Розтягує клітинки по рядку. Наприклад, < TD ROWSPAN=" 2" означає, що клітинка буде розтягнута на два рядки таблиці.
NOWRAP	Цей атрибут показує, що текст буде розміщено в один рядок
BACKGROUND=" image.gif"	Заповнює фон клітинки зображенням

Крім цього, будь яка клітинка таблиці може бути визначена не тегами < TD> < /TD>;, а тегами < TH> < /TH> - Table Header (заголовок таблиці). В принципі, це звичайна клітинка, але текст між цими тегами буде виділений напівжирним шрифтом і відцентрований.

Якщо клітинка порожня, то навколо неї рамка не малюється. Якщо рамка все ж потрібна навколо порожньої клітинки, то в неї треба ввести символьний об’єкт & nbsp; (non-breaking space – нерозривний пропуск). Клітинка буде порожня, а рамка навколо неї буде (& nbsp; - обов’язково треба набирати малими буквами і закриватися символом «крапка з комою»).

Теги, що встановлюють шрифт (< B>, < I>, < FONT SIZE=" n", FONT COLOR=" #FFFFFF"), необхідно повторювати для кожної клітинки.

Використання фреймів

Мова HTML дозволяє поділити вікно браузера на окремі секції, які називаються фреймами (рамки). Вміст кожного фрейму знаходиться в окремому HTML-файлі. Кожен фрейм можна переглядати або змінювати не залежно від решти фреймів. Браузер, який “розпізнає” фрейми, завантажує різні сторінки у різні секції свого вікна. Наприклад, можна побудувати сторінку так, що фірмовий знак буде зафіксовано у верхній частині вікна, збоку буде розміщено панель навігації сторінками сервера, а в решту вікна будуть завантажуватися різні сторінки, які користувач зможе переглядати звичайним чином. Коли користувач клацає кнопкою мишки на гіперпосиланні – змінюється лише частина вікна, а система навігації і фірмовий знак залишаються нерухомими.

Подібну структуру має сторінка, вигляд якої подано на рис. 33

Рис. 33

Код даної сторінки наведено нижче:

< HTML>

< HEAD>

< TITLE> Приклад фреймової структури документа< /TITLE> < /HEAD>

< frameset cols=" 30%, 70%" >

< frame src=" a1.htm" >

< frame src=" a2.htm" >

< /frameset>

< /BODY>

< /HTML>

Файл a1.htm

< HTML>

< HEAD>

< TITLE> Приклад фреймової структури документа< /TITLE>

< /HEAD>

< BODY bgcolor=" silver" text=" black" link=" #ff0000" >

< h3> На цій сторінці фреймової структури, як правило,

розміщують зміст Web-сайта< /h3>

< /BODY>

< /HTML>

Файл a2.htm

< HTML>

< HEAD>

< TITLE> Приклад фреймової структури документа< /TITLE>

< /HEAD>

< BODY bgcolor=" silver" text=" black" link=" #ff0000" >

< h3> На цій сторінці фреймової структури, як правило, розміщують

вміст вибраного у змісті розділу< /h3>

< /BODY>

< /HTML>