Учебник по веб дизайну
 Свободное программное обеспечение. Доступно. Бесплатно. Легально.
Учебник
HTML
CSS
DHTML
JavaScript
SSI
Раскрутка
Справочник
HTML
JavaScript
SSI
Браузеры
Хостинг
Скрипты
JavaScript
PHP
Статьи
SEO
HTML
Flash
Все об Интернет
Новости Интернет
Утилиты
Конструктор
Информер
А так же...
Наши баннеры
Контакты
Гостевая
Реклама на сайте

Таблицы

Доброго Вам времени суток, уважаемые подписчики!

Представляю Вашему вниманию четвертый выпуск рассылки "Уроки веб-дизайна в примерах".

Содержание выпуска:
  • Таблицы.
  • Позиционирование таблицами.
  • Анонс следующего выпуска.

Таблицы.

Рассмотрим построение таблицы на примере:

Пример 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? Переключите монитор на это разрешение и разверните страницу, открытую в браузере, на полный экран. Полосы горизонтального скроллинга не должно быть!

Анонс следующего выпуска.

Все разнообразие списков. Структурирование информации на странице.

Благодарю за внимание!
сайт: http://design.wmplace.net

P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").

Реклама

Программиста спрашивают: Скажите пожалуиста, который час? Программист: Который час, если вас это прикалывает девушка.
главная :: наверх :: добавить в избранное :: сделать стартовой :: рекомендовать другу :: карта сайта

Rambler's Top100

Страница сгенерированна за 0.0173 сек.
Сайт оптимизирован под разрешение 800х600 и браузер MS IE 6.0.
Copyright © 2005-2010 originweb.info, design.originweb.info.
Хостинг ruweb.net