Web Builder II edited by VectoR
Главное меню
Html-учебник
Реклама

| Главное меню
|
| Учебник HTML
|
|Хостинг
|
| Баннеры
|
| Как раскрутить сайт?
|
| Картинки
|
| Программы
|
| Master ID
|
| Master ID Forum
|
| Гостевая

Другие сайты:
Реферати з картинками, курсові, доповіді, повідомлення, шпаргалки, контрольні. Все для навчання.

On-Line учебник по HTML - Таблицы
С чего начинать?
Работа с текстом
Цвет и фон
Изображения
Изображения-карты
Ссылки
Стили (CSS)
Мета-теги
Таблицы
Списки
Формы
Горизонтальные линии

Создание таблиц очень важный момент в изучении HTML. Делая красивые страницы, нельзя не использовать таблиц. Имеется в виду, не те таблицы, которые мы видим в Ворде или в Екселе, а совсем другие, впрочем вы сийчас поймете. Попробуем создать простенькую таблицу.

Ячейка 1,1 Ячейка 1,2
Ячейка 2,1 Ячейка 2,2

Таблица справа имеет такой код:

Таблица начинается открывающимся тегом <TABLE> и завершается закрывающимся </TABLE>.
Тег <TABLE> может включать следующие аттрибуты:

WIDTH="n" Определяет ширину таблицы в пикселях или процентах, по умолчанию ширина таблицы определяется содержимым ячеек.
BORDER="n" Устанавливает толщину рамки. По умолчанию n=0 - таблица рисуется без рамки.
BORDERCOLOR="#FFFFFF"Устанавливает цвет окантовки, где #FFFFFF (белый) - шестнадцатиричное значение цвета.
BGCOLOR="#FFFFFF" Устанавливает цвет фона для всей таблицы, где #FFFFFF - шестнадцатиричное число.
BACKGROUND="image.gif"Заполняет фон таблицы изображением.
CELLSPACING="n"Определяет расстояние между рамками ячеек таблицы в пикселях.
CELLPADDING="n" Определяет расстояние в пикселях между рамкой ячейки и текстом.
ALIGN=LEFTОпределяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа).
FRAME="значение" Управляет внешней окантовкой таблицы, может принимать следующие значения:
VOID - окантовки нет (значение по умолчанию).
ABOVE - только граница сверху.
BELOW - только граница снизу.
HSIDES - границы сверху и снизу.
VSIDES - только границы слева и справа.
LHS - только левая граница.
RHS - только правая граница.
BOX - рисуются все четыре стороны.
BORDER - также все четыре стороны.
RULES="n" Управляет линиями, разделяющими ячейки таблицы. Возможные значения (n):
NONE - нет линий (значение по умолчанию).
GROUPS - линии будут только между группами рядов.
ROWS - только между рядами.
COLS - только между колонками.
ALL - между всеми рядами и колонками.

Таблица может включать заголовок, который распологается между тегами <CAPTION></CAPTION>. Он должен быть непосредственно после тега <TITLE>. К заголовку возможно применение аттрибута ALIGN, определяющего его положение относительно таблицы:

TOP - значение по умолчанию, заголовок над таблицей по центру.
LEFT - заголовок над таблицей слева.
RIGHT - заголовок над таблицей справа.
BOTTOM - заголовок под таблицей по центру.

Теперь о строках и ячейках таблицы. Строки таблицы начинаются открывающимся тэгом <TR> и завершаются закрывающимся </TR>, а каждая ячейка таблицы начинается тегом <TD> и завершается </TD>. Данные теги могут иметь такие аттрибуты:

Следующие атрибуты могут применятся для строк и ячейек.
ALIGN=LEFT Устанавливает горизонтальное выравнивание текста в ячейках строки. Может принимать значение LEFT (выравнивание влево), CENTER (выравнивание по центру) и RIGHT (вправо).
VALIGN=CENTER Устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), CENTER (выравнивание по центру - это значение принимается по умолчанию), BOTTOM (по нижнему краю).
BGCOLOR="#FFFFFF" Устанавливает цвет фона строки или ячейки.
BACKGROUND="image.gif" Заполняет фон строки или ячейки изображением.
Следующие атрибуты могут применятся только для ячейек.
WIDTH="n" Определяет ширину ячейки в n пикселях.
HEIGHT="n" Определяет высоту ячейки в n пикселях.
COLSPAN="n"Растягивание ячейки по горизонтали. Например, <TD COLSPAN="2"> означает, что ячейка будет растянута на 2 колонки.
ROWSPAN="n"Растягивание ячейки по строке. Например, <TD ROWSPAN="2" означает, что ячейка будет растянута на две строки таблицы.
NOWRAPПрисутствие этого аттрибута показывает, что текст должен размещаться в одну строку
BACKGROUND="image.gif"Заполняет фон ячейки изображением.

Кроме этого, любая ячейка таблицы может быть определена не тегами <TD></TD>, а тегами <TH></TH> - Table Header (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован.

Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект &nbsp; (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет (&nbsp; - обязательно должен набираться строчными буквами и закрыватся точкой с запятой).

И еще - имейте ввиду, что теги, устанавливающие шрифт (<B>, <I>, <FONT SIZE="n", FONT COLOR="#FFFFFF"), необходимо повторять для каждой ячейки.

Таблицы могут использоваться для рисования линий по всей ширине или высоте страницы, эффектов состыковки картинки и фона и др. Например, можно сделать страницу так:

Screen02

На рисунку слева видно страницу, оформленную одной табличой 2*2. В левой верхней ячейке - рисунок сердца, или же логотип сайта. В верхней правой - название страницы. В нижних таблицах - меню сайта и содержание страницы. Для гибкости, при этом гораздо лучше использовать размеры в процентах.


Назад Домашняя Вперед

Участие в каталогах

Hosted by uCoz