B
bleck_hawk
Гость
Таблицы.Марихуана написал(а):
Рассмотрим построение таблицы на примере:
Пример 1.
Код Отображение
<TABLE WIDTH="50%" BORDER="1" ALIGN="center">
<TR> <TD> Ячейка 1 </TD> <TD> Ячейка 2 </TD> </TR>
<TR> <TD> Ячейка 3 </TD> <TD> Ячейка 4 </TD> </TR>
</TABLE> Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4
Таблица описывается тегом <TABLE>. Элементы таблицы строятся по рядам (строки). Ряд задается тегом <TR> (Table Row, ряд таблицы). Внутри ряда находятся ячейки (столбцы) (тег <TD> - Table Date, данные таблицы). Для заголовков столбцов вместо тега <TD> используется <TH> (Table Head, заголовок таблицы). Разница в этих тегах лишь в том, что текст в последнем центрируется и выделяется жирным шрифтом.
Рассмотрим свойства тега <TABLE>. Свойство BORDER определяет толщину рамок таблицы. Для создания таблицы без рамок задают BORDER="0". Для определения ширины таблицы используют свойство WIDTH. Значением может быть ширина в пикселях или же в процентах. По умолчанию ширина определяется содержимым ячеек таблицы. Выравнивание таблицы задается свойством ALIGN. Возможные значения: LEFT (по левому краю), CENTER (центрирование), RIGHT (по правому краю).
Рассмотрим свойства оформления тега <TABLE>. Свойство BORDERCOLOR задает цвет окантовки, BGCOLOR и BACKGROUND цвет фона и фоновое изображение, соответственно. Два последних тега применимы также для целого ряда таблицы или же для отдельной ячейки. Создадим таблицу с зелеными рамками и желтым фоном:
Пример 2.
Код Отображение
<TABLE BORDER="1" BORDERCOLOR="green" BGCOLOR="yellow">
<TR> <TD> Ячейка 1 </TD> <TD> Ячейка 2 </TD> </TR>
</TABLE> Ячейка 1 Ячейка 2
Свойство FRAME задает то, какие линии внешней рамки будут отображены. Возможные значения: VOID (избегать) - окантовка отсутствует, ABOVE (сверху), BELOW (снизу), HSIDES (Horisontal Sides - горизонтальные стороны), VSIDES (Vertical Sides - вертикальные стороны), LHS (Left Hand Sides - слева), RHS (Right Hand Side - справа), BOX или BORDER - вся окантовка (значение по умолчанию).
Пример 3.
Код Отображение
<TABLE BORDER="1" FRAME="HSIDES">
<TR> <TD> Ячейка 1 </TD> <TD> Ячейка 2 </TD> </TR>
</TABLE> Ячейка 1 Ячейка 2
Свойство RULES определяет стиль рисования линий между ячейками таблицы. Возможные значения: NONE - нет линий, ROWS - между рядами, COLS - между колонками, ALL - рисуются все линии (значение по умолчанию).
Пример 4.
Код Отображение
<TABLE BORDER="1" RULES="NONE">
<TR> <TD> Ячейка 1 </TD> <TD> Ячейка 2 </TD> </TR>
<TR> <TD> Ячейка 3 </TD> <TD> Ячейка 4 </TD> </TR>
</TABLE> Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4
<TABLE BORDER="1" RULES="ROWS">
<TR> <TD> Ячейка 1 </TD> <TD> Ячейка 2 </TD> </TR>
<TR> <TD> Ячейка 3 </TD> <TD> Ячейка 4 </TD> </TR>
</TABLE> Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4
Свойства CELLSPACING и CELLPADDING задает расстояние между ячейками и между рамкой ячейки и ее содержимым, соответственно:
Пример 5.
Код Отображение
<TABLE BORDER="1" CELLSPACING="5" CELLPADDING="10">
<TR> <TD> Ячейка 1 </TD> <TD> Ячейка 2 </TD> </TR>
</TABLE> Ячейка 1 Ячейка 2
Свойства ALIGN и VALIGN применимы для строк и ячеек для горизонтального и вертикального выравнивания текста, соответственно. Значения ALIGN: LEFT (по левому краю), CENTER (центрирование), RIGHT (по правому краю). Свойство VALIGN может принимать значения: TOP - по верхнему краю, CENTER - по центру, BOTTOM - по нижнему краю.
Свойства COLSPAN и ROWSPAN объединяют указанное значение столбцов и строк соответственно:
Пример 6.
Код Отображение
<TABLE BORDER="1">
<TR> <TD> Ячейка 1 </TD> <TD> Ячейка 2 </TD> </TR>
<TR> <TD COLSPAN="2"> Большая ячейка 3 </TD> </TR>
</TABLE> Ячейка 1 Ячейка 2
Большая ячейка 3
Позиционирование таблицами.
При создании дизайна сайта прежде всего необходимо продумать где какие элементы страницы будут размещены. Неоценимую помощь в этом могут оказать таблицы. Ваша страница будет представлять собой таблицу с элементами сайта в ее ячейках (можно делать невидимые границы). При написании сайта под определенное разрешение экрана (обычно 800х600) можно просто задать ширину страницы (немного меньшее, чем само разрешение экрана, чтобы вмешалась полоска вертикального скроллинга). Выравнивание по центру или по левому краю (но не по правому!) приведет к тому, что страница будет выглядеть хорошо при любом другом разрешении экрана. Как проверить соответствует ли страница разрешению 800x600? Переключите монитор на это разрешение и разверните страницу, открытую в браузере, на полный экран. Полосы горизонтального скроллинга не должно быть!
а еще подпришись в Subscribe.Ru на рассылку "Уроки веб-дизайна с подробными примерами" там много интересного( если хоче ).
не соответсвует даже стандарту HTML 4.01, я не говорю уже о XHTML 1.0 Transitional...
А учиться с хорошо написанных учебников гораздо интересней.
