Таблицы

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

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

Таблицы.

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

Пример 1.

Таблица описывается тегом <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.

Свойство FRAME задает то, какие линии внешней рамки будут отображены. Возможные значения: VOID (избегать) - окантовка отсутствует, ABOVE (сверху), BELOW (снизу), HSIDES (Horisontal Sides - горизонтальные стороны), VSIDES (Vertical Sides - вертикальные стороны), LHS (Left Hand Sides - слева), RHS (Right Hand Side - справа), BOX или BORDER - вся окантовка (значение по умолчанию).

Пример 3.

Свойство RULES определяет стиль рисования линий между ячейками таблицы. Возможные значения: NONE - нет линий, ROWS - между рядами, COLS - между колонками, ALL - рисуются все линии (значение по умолчанию).

Пример 4.

Свойства CELLSPACING и CELLPADDING задает расстояние между ячейками и между рамкой ячейки и ее содержимым, соответственно:

Пример 5.

Свойства ALIGN и VALIGN применимы для строк и ячеек для горизонтального и вертикального выравнивания текста, соответственно. Значения ALIGN: LEFT (по левому краю), CENTER (центрирование), RIGHT (по правому краю). Свойство VALIGN может принимать значения: TOP - по верхнему краю, CENTER - по центру, BOTTOM - по нижнему краю.

Свойства COLSPAN и ROWSPAN объединяют указанное значение столбцов и строк соответственно:

Пример 6.

Позиционирование таблицами.

При создании дизайна сайта прежде всего необходимо продумать где какие элементы страницы будут размещены. Неоценимую помощь в этом могут оказать таблицы. Ваша страница будет представлять собой таблицу с элементами сайта в ее ячейках (можно делать невидимые границы). При написании сайта под определенное разрешение экрана (обычно 800х600) можно просто задать ширину страницы (немного меньшее, чем само разрешение экрана, чтобы вмешалась полоска вертикального скроллинга). Выравнивание по центру или по левому краю (но не по правому!) приведет к тому, что страница будет выглядеть хорошо при любом другом разрешении экрана. Как проверить соответствует ли страница разрешению 800x600? Переключите монитор на это разрешение и разверните страницу, открытую в браузере, на полный экран. Полосы горизонтального скроллинга не должно быть!

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

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

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