Web Builder
Введение в HTML
Выбор хостинга
Раскрутка сайта
О зароботке в сети
Webmoney & E-gold
Партнерские програмы
Показ баннеров
Практика вебмастера
Файловый архив
Графика для сайта
Готовые JavaScripts
Карта сайта
Услуги
Форум
Гостевая книга
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 (заголовок таблицы). В принципе, это обычная ячейка, но текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован.
Если ячейка пустая, то вокруг нее рамка не рисуется. Если рамка все же нужна вокруг пустой ячейки, то в нее надо ввести символьный объект (non-breaking space - неразрывающий пробел). Ячейка по-прежнему будет пуста, а рамка вокруг нее будет ( - обязательно должен набираться строчными буквами и закрыватся точкой с запятой).
И еще - имейте ввиду, что теги, устанавливающие шрифт (<B>, <I>, <FONT SIZE="n", FONT COLOR="#FFFFFF"), необходимо повторять для каждой ячейки.
Таблицы могут использоваться для рисования линий по всей ширине или высоте страницы, эффектов состыковки картинки и фона и др. Например, можно сделать страницу так:
 |
На рисунку слева видно страницу, оформленную одной табличой 2*2. В левой верхней ячейке - рисунок сердца, или же логотип сайта. В верхней правой - название страницы. В нижних таблицах - меню сайта и содержание страницы. |
 |
 |
 |