Форматирование табличных данных

Таблицы являются важнейшим элементом HTML-документов, т.к. кроме богатых возможностей по представлению структурированных данных они широко применяются как средство дл создания "каркасов" Web-страниц.

Таблицы в HTML определяются при помощи контейнера <TABLE>...</TABLE>, заключающего в себе другие элементы таблицы: название, заголовки ячеек и их содержимое. Атрибутами контейнера <TABLE> задается формат линии-сетки и общие правила форматирования (общий формат действуют, если иной формат не задан атрибутами формата конкретных строк и ячеек ).

Наименование таблицы определяется при помощи контейнера <CAPTION>...</CAPTION>. Выравнивание наименования задается при помощи атрибута ALIGN, который может принимать значения TOP (сверху таблицы) и BOTTOM (снизу таблицы).

Данные в таблице организованы построчно, каждая новая строка таблицы задается тегом <TR>...</TR> (закрывающий тег контейнера </TR> можно не использовать). Для каждой строки таблицы при помощи специальных атрибутов тега <TR> можно управлять общим форматированием составляющих строку ячеек.

Строки таблицы разбиваются на ячейки при помощи тегов ячеек-заголовков <TH>...</TH> и тегов ячеек-данных <TD>...</TD> (допускается форма записи без закрывающих тегов). Как и для строк таблицы при помощи специальных атрибутов тегов <TD> и <TH> можно управлять форматированием конкретных ячеек таблицы.

 

Структура таблицы:

<TABLE> - начало контейнера таблицы

<CAPTION> название таблицы </CAPTION>

<TR> <TH> 1 заголовок </TH>…<TH> N заголовок </TH> </TR> - первая строка / шапка

<TR> <TD> ячейка 1/1 </TD>…<TD> ячейка N/1 </TD> </TR> - 1 строка

<TR> <TD> ячейка 1/i </TD>…<TD> ячейка N/i </TD> </TR> - i строка

<TR> <TD> ячейка 1/M </TD>…<TD> ячейка N/M </TD> </TR> - последняя строка

</TABLE> - конец контейнера таблицы

Таким образом, простейшая таблица, без линий сетки, в HTML-документе определяется следующим образом:

<TABLE>

<CAPTION ALIGN=TOP>Список друзей и подруг</CAPTION>

<TR><TH>ФИО</TH><TH>Телефон</TH></TR>

<TR><TD>Иванов Иван Иваныч</TD><TD>35-35-35</TD></TR>

<TR><TD>Валина Валентина Валентиновна</TD><TD>46-46-46</TD></TR>

</TABLE>

А вот, что у нас получится в окне броузера:

 

 

Список друзей и подруг
ФИО Телефон
Иванов Иван Иваныч 35-35-35
Валина Валентина Валентиновна 46-46-46

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

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

 

Атрибут Теги Описание
ALIGN <TABLE> Общее горизонтальное выравнивание таблицы на странице - LEFT/RIGHT/CENTER
<TR> Общее выравнивание элементов строки - LEFT/RIGHT/CENTER/CHAR
<TH> Выравнивание заголовка - LEFT/RIGHT/CENTER/CHAR (по умолчанию CENTER)
<TD> Выравнивание данных в ячейке - LEFT/RIGHT/CENTER/CHAR (по умолчанию LEFT )
CHAR ALIGN=CHAR Задает символ-выравниватель, при использование атрибута выравнивания ALIGN=CHAR. Например: <TR ALIGN=CHAR CHAR=","><TD>1,35</TD></TR>
CHAROFF ALIGN= CHAR Задает отступ (в % ширины ячейки или в пикселях) относительно начала ячейки, символов заданных атрибутом CHAR. Например: <TR ALIGN=CHAR CHAR="," CHAROFF="10%"> <TD>1,35</TD><TD>-1,45</TD></TR>
VALIGN <TABLE> Общее вертикальное выравнивание элементов таблицы - BOTTOM/MIDDLE/TOP (по умолчанию MIDDLE ).
<TR> Общее выравнивание элементов строки - BOTTOM/MIDDLE/TOP/BASELINE
<TH> Выравнивание заголовка - BOTTOM/MIDDLE/TOP
<TD> Выравнивание данных в ячейке - BOTTOM/MIDDLE/TOP
CELLPADDING <TABLE> Свободное пространство между содержимым ячеек и их границами
CELLSPACING <TABLE> Свободное пространство между границами смежных ячеек
WIDTH <TABLE> Ширина таблицы в пикселях или процентах ширины окна броузера.
<TH>,<TD> Ширина ячейки таблицы в пикселях или процентах от ширины таблицы.
HEIGHT <TABLE> Высота таблицы в пикселях или процентах ширины окна броузера
<TH>,<TD> Высота ячейки таблицы в пикселях или процентах от ширины таблицы.

 

Управление линиями сетки таблиц

Для управления линиями сетки таблиц используется атрибут BORDER контейнера <TABLE>, который задает толщину рамки таблицы в пикселях (по умолчанию рамки нет, BORDER=0). В стандарте HTML 4, появились новые атрибуты таблиц, строк и ячеек: FRAME для более гибкого управления линиями сетки таблиц и RULES для создания дополнительных линий разделителей групп в таблицах.

Данные атрибуты поддерживаются современными броузерами и могут принимать следующие значения:

Атрибут FRAME:

· VOID - без рамки;

· BOX - с рамкой;

· ABOVE - верхняя сторона рамки;

· BELOW - нижняя сторона рамки;

· LHS - левая сторона рамки;

· RHS - правая сторона рамки;

· VSIDES - вертикальные линии;

· HSIDES - горизонтальные линии;

Атрибут RULES:

· NONE - без разделителя групп;

· GROUPS - вертикальные и горизонтальные линии разделители групп;

Например:

<TABLE >...</TABLE> равнозначно <TABLE FRAME=VOID>...</TABLE>

<TABLE BORDER>...</TABLE> равнозначно <TABLE FRAME=BOX>...</TABLE>

 

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

Атрибуты управления цветом элементов таблиц появились в HTML как расширения стандарта, предлагаемые основными поставщиками Web-броузеров (Microsoft и Netscape).

Расширения управления цветом: BORDERCOLOR - цвет рамки и BGCOLOR - цвет фона, используются как атрибуты для тегов: <TABLE>, <TR>, <TH>, <TD>. Соответственно областью их действия может быть вся таблица, строка или отдельно взятая ячейка.

Например:

<TABLE BORDER BORDERCOLOR=RED BGCOLOR=YELLOW>...</TABLE> - таблица.

<TR BORDERCOLOR=RED BGCOLOR=YELLOW></TR> - строка.

<TD BORDERCOLOR=RED BGCOLOR=YELLOW></TD> - ячейка.

 








Дата добавления: 2015-04-19; просмотров: 842;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.008 сек.