Управление выравниванием элементов таблиц

Для выравнивания элементов таблиц в тегах ,<TH> и <TD> используется много различных атрибутов. Рассмотрим наиболее полезные и общеупотребимые из них:

Атрибут	Теги	Описание
ALIGN	Общее горизонтальное выравнивание таблицы на странице - LEFT/RIGHT/CENTER Общее выравнивание элементов строки - LEFT/RIGHT/CENTER/CHAR Выравнивание заголовка - LEFT/RIGHT/CENTER/CHAR (по умолчанию CENTER) Выравнивание данных в ячейке - LEFT/RIGHT/CENTER/CHAR (по умолчанию LEFT ) CHAR ALIGN=CHAR Задает символ-выравниватель, при использование атрибута выравнивания ALIGN=CHAR. Например: 1,35 CHAROFF ALIGN= CHAR Задает отступ (в % ширины ячейки или в пикселях) относительно начала ячейки, символов заданных атрибутом CHAR. Например: 1,35 -1,45 VALIGN Общее вертикальное выравнивание элементов таблицы - BOTTOM/MIDDLE/TOP (по умолчанию MIDDLE ). Общее выравнивание элементов строки - BOTTOM/MIDDLE/TOP/BASELINE Выравнивание заголовка - BOTTOM/MIDDLE/TOP Выравнивание данных в ячейке - BOTTOM/MIDDLE/TOP CELLPADDING Свободное пространство между содержимым ячеек и их границами CELLSPACING Свободное пространство между границами смежных ячеек WIDTH Ширина таблицы в пикселях или процентах ширины окна броузера. , Ширина ячейки таблицы в пикселях или процентах от ширины таблицы. HEIGHT Высота таблицы в пикселях или процентах ширины окна броузера , Высота ячейки таблицы в пикселях или процентах от ширины таблицы. Управление линиями сетки таблиц Для управления линиями сетки таблиц используется атрибут BORDER контейнера , который задает толщину рамки таблицы в пикселях (по умолчанию рамки нет, BORDER=0). В стандарте HTML 4, появились новые атрибуты таблиц, строк и ячеек: FRAME для более гибкого управления линиями сетки таблиц и RULES для создания дополнительных линий разделителей групп в таблицах. Данные атрибуты поддерживаются современными броузерами и могут принимать следующие значения: Атрибут FRAME: VOID - без рамки; BOX - с рамкой; ABOVE - верхняя сторона рамки; BELOW - нижняя сторона рамки; LHS - левая сторона рамки; RHS - правая сторона рамки; VSIDES - вертиккальные линии; HSIDES - горизонтальные линии; Атрибут RULES: NONE - без разделителя групп; GROUPS - вертикальные и горизонтальные линии разделители групп; Например: ... равнозначно ... ... равнозначно ... Управление цветом элементов таблиц Атрибуты управления цветом элементов таблиц появились в HTML как расширения стандарта, предлагаемые основными поставщиками Web-броузеров (Microsoft и Netscape). Расширения управления цветом: BORDERCOLOR - цвет рамки и BGCOLOR - цвет фона, используются как атрибуты для тегов: , , - строка. - ячейка. Объединение элементов таблиц. Для создания сложных таблиц не обойтись без объединения строк и столбцов. Для объединения ячеек соседних строк и столбцов таблицы, в HTML используются атрибуты ROWSPAN и COLSPAN тегов и - группировка и описание свойств столбцов, > - определение шапки таблицы, - определение группы тело-таблицы, - определение нижней строки. Полезным атрибутом тегов и является атрибут SPAN=N, который распространяет свойства, заданные данными тегами на N-столбцов в группе. Использование данных тегов существенно облегчает компоновку и форматирование таблиц. Схема их применения следующая (в данном примере применяется одиночная форма записи тегов , и , но в случае использования одного из них, необходимо применять контейнерную форму): , . Соответственно областью их действия может быть вся таблица, строка или отдельно взятая ячейка. Например: ... - таблица. и . Данные атрибуты задают количество объединемых ячеек в строке (ROWSPAN=N) или столбце (COLSPAN=N). Рассмотрим использование данных атрибутов на примере таблицы. HTML код таблицы: ДРУЗЬЯ И ПОДРУГИ ДРУЗЬЯ Коля 44-44-44 Вася 33-33-33 ПОДРУГИ Маша 11-11-11 Глаша 22-22-22 Внешний вид таблицы: ДРУЗЬЯ И ПОДРУГИ ДРУЗЬЯ Коля 44-44-44 Вася 33-33-33 ПОДРУГИ Маша 11-11-11 Глаша 22-22-22 В стандарте HTML 4 повились новые теги для группировки (не объединения, а именно группировки) строк и столбцов таблицы в группы с общими свойствами. Это теги ... ... ... ... ... ... ... 1 заголовок N заголовок 1 столбец N столбец 1 столбец N столбец 1 итоговый столбец N итоговый столбец Для демонстрации возможностей новых тегов рассмотрим два варианта, какой из них проще - вам решать, но результат получится один и тот же. Старый подход Новый подход тип название 1998 1999 2000 тип1 название1 1,2 1,3 1,4 тип2 название2 2,2 2,3 2,4 тип название 1998 1999 2000 тип1 название1 1,2 1,3 1,4 тип2 название2 2,2 2,3 2,4 А вот результат обоих наших деяний: тип название 1998 1999 2000 тип1 название1 1,2 1,3 1,4 тип2 название2 2,2 2,3 2,4 Ну и по доброй традиции, для закрепления материала, рассмотрим пример HTML документа, использующего таблицы (обратите внимание, что размер ячеек, содержащих изображение, задан соответствующим размеру изображения). Пример 5. Форматирование таблиц. [просмотр примера в окне] Список моих друзей и подруг Категория ФИО Фото Телефон ДРУЗЬЯ Коликов Коля 44-44-44 Васюков Вася 33-33-33 ПОДРУГИ Машина Маша 11-11-11 Глашева Глаша 22-22-22 © 2001 Вебмастер Попробуй свзаться со мной В заключении следует отметить, что таблицы очень удобный инструмент для компоновки и форматирования элементов Web-страниц. Использование таблиц без линий сетки позволяет жестко связать текстовые блоки документа с графикой и другими объектами. Например, кнопки управления, которыми вы пользуетесь для навигации по моим страницам - это то же таблица (проверьте посмотрев источник HTML). Используя таблицы, можно создавать альтернативы картам ссылок, рассмотренным в предыдущей главе. Dmitriy Krasyuk Основы HTML Спонсор раздела Вставай на лыжи или сноуборд!!! Мы поможем! Рассылки Subscribe.ru: Библиотека сайтостроительства - новости, статьи, обзоры Дискуссионный лист для web-разработчиков Подписка на MailList.Ru Автор: NunDesign Другие разделы Оптимизация сайтов Web-студии » Новое в разделе Web-дизайн Web-программирование Интернет-реклама Раскрутка сайта Web-графика Flash Adobe Photoshop Рассылка Инструменты вебмастера Контент для сайта HTML/DHTML Управление web-проектами CSS I2R-Журналы I2R Business I2R Web Creation I2R Computer рассылки библиотеки + И2Р Программы Всё о Windows Программирование Софт Мир Linux Галерея Попова Каталог I2R Партнеры Amicus Studio NunDesign MegaTIS.Ru 2000-2008 г.    Все авторские права соблюдены.