Створення таблиць

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

Код таблиці міститься в контейнері TABLE. Перш ніж створювати HTML – код таблиці, необхідно визначити максимальну кількість рядків, що містяться, в ній і столбцов. Потім у міру написання коду, визначають осередки одну за інший. Осередки визначаються зліва направо по рядках і зверху вниз.

Перш ніж переходити до опису осередків, потрібно визначити деякі загальні характеристики таблиці. До них відносяться ширина таблиці, інтервали всередині осередку, інтервали між осередками і т.д.

Однією з таких загальних характеристик є рамка, тобто межа, що відділяє таблицю від іншої частини документа. Якщо вибрана таблиця з рамкою, то необхідно указати ширину рамки. Для цього використовується атрибут BORDER=n, де n – ширина рамки в пікселях. Атрибут поміщається в дескриптор <TABLE>. Якщо не привласнювати атрибуту ніякого значення (наприклад <TABLE BORDER>), то більшість броузеров за умовчанням привласнить йому значення 1. Якщо вибрати 0 (наприклад <TABLE BORDER=0>) або взагалі опустити атрибут BORDER, то буде створена таблиця без рамки.

Для визначення ширини таблиці використовується атрибут WIDTH, поміщений в дескриптор <TABLE>. За умовчанням ширина таблиці обчисляється як сума ширин всіх столбцов. А ширина кожного стовпця (якщо не виберете іншу установку) за умовчанням визначається так, щоб в осередку помістився найдовший елемент даних або найбільша картинка.

<TABLE BORDER=2 WIDTH=“90%”>

- таке визначення (90% екрану Web - броузера) дозволяє мати більше вільного місця в таблиці.

<TABLE BORDER=0 WIDTH=600>

- тут привласнено атрибуту WIDTH фіксоване значення в пікселях, з урахуванням того, що таблиця поміститься на екрані стандартного монітора (з дозволом 640´480).

За допомогою атрибута COLS, поміщеного в дескриптор TABLE, можна визначити кількість столбцов таблиці:

<TABLE BORDER=0 WIDTH=“50%” COLS=“3”>

Для таблиці можна визначити мову і напрям проходження осередків. За допомогою атрибута DIR можна указати, до ладу читати текст в таблиці – зліва направо (перший стовпець зліва і перший рядок зверху) або справа наліво (перший стовпець справа). При цьому атрибуту DIR привласнюється значення ltr або rtl соотвественно. Стандартною є орієнтація зліва направо (тобто ltr). За допомогою атрибута LANG можна визначити мову, що використовується в таблиці (стандартною установкою є англійська).

Для визначення інтервалів в таблиці використовуються атрибути CELLSPACING і CELLPADDING, поміщені в дескриптор <TABLE>. Атрибут CELLSPACING визначає відстань між осередками в пікселях (стандартне значення рівно 2). Атрибут CELLPADDING визначає відстань в пікселях між вмістом осередку і її межами (стандартна відстань рівно 1). Не варто привласнювати цьому атрибуту значення 0, інакше текст може вийти за межі осередку і навіть за межі таблиці.

<TABLE BORDER WIDTH=“90%” CELLSPACING=4 CELLPADDING=5>

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

Кожна пара дескрипторів <TR> і </TR> визначає один рядок таблиці. Для кожного рядка повинно бути дано точне визначення; причому всі рядки повинні містити однакову кількість осередків.

Існують два основні елементи таблиці: осередки даних і осередку заголовків. Осередок даних визначається за допомогою контейнера TD, в який поміщають дані. Осередок заголовка визначається за допомогою контейнера TH. Текст, поміщений в цей контейнер, відображувався напівжирним шрифтом.

Дескриптори <TD> і <TH> знаходяться всередині дескриптора <TR> і визначають окремі осередки в межах рядка таблиці. В обох дескрипторах використовуються атрибути, визначальні розмір і зовнішній вигляд осередків. Це атрибути вирівнювання (ALIGN, CHAR, CHAROFF, VALIGN), атрибути, що використовуються для «растяжки» осередків по декількох рядках і стовпцях (COLSPAN,ROWSPAN) і атрибути, визначальні заголовки рядків і столбцов (AXIS,AXES).

Звичайно в кожному рядку таблиці міститься однакове число осередків. Але іноді виникає необхідність розтягнути осередок на декілька рядків або столбцов. Для визначення розтягнутого на декілька столбцов осередку потрібний атрибут COLSPAN, поміщений в дескриптор <TH> або <TD>. Цьому атрибуту потрібно привласнити значення, відповідне кількості столбцов, уздовж яких розтягнутий осередок. Дані, що містяться в осередку, заповнюють весь простір об'єднаних осередків. Якщо визначений осередок, розтягнутий на декілька рядків, то в описі цих рядків вже не потрібно указувати, що відповідні осередки порожні. Просто необхідно пропускати визначення цих осередків.

Осередки завжди розтягуються вниз і управо. Тому для створення осередку, розтягнутого на дещо столбцов, добавляють атрибут COLSPAN у визначення крайнього осередку зліва в наборі об'єднуваних осередків. А для отримання осередку, розтягнутого на декілька рядків, добавляють атрибут ROWSPAN у визначення самого верхнього осередку.

Приклад:

TABLE BORDER=2>

<TR>

<TH COLSPAN=2>

Модель</BR><TH>Частота в</BR>МГц

<TR ALIGN=CENTER>

<TH ROWSPAN=2>Процессор

<TH>486

<TD>DX/100

<TR ALIGN=CENTER>

<TH>Pentium

<TD>200 MMX

</TABLE>

Атрибут ALIGN дозволяє вирівняти вміст осередків і може приймати значення CENTER, JUSTIFY, CHAR, RIGHT або LEFT. Якщо атрибут ALIGN не визначений, то вміст осередків буде выровнено відповідно до стандартних установок броузера.

Якщо привласнити атрибуту ALIGN значення JUSTIFY, то текстовий вміст осередку буде выровнено по ширині. Але це відбувається в тому випадку, якщо в осередку містяться декілька слів.

Якщо привласнити атрибуту ALIGN значення «char», то вміст осередку буде выровнено відносно символа, заданого за допомогою атрибута CHAR, наприклад:

<COL ALIGN= “CHAR” CHAR= “,”>

Запис CHAR=“,” визначає символ, по якому виконується вирівнювання, тобто для дробових чисел вирівнювання відбувається по десятковій крапці. Стандартним значенням цього атрибута є символ – роздільник, який визначений в поточних установках для конкретної країни. Наприклад, в англійській мові це крапка, а в російському – кома.

Атрибут VALIGN може використовуватися в контейнері <TR> <TH> або <TD>. З його допомогою можна вирівняти текст по верхній або нижній межі осередку, а також відцентрувати по вертикалі. Поміщений в дескриптор <TR>, атрибут VALIGN указує, що всі осередки рядка повинні бути выровнены по вертикалі відносно базової лінії.

Використовуючи атрибут WIDTH в дескрипторі <TABLE>, можна включити в елементи таблиці більше вільного простору, щоб зробити її більш читабельною.

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

<TABLE>

<CAPTION ALIGN=BOTTOM>Это подпись</CAPTION>

<TR>…

Крім атрибута BOTTOM, в контейнері можна використовувати атрибути TOP, LEFT і RIGHT. Це означає, що підписи можна розташовувати над таблицею, зліва і праворуч від неї відповідно.

До таблиці можна добавити фон, колір якого відрізняється від іншої частини Web – сторінки. Можна офарбувати рядки або окремі осередки, щоб виділити їх на тлі іншої таблиці. Для цього використовується в дескрипторі <TABLE> атрибут BGCOLOR. Значення атрибута може бути шестнадцатеричным числом або текстом. Цей атрибут можна використовувати в дескрипторах і.

За допомогою дескриптора <TABLE> і атрибутів BODERCOLOR і BODERLIGHT можна змінити колір рамки таблиці. Атрибут BODER повинен бути поміщений в дескриптор <TABLE> (щоб змінити колір рамки всередині таблиці, потрібно використовувати атрибути BODERCOLOR і BODERLIGHT в дескрипторі <TR> або <TD>). Значення атрибута BODERCOLOR впливає на верхню частину рамки тривимірної таблиці, а величина BODERLIGHT – на нижню (тобто на тінь). За допомогою цих атрибутів можна модифікувати стандартні атрибути представлення рамок тривимірних таблиць броузера.

Створення вкладених таблиць потрібно використовувати у випадку, якщо сторінка містить множину різних елементів (графіку, текст, списки) і необхідно, щоб таблиці знаходилися в різних місцях екрану. Визначають таблицю зі всім її вмістом, але без рамки і привласнюють цій таблиці атрибут WIDTH= “100%”, внаслідок чого вона буде займати всю ширину вікна броузера. Потім визначають вкладену таблицю з рамками, в результаті одержують макет сторінки.

Щоб вкласти одну таблицю в іншу, можна включити визначення таблиці, що вкладається, в контейнер TD.

Приклад:

TABLE>

<TR>

<TD>Ячейка 1

<TD>

<TABLE border=2>

<TR><TD>Одна осередок всередині іншої

</TABLE>

</TABLE>

2.2. Використання графіки в Web.

Використовувані зображення можна розділити на вбудовані (inline image) - це графічні зображення, які завжди залишаються на одному і тому ж місці на Web - сторінці; плаваючі (floating image) - зображення вирівнюються відносно оточуючого їхнього тексту; зображення - посилання (clickable image) - зображення на Web - сторінці, клацнувши на яких можна відкрити нову Web - сторінку або службу Internet. Вбудовані зображення як би продовжують рядок тексту (якщо в ній є місце), а плаваючі переходять на новий рядок.

Щоб вставити графічний файл на Web - сторінку, потрібно включити гіпертекстове посилання на нього, як при створенні гіперпосилання на іншу сторінку. При цьому зображення може знаходитися на тому ж сервері, на якому розташована ваша сторінка або в будь-якому іншому місці Internet.

Використовується синтаксис:

<IMG SCR=URL изображения>

<IMG> - це одиночний дескриптор, призначений для вставки зображень; використовується для всіх вбудованих зображень. SRC (source) -означает джерело, тобто місце, де зберігається зображення.

Типовий HTML - код зображення - посилання:

<А HREF=«URL»><IMG SRC=«имя файла изображения»></А>

Для вирівнювання тексту відносно зображення використовується атрибут ALIGN:

<IMG ALIGN=значение SCR=URL изображения>

Таблиця 2.1.