Графічні об'єкти на web-сторінці

Додавання таблиці

При створенні 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= “колір”>) необхідно повторювати для кожної комірки.

Не нашли, что искали? Воспользуйтесь поиском: