Вирівнювання даних у комірці таблиці

Атрибут CELLSPACING дає можливість змінити розміри смуг чистого простору, що обрамляє комірки ззовні. Потрібні значення задаються в пік селях По замовчуванню браузер відображає комірки, розділяючи їх смугами шириною у 2 пікселі.

Атрибут CELLPADDING дозволяє змінити розміри чистого простору всередині комірки, що відділяють її вміст від зовнішніх меж. По замовчуванню браузер облямовує внутрішній вміст комірок смугами шириною у 1 піксель.

Зміна значення атрибуту CELLPADDING впливає на результат вирівнювання даних у таблиці. Наприклад, при задаванні ознаки вирівнювання top (доверху) з подальшим присвоюванням атрибуту CELLPADDING значення, рівного 4, дані будуть розміщені на відстані 4 пікселі від верхньої межі комірки.

Наприклад,

<H2> <CENTER>Товари та ціни</CENTER></H2>

<TABLE BORDER=”10” CELLSPACING=”10” CELLPADDING=”20”>

Перенесення слів всередині комірок таблиці

Web-браузери зазвичай виконують автоматичне перенесення слів тексту всередині комірок таблиці, керуючись значеннями її розмірів і беручи до уваги поточні габарити власного вікна. Атрибут NOWRAP дозволяє примусово відключити функцію перенесення слів у комірці таблиці, щоб забезпечити можливість відображення тексту в одному рядку.

Атрибут NOWRAP слід застосовувати тільки тоді, коли комірки містять короткі фрагменти тексу (наприклад, заголовки, назви). Якщо у комірці буде великий кусок тексту, то використання атрибуту NOWRAP мрже призвести до суттєвого збільшення розмірів і комірки, і таблиці, що призведе до виходу об’єкту за межі вікна браузера.

Атрибут NOWRAP не впливає на текст комірки, відформатований за допомогою дескрипторів <P> або <BR>.

Наприклад,

<TН NOWRAP >Назва товару</TН>

Задавання параметра обтіканні таблиці текстом

Атрибут ALIGN дозволяє вказати ознаку обтікання таблиць текстом. Атрибут ALIGN, що використовується для вказівки ознаки обтікання таблиці текстом, допускає задавання будь-якого із двох значень – left або right. Значення left заставляє браузер помістити таблицю зліва від тексту, а right – справа від нього.

Якщо необхідно, щоб форматуванню піддався тільки окремий фрагмент тексту, слід застосувати дескриптор <BR> з атрибутом CLEAR, що вказує позицію у тексті, починаючи з якої дія механізму обтікання таблиць текстом відміняється. Значення left, right і all атрибуту CLEAR дозволяють визначити, з якої сторони – лівої, правої чи з обох – текст далі буде вільним від таблиць.

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

Наприклад,

<H2> <CENTER>Товари та ціни</CENTER></H2>

<TABLE BORDER=”10” ALIGN =” left”>

...

</TABLE>

<P>Наша фірма займається продажем канцелярських товарів</P>

<BR CLEAR=”left”>

<P>Недавно ми відкрили філії у нових мікрорайонах міста</P>

Проектування фреймів

Створення фреймів

Фрейми дозволяють розділяти простір вікна Web-браузера на незалежні розділи. Кожен з розділів здатний відображати певну сторінку Web-сайту.

Фрейми широко застосовують у тих випадках, коли необхідно одночасно зберігати на екрані дані з різних джерел. Наприклад, корисно передбачити окремий фрейм для відображення змісту з відповідними гіперпосиланнями, щоб надати можливість користувачам засоби швидкої навігації по сайті в пошуках необхідної інформації.

Щоб побудувати фрейми, потрібно створити спеціальну Web-сторінку, яка містить опис структури фреймів, складений за допомогою дескрипторів <FRAMESET> і <FRAME>.

Дескриптор <FRAMESET> дозволяє сформувати набір фреймів, які розділяють простір Web-браузера на стрічки та стовпчики. Далі необхідно задати значення висоти (ширини) усіх стрічок (стовпчиків), виражені у процентах відносно поточних габаритів вікна браузера, екранних пік селях або у вигляді символу зірочки (*). Застосовуючи символ *, припускається, що розміри фрейму повинні залежати від габаритів решти фреймів сторінки. Наприклад, якщо один фрейм займає 70 % площі вікна браузера, то іншому фрейму. Розмір якого визначений засобом символу *, буде автоматично відведено тільки 30 % площі.

Дескриптор <FRAME> служить для визначення структури та змісту конкретного фрейму – власної назви, назви відтворюваної сторінки та ін.

Для того, щоб створити фрейм, потрібно:

1. Спочатку створити Web-сторінку (згідно з попередньо вказаними інструкціями). Не набирати текст вмісту сторінки та не вводити дескриптор <BODY>.

2. Далі ввести <FRAMESET безпосередньо після дескриптора </HEAD> та додати символ прогалини.

3. Щоб створити горизонтально розміщені фрейми, які розділяють площу вікна на стрічки, потрібно ввести ROWS=”a,b…”> та замінити a і b і т.п. значеннями висоти кожної стрічки-фрейму.

4. Щоб створити вертикально розміщені фрейми, які розділяють площу вікна на стовпчики, потрібно ввести COLS=”a,b…”> та замінити a і b і т.п. значеннями ширини кожного стовпчика-фрейму.

5. Щоб визначити конкретний фрейм, потрібно ввести <FRAME NAME=”?”, замінити ? стрічкою назви об’єкту та додати символ прогалини. Після того слід набрати SRC=”?” і замінити ? стрічкою, що містить повну назву файлу Web-сторінки, яка повинна відтворюватись всередині фрейму.

6. Далі потрібно повторити всі дії, подані в п.5 інструкції. Для всіх фреймів з набору, створеного при виконанні п.п.3,4.

7. Ввести </FRAMESET>

8. Якщо розміри фреймів недостатні для відтворення відповідної сторінки повністю, Web-браузер автоматично відображає смуги прокрутки.

Наприклад,

<HTML>

<HEAD>

<TITLE> Викладачі кафедри НПЕ</TITLE>

</HEAD>

<FRAMESET ROWS=”50,100,*”>

<FRAME NAME=”banner” SRC=”banner.html”>

<FRAME NAME=”contents” SRC=”contents.html”>

<FRAME NAME=”main” SRC=”Kenyo.html”>

</FRAMESET>

</HTML>

Поєднуючи декілька наборів фреймів, можна побудувати складні структури, які розділяють простір вікна браузера одночасно на стрічки та стовпчики. Щоб досягти такої мети, потрібно всередині опису одного набору фреймів (тобто між дескрипторами <FRAMESET> і </FRAMESET>) розмістити опис іншого набору.

Наприклад,

<HTML>

<HEAD>

<TITLE>Викладачі кафедри НПЕ</TITLE>

</HEAD>

<FRAMESET ROWS=”50, *”>

<FRAME NAME=”banner” SRC=”banner.html”>

<FRAMESET COLS =”150,*”>

<FRAME NAME=”contents” SRC=”contents.html”>

<FRAME NAME=”main” SRC=”Kenyo.html”>

</FRAMESET>

</FRAMESET>

</HTML>

У цьому випадку буде зверху сторінки один горизонтальний фрейм, а знизу – два вертикальні.