ГлавнаяBTL инфоПрограммированиеHTLM/DHTML

Используя таблицы, можно создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, тонкие линии на всю ширину или высоту странички и т.д.

Чтобы разобраться в устройстве таблицы, расмотрим простой пример:

Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4

Примечание: В данном примере создана таблица с фиксированой шириной (WIDTH=\"200\" пикселей), но лучше использовать проценты, т.к. в этом случае размер таблицы будет изменятся в зависимости от размера окна.

Такая таблица реализуется следующим кодом:

<TABLE BORDER=\"2\" WIDTH=\"200\"
BGCOLOR=\"#00FF00\">
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
</TR>
<TR>
<TD>Ячейка 3</TD>
<TD>Ячейка 4</TD>
</TR>
</TABLE>

Таблица начинается открывающимся тегом <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\"), необходимо повторять для каждой ячейки.

Статьи

CSS
Cascading Style Sheets (Таблицы Каскадных Стилей) - это язык, содержащий набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов. Приведу пример: Вам нужно создать жирный красный подчеркнутый текст.
 

Редактирование текста
Большинство HTML документов имеют заголовок. Для его создания используют теги , где n – число от 1 до 6. Заключив текст между этими тегами, вы получите заголовок определенного размера...
 

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

Изображения
Для вставки изображений в HTML документ используется следующая конструкция (представлена полная)...
 

Изображения-карты
Карты - это способ сделать различные части одного графического изображения гиперссылками. Они позволяют выделить отдельные области изображений и определить для каждой из них свое действие...
 

Ссылки
Ссылки HTML позволяют связать текст или картинку с другими гипертекстовыми документами. Текст, как правило, выделяется цветом или оформляется подчеркиванием. Вот обычная конструкция ссылки...
 

Мета-теги
Мета-теги - информация для Обозревателя и поисковых машин. В HTML документе всегда размещаются между тегами . Большинство мета-тегов являются не обязательными, поэтому решайте сами какие использовать. Приведены самые полезные...
 

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

Списки
Для непронумерованных списков Обозреватель обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь Обозревателя...
 

Формы
Форма — это инструмент, с помощью которого HTML-документ может отправить информацию в заранее определенную точку внешнего мира. Формы применяються для опроса посетителей, покупки чего-либо, отправки електронной почты.
 


1 2 
В начало Предыдущая Следующая В конец
 
Услуги
Портфолио
BTL инфо
Администрирование
 
Дизайн
 
Программирование
 
htlm/dhtml
javascript
ajax
aps
flash action script
php
xhtml/wap
database
Поисковая оптимизация и раскрутка
 
Шаблоны
 
Программы
 
Контакты

УКР РУС ENG

  © 2005-2008 дизайн-студия myua.com.ua