побудова таблиць

побудова таблиць

Таблиці в "оригінальному" розумінні цього слова при складання Web-сторінок звичайно ж застосовуються для їх прямого призначення, але не так повсюдно як вони використовуються при розмітки сторінки. За допомогою них сторінка сайту ділиться на кілька частин, де кількість частин не обмежена. Поряд з їх великими можливостями позиціонування до дргуг до одного і широким вибором структурування - спосіб розмітки сторінок таблицями робить кращим на сьогоднішній день інструментом для Web-дизайнера. Мають місце ще два способи заповнення сторінок - з використанням програм-конструкторів і за допомогою фреймів. Перші маючи переваги в простоті використання (об'єкти позиціонуються користувачем візуально без знання мови HTML) мають істотний недолік - вони створюють сторінки тільки під конкретне розширення екрану. На інших розширеннях сторінка буде виглядати некоректно. З фреймами йдуть справи ще гірше - їх не "бачать" пошукові машини. Тому майже завжди застосовують табличний метод, а Вам пропонуємо підійти до цієї теми з особливою увагою.

Теги таблиць

Тегів для складання таблиць всього чотири. Їх треба знати напам'ять:

  1. <TABLE> - позначає, що на сторінці буде складена таблиця.
  2. <TR> - формує рядок в таблиці.
  3. <TD> - формує осередок в таблиці.
  4. <TH> - вказує, де в таблиці буде заголовок.

Хто відкриває і закриває тег називається контейнером. Контейнери <TD> зміст комірки </ TD> додаються в контейнери <TR> рядок таблиці </ TR> (і тих і інших може бути скільки завгодно), останні в свою чергу вже в <TABLE> таблиця в цілому </ TABLE>. При необхідності тег <TD> змінюється на <TH>. Все просто, як "російська матрьошка". Ось приклад :

<TABLE> <TR> <TD> </ TD> <TD> </ TD> </ TR> <TR> <TD> </ TD> <TD> </ TD> </ TR> </ TABLE>

Вставляти таблицю всередину іншої таблиці потрібно в контейнер <TD> </ TD> і ніяк інакше. приклад:

.... Інша таблиця .... <TD> <TABLE> вставляється таблиця </ TABLE> </ TD> .... інша таблиця ......

У HTML-коді для зручності треба писати кожен тег з нового рядка. Але якщо Ви напишіть все в такому вигляді що наведено вище, то в браузері Ви нічого не побачите. Браузер не "бачить" ніяких параметрів таблиці або таблиць. Вони задаються за допомогою атрибутів з їх значеннями.

Атрибути тега <TABLE>

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

  • WIDTH - ширина таблиці (значення в пікселях (px) або відсотках)
  • HEIGHT - висота таблиці (значення в пікселях (px) або відсотках)
  • ALIGN - вирівнювання таблиці на сторінці (значення: left, right, center)
  • BORDER - товщина рамки таблиці (значення в px, можливо - нуль (невидима рамка)
  • BORDERCOLOR - визначає колір рамки таблиці
  • BGCOLOR - колір фону таблиці
  • BACKGROUND - задає таблиці фонове зображення
  • CELLSPACING - відстань між осередками в таблиці
  • CELLPADDING - відстань між кордоном осередки і текстом

Атрибути тега <TD>

Атрибути комірок таблиць мають такі ж назви і вимірами значень, що і таблиці з тією лише різницею що до них не застосовуються два останніх атрибута за списком (див. Вище), зате додані атрибути вирівнювання комірки по вертикалі VALIGN з значеннями top (верх), middle (середина) і botton (низ) і COLSPAN - об'єднання осередків в групу з числовим значенням рівним кількості об'єднуються осередків.

Атрибути тега <TR>

  • WIDTH - ширина рядка таблиці (значення в пікселях (px))
  • HEIGHT - висота рядка таблиці (значення в пікселях (px))
  • RULES - вид внутрішніх ліній (значення - all (всіх), rows (горизонтальних), cols (вертикальних), none (ніяких)
  • FRAME - вид зовнішніх ліній (значення - box (всіх), lhs (лівої), rhs (правої), above (верхньої), below (нижньої), vsides (лівої і правої), hsides (нижньої і верхньої), volid (ніякої )
  • COLGROUP - розділяє лінія між групами осередків

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

В побудова таблиць має місце ще один тег <TBODY>. Він призначений для угруповання елементів таблиць і є необов'язковим.

Тепер давайте для закріплення матеріалу зробимо простеньку розмітку сторінки за допомогою таблиці. Відкрийте будь-який текстовий редактор. Якщо хочете, щоб не було відступів від країв при дозволі екрану 800х600, то в тезі <BODY> запишіть:

<BODY leftmargin = "0" topmargin = "0" marginwidth = "0" marginheight = "0">

Далі в контейнері <BODY> надрукуйте наступне:
<TABLE width = "780" height = "580" border = "0" align = "center"
<TR> <TD colspan = 2 height = "100" bgcolor = "red" align = "center"> Заголовок </ TD> </ TR>
<TR> <TD width = "200" bgcolor = "gray"> Меню </ TR> </ TD>
<TR> <TD width = "580"> Текст </ TR> </ TD> </ TABLE>
Збережетеся і подивіться в браузері в різних режимах розширення екрану.

завдання:

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