При створенні Web-сторінок часто необхідно по різному розміщувати фрагменти тексту та малюнки відносно один одного, наприклад в різних колонках. Для завдання взаємного розташування елементів сторінки, представлення табличної інформації, створення меню слід використовувати таблиці.
Таблиці створюють за допомогою наступних тегів:
<TABLE></TABLE> - таблиця на мові HTML позначається парним тегом.
Будь-яка таблиця складається з декількох або навіть із одного рядка.
<TR></TR>- рядок обмежений тегами. Рядок таблиці також може включати декілька комірок.
<TD></TD> - комірки обмежені парою тегів, між якими, наприклад, можна розміщувати фрагмент текста або код HTML, відповідний малюнку.
Кількість рядків в таблиці визначається кількістю тегів <TR>, а кількість стовпців – максимальною кількістю тегів <TD> в рядку.
<TC> Заголовок таблиці </TC> - прописує заголовок таблиці.
Загальна структура таблиці, описана за допомогою HTML-коду:
<TABLE align=center width=80% border=2>
<TC> Я та моє хобі </TC>
<TR>
<TD><IMG alt="Мое фото" src="498.jpg"style="HEIGHT: 640px; WIDTH:480px"></TD>
<TD>Я народилась у місті Харкові</TD>
</TR>
<TD> <IMG alt="МоЄ хобІ" src="M26.jpg"></TD>
<TD> Це майже мій портрет</TD>
</TR>
</TABLE>
Користуючись таблицями, можна створювати такі ефекти, як верстка в декілька колонок; застосування ефектів стикування картинки й фону, тонкі лінії на всю ширину або висоту сторінки тощо.
Тег <TABLE> може включати такі атрибути:
width=”n” (width=80%) - ширина таблиці - відсоток зображення таблиці відносно вікна браузера. Зазвичай задається у межах 75-85% для комфортності перегляду та роботи.
border=”n” (border=2) – встановлює товщину лінії рамки (в пікселях). За умовчанням лінії сітки таблиці не відображаються.
bordercolor = «колір» - колір окантовки.
bgcolor = «колір» - фон всієї таблиці
background = “image.gif” – заповнює фон таблиці зображенням.
cellpadding = “n” – визначає відстань між рамкою та текстом комірки
align = “left” або “center” (по центру) або “right” (по правому краю – визначає розташування таблиці в документі. За умовчанням таблиця від ображається по лівому краю вікна
<TABLE aligen =center width=80% border=2> - таблиця займає 80% по ширині вікна браузера, вирівняна по центру, межі таблиці – видимі, товщиною 2 пікселі.
Рядки та стовпці таблиці:
Рядки таблиці починаються відкриваючим тегом <TR> і завершується закриваючим тегом </TR>, а кожен елемент таблиці починається тегом <TD> і завершується тегом </TD>. Ці теги можуть мати такі атрибути:
align = “left”(по лівому краю) або “center” (по центру) або “right” (по правому краю – визначає розташування тексту в комірці. За умовчанням текст відображається по лівому краю комірки.
valign=”значення” - задає вирівнювання в комірці по верхньому (top) або нижньому (bottom) краям, а також по вертикальній середині (middle) комірки.
Так само, як і в таблиці можна використовувати наступні атрибути:
bgcolor = «колір» - встановлює колір фону рядка/комірки
background = “image.gif” – заповнює фон рядка/комірки зображенням.
width=”n” – ширина комірки в пікселях
height=”n” – висота комірки в пік селях
colspan= “n” – розтягує комірку по горизонталі (об’єднання комірок по горизонталі)
<TD colspan= “3”> - це означає, що комірка буде розтягнута на три колонки
rowspan= “n” – розтягує комірку на рядки (об’єднання комірок по вертикалі).
<TD rowspan = “2”> - об’єднання двох вертикальних комірок.
Будь який елемент таблиці може бути визначений не тегами <TD></TD>, а тегами <TН></TН> - заголовок таблиці. Це звичайна комірка, але текст усередині цих тегів буде виділений напівжирним шрифтом і відцентрований.
Якщо комірка порожня, то навколо неї рамка не малюється. Якщо навколо порожньої комірки рамка все ж таки потрібна, то в неї треба ввести символьний об’єкт &ndsp;. Комірка, як і раніше, буде порожня, а рамка навколо неї буде (&ndsp; - обов’язково повинен набиратися малими буквами і закриватися крапкою з комою).
Теги, що встановлюють шрифт (<В>, <І>, <FONT size= “n” color= “колір”>) необхідно повторювати для кожної комірки.