Все в своїх рамках, HTML, XML, DHTML, Інтернет-технології, статті

Дмитро М. Сагайдак

Свого часу, тільки починаючи вивчати ази Web-дизайну, я зіткнувся з проблемою сміховинною, але знайомої кожному починаючому Web-майстру: як розставити на сторінці всі елементи так, щоб вони гармонійно поєднувалися і, при цьому, не заважали один одному.
Перейшовши з місця в кар’єр, я став використовувати шари, але зіткнувся з тим, що не всі браузери їх підтримували, а значить, не могли правильно відформатувати мої сторінки. Це змусило мене приділити увагу таблицями.
Досвід, придбаний в подальшому, показав, що таблиці, при всій банальної простоті своєї побудови, не так вже й прості. Помилитися у форматуванні сторінки за допомогою таблиць також легко, як і будувати їх. При цьому, помилки дають про себе знати несподівано, як би нишком, в різних браузерах по-різному. І доводиться витрачати масу часу для виявлення та усунення помилки, так, щоб не породити нову.
Тема даної статті може викликати поблажливу усмішку у того, хто вважає себе асом в Web-дизайні, тим Проте, я розраховую на увагу тих, хто тільки почав свій шлях на цьому терені, або завжди відкритий для сприйняття накопиченого іншими досвіду.
1. Таблиці як такі.
Для початку, нагадаю саме просте: як створюється каркас таблиці. Все починається з пари тегів TABLE:

. Вони мають свої стандартні параметри ALIGN, BORDER, CELLSPACING, CELLPADDING, WIDTH, які відповідають за вирівнювання таблиці щодо вікна браузера, за наявність рамки у таблиці, за відстань між осередками таблиці та відступи всередині осередків, за ширину таблиці (як у відсотках, так і в пікселях). Далі слід пара тегів, визначають рядок таблиці: Стандартними параметрами для рядка є ALIGN і VALIGN, що відповідають за вирівнювання осередків усередині рядка по горизонталі і по вертикалі. Остання пара тегів – це теги самих клітинок:
. З тими ж параметрами, що і у рядки. Крім того, існують ще й теги, що дозволяють в самому коді ділити таблицю на відповідні розділи: THEAD, TH, TBODY і TFOOT. При цьому, ТН вже містить у собі форматування, що дозволяє виділяти жирним і вирівнювати по центру текст заголовка таблиці. Правда, все це має сенс, якщо таблиця створюється з метою саме показати таблицю в HTML-документі. У найпростішому варіанті (з урахуванням усіх вищевказаних тегів) табличний код виглядає ось так:
<TABLE ALIGN=left
BORDER=1 CELLSPACING=0 CELLPADDING=4
WIDTH=100%>
<THEAD> 
<TR ALIGN=center
VALIGN=top> 
<TH VALIGN=top COLSPAN = 3> Заголовок
</TR> 
</THEAD> 
<TBODY> 
<TR
ALIGN=center VALIGN=top> 
<TD ALIGN=center VALIGN = top> Осередок 1
<TD ALIGN=center VALIGN = top> Осередок 2
<TD ALIGN=center VALIGN = top> Осередок
3</TD> 
</TR> 
</TBODY> 
<TFO
OT> 
<TR ALIGN=center VALIGN=top> 
<TD
ALIGN=center VALIGN=top COLSPAN = 3> Висновок
</TR

</TFOOT> 
</TABLE>.
Все це простіше простого, скажете Ви. І що тут складного і небезпечного?
По-перше, небезпека в параметрах. Не всі параметри варто застосовувати, так само, як і не всі параметри з тих, що варто було б, ми застосовуємо. Так, наприклад, для тега TR не обов’язково застосування параметрів вирівнювання. Однак вони обов’язкові (!) для застосування з тегом TD. Також типова помилка, з тегами TR, TD і TH може не застосовуватися параметр WIDTH, проте він дуже важливий, так впливає на відповідність розташування осередків в таблиці щодо один друга і таблиці в цілому.
Таким чином, створюючи таблицю, необхідно вказати ширину самої таблиці (а іноді і її висоту – для “благозвучності” дизайну), ширину рядка і осередки / осередків, горизонтальне вирівнювання таблиці та комірки, а також відстань між осередками і всередині-осередковим відступи. При цьому ширина кожної клітинки в рядку, якщо їх декілька, повинна відповідно бути вказана так, щоб їх сума відповідала ширині рядка. Однак якщо вказати ширину осередків, але опустити ширину рядка, то може з’явитися неприємний ефект – “з’їдання” об’єктів (наприклад, кнопок HTML), розташованих в осередках.
Прошу звернути увагу на параметр COLSPAN, присутній в осередках заголовка та укладення таблиці. Він застосовується, коли осередків у рядках більше однієї і вказує, на ширину скількох колонок розтягнеться ця комірка. Параметр, аналогічний йому і що стосується кількості “перекриваються” рядків, називається ROWSPAN. Пропуск цих параметрів, там, де вони необхідні, є дуже частою помилкою і призводить до спотворення одержуваного в браузері зображення.
Крім основних параметрів, в табличних тегах можуть застосовуватися додаткові, які особливо не впливають на правильне форматування таблиці. Це стандартні HTML-параметри фонового кольору, кольору рамки (основний, “світлої” і “Темної”), параметри STYLE і CLASS каскадних таблиць стилів. Тут важливо не помилитися з використанням кольорів і стилів, щоб ваша таблиця виглядала гармонійно і не колола очі строкатістю і неохайністю дизайну. Також, потрібно враховувати, що Netscape Navigator за замовчуванням використовує для оформлення рамки таблиці об’ємну лінію. Він може частково “пофарбувати” її у вказаний вами колір, але не визнає “світло-темного” варіанту.
По-друге, небезпека ховається в самих таблицях. Нерідко, створюючи дизайн сторінки за допомогою таблиці, ми забуваємо, що осередки намертво пов’язані один з одним. Навіть COLSPAN / ROWSPAN не дозволяють нам звільнитися повністю від тих рамок, в які нас заганяють стовпці і рядка таблиці. А адже дизайн вимагає, найчастіше, “вільного” розташування елементів на сторінці.
В цьому випадку необхідно вдатися до “методу Матрьошки “, при якому основна таблиця є всього лише носієм інших, функціонально значущих таблиць, в яких і розташовуються елементи дизайну. На прикладі це виглядає наступним чином:
<TABLE
ALIGN=center BORDER=1 CELLSPACING=0 CELLPADDING=0
WIDTH=100%> 
<TR ALIGN=center VALIGN=top
WIDTH=100%> 
<TD VALIGN=top COLSPAN=3> 
<!– Заголовок ->
<TABLE ALIGN=center BORDER=1 bordercolor=red
CELLSPACING=0 CELLPADDING=0 WIDTH=90%> 
<TR ALIGN=center
VALIGN=top WIDTH=100%> 
<TD ALIGN=center VALIGN=top WIDTH = 100%> Таблиця в заголовку
</TABLE> 
<!– Кінець Заголовка –

</TD> 
</TR> 
<TR
ALIGN=center VALIGN=top WIDTH=100%> 
<TD ALIGN=center
VALIGN=top WIDTH=33%> 
<TABLE ALIGN=center BORDER=1 bordercolor=blue
CELLSPACING=0 CELLPADDING=0 WIDTH=90%> 
<TR ALIGN=center
VALIGN=top WIDTH=100%> 
<TD ALIGN=center VALIGN=top WIDTH = 100%> Таблиця в середній частини
</TABLE> 
<! — Кінець Осередки 1 ->
</TD> 
<TD ALIGN=center VALIGN = top WIDTH = 34%> Осередок 2
<TD ALIGN=center VALIGN = top WIDTH = 33%> Осередок
3</TD> 
</TR> 
<TR ALIGN=center
VALIGN=top> 
<TD ALIGN=center VALIGN=top
COLSPAN=3> 

<TABLE
ALIGN=center BORDER=1 bordercolor=green CELLSPACING=0 CELLPADDING=0
WIDTH=90%> 
<TR ALIGN=center VALIGN=top
WIDTH=100%> 
<TD ALIGN=center VALIGN=top WIDTH = 100%> Таблиця в Наприкінці
</TABLE> 
</TD> 
</TR> 
</TABLE>
Такий спосіб позиціонування елементів на Web-сторінці дозволяє розміщувати об’єкти щодо довільно, оскільки функціональні таблиці “Прив’язані” тільки до розміру і формату клітинок, в яких вони знаходяться, але не залежать від розміру і формату основної таблиці в цілому. Тому, при такому позиціонуванні, не з’являється ефекту розтягування, наприклад, колонки з кнопками та посиланнями слідом за подовженням центральної колонки Web-сторінки при вставці в останню величезного розміру тексту.
Крім того, такий спосіб впливає, як не дивно, на форматування абзаців текстових блоків на сторінці. Справа в тому, що досвід показує – Netscape не розуміє вирівнювання JUSTIFY в комірці таблиці. Для цього в комірці йому необхідний тег

. Але він також відмовляється розуміти

, якщо тег знаходиться в комірці, яка оперує параметром COLSPAN. “Матрьошка” рятує положення. Netscape не переносить формат комірки на таблицю, розташовану в ній, а розглядає останню як цілком самостійний елемент.
В “методі Матрьошки” необхідно бути уважним до того, в яких одиницях ви задаєте розмір таблиць – в відсотках або в пікселях – і яке вирівнювання ви при цьому задали. Знову таки, через норовливого характеру Netscape’а. Іноді, розмір зовнішнього таблиці необхідно вказувати в пікселях, якщо ви хочете в подальшому вказати розміри внутрішніх таблиць у відсотках, а вирівнювання обов’язково повинно бути центральним. Інакше, може статися так, що внутрішня таблиця розтягнеться на величезну відстань, потворно спотворивши зовнішню таблицю і весь дизайн сторінки в цілому. Ось простий приклад:
1)
<TABLE ALIGN=”center” WIDTH=”100%”> 
2) <TABLE
ALIGN=”center” WIDTH=”600″> 
3) <TABLE ALIGN=”left”
WIDTH=”600″> 
4) <TABLE ALIGN=”left”
WIDTH=”100%”>
У перших трьох варіантах, при зазначених умовах, нічого страшного не станеться. Проте в четвертому, таблицю розтягне так, що її правий край ви не зможете побачити зовсім!
2. Таблиці та графіка.
Таблиці є незамінним інструментом будь-якого Web-дизайнера для розміщення графіки на сторінці. Це вже аксіома. Так, використовуючи таблицю, можна згрупувати окремі графічні файли, виконують самостійні функції, в закінчену зображення, наприклад заголовок.
Однак, розміщення графіки в елементах таблиці теж може супроводжуватися вчиненням цілої низки помилок.
Однією з найбільш поширених помилок є вставка малюнка в клітинку таблиці без вживання параметра вирівнювання тега . Власне, коли малюнок розташований в клітинці один і не супроводжується ні текстом, ні якими іншими об’єктами, це не важливо. В іншому випадку, відсутність вирівнювання стає помітним і може зіпсувати весь дизайн.
Справа в тому, що тег малюнка (зображення) не успадковує параметрів вирівнювання осередку, він тільки підкоряється їм, як будь-який інший об’єкт у клітинці. Тому, наприклад, при будь-якому вирівнюванні в комірці, текст обов’язково “Піде” під зображення. Але ви ж хочете, щоб текст його “обтікав”? В даному випадку, необхідно вказати в теге IMG параметр вирівнювання ALIGN рівний LEFT або RIGHT. Тоді зображення буде м’яко “оточене” текстом.
Також має сенс вказати параметри вертикального і горизонтального відступів від зображення VSPACE і HSPACE, так як відступи, задані для клітинки також не успадковуються.
В деяких випадках, необхідно, щоб частина тексту виводилася збоку від зображення, а решта йшла під нього. При цьому, “вододіл” повинен бути дуже добре помітний.
В цьому випадку, використовуються два варіанти. Або в теге
Використовується параметр CLEAR = LEFT або CLEAR = RIGHT відповідно, і в цьому випадку частина тексту після тега
буде йти під зображення, а у вирівнюванні останнього можна використовувати властивість MIDDLE, або, використовуючи, знову таки, табличні осередку, помістити зображення в одну, “бічний” текст до сусідньої, а “нижній” – відповідно, в клітинку, розташовану в нижчестоящої рядку і розгорнуту на всю цю рядок (COLSPAN = 2). Зрозуміло, останній спосіб громіздкий, зате гарантовано, що подібне розміщення правильно інтерпретує будь браузер, що розуміє таблиці.
Другий поширеною помилкою є невідповідність розмірів комірок з розмірами вставляється зображення. Це небезпечно, коли розміри зображення перевищують розміри комірки. В цьому випадку осередок безжально розтягується, що, безумовно, впливає на розташування сусідніх елементів на сторінці. Наприклад, використання графічної лінії як розділової риси, замість
, без погодження з розмірами осередку-«носія», може призвести до спотворення розмірів всієї таблиці. Уникнути цього, звичайно ж, можна тільки узгодженням розмірів.
Крім помилок, часто допускається неувага до стандартних можливостям табличних тегів. Наприклад, хто з вас серйозно замислювався над можливостями параметрів фону, які, до речі, підтримуються і рядками, і осередками? Звичайно, за допомогою BGCOLOR можна задати колір таблиці, рядки та клітинки, як разом, так і окремо. За допомогою BACKGROUND можна вставити зображення в якості фону. В цьому випадку воно буде заповнювати всю площу клітинки, рядки, таблиці. Тут-то і починається найцікавіше.
Ми можемо вкласти в одну клітинку два різних самостійних зображення, одне поверх іншого, створивши ілюзію їх пошарового розміщення. Одне буде задано параметром BACKGROUND тега

, А інше тегом . Треба тільки не забути, що розміри осередки повинні збігатися з розмірами зображення (тоді не з’явиться ефект “Розмноження” картинки або її “обрізання”), розміщеного в фон, а самостійне зображення повинне бути значно менше фонового, інакше втрачається весь сенс подібного дизайну.
Таким же чином можна групувати зображення і текст, що корисно при дизайні, наприклад, посилань (тільки в цьому випадку шрифт повинен бути фіксованої величини). Чи не марно це і просто при використанні щодо великих закінчених зображень (наприклад, групових фотографій) як фон …
Звичайно ж, можливості таблиць не безмежні, а й не до кінця розкриті. Я спробував описати лише малу їх частину в цій статті і, сподіваюся, вона принесе вам користь.
Удачи!

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*