2.5 Таблицы
HTML-таблицы используются не только традиционным способом (т.е. для представления данных в виде двухмерной таблицы), они также применяются для управления расположением и группировки элементов. В состав таблиц могут входить изображения, фрагменты текста, включая списки, и даже другие таблицы. Автор Web-страницы имеет возможность запретить отображение обрамления вокруг таблицы и разграничительных линий между ячейками, в результате содержимое таблицы выглядит как выровненные фрагменты данных.
Таблица представляет собой достаточно сложную структуру, формируемую множеством элементов. Базовых элементов, из которых может быть составлена минимальная таблица – три. Это <TABLE> - ограничивающий всю таблицу (может содержать необязательный элемент CAPTION, задающий название таблицы), <TR> - выделяющий строку (вкладывается в <TABLE>), <TD> - выделяющий отдельные ячейки в строке (вкладывается в <TR>). Данные (текст, другие таблицы, изображения, гиперссылки, формы и др.) располагаются в контейнерах <TD>…</TD>. В состав каждой строки таблицы могут входить элементы <TH>, содержащие заголовок таблицы. В составе элемента <TH> информация по умолчанию отображается полужирным шрифтом и выравнивается по центру. Данные в элементе <TD> выводятся обычным шрифтом и выравниваются по левому краю. Пример простой таблицы представлен в примере 2.6. На рис. 2.6 показан внешний вид этой таблицы на экране браузера. Закрывающие теги </TR>, < /ТН> и </TD> необязательны, однако помогают проследить структуру таблицы.
|
Пример 2.6. Простая таблица |
|
<TАВLE BORDER=1> <CАРTION>Название таблицы</CAPTION> <ТR><TН>Заголовок1</TH> <TH>Заголовок2</ТН></TR> <TR><TD>Строка1 Столбец1</TD><TD>Строка1 Столбец2</TD></TR> <TR><ТD>Строка2 Столбец1</TD><TD>Строка2 Столбец2</TD></TR> <TR><TD>Строка3 Столбец1</ТD><TD>Строка3 Столбец2</ТD></TR> </TABLE>
|
Если в открывающем теге <TABLE> не указаны атрибуты, по умолчанию создается таблица без обрамления, выровненная по левому краю. Дополнительные возможности по управлению внешним видом таблицы предоставляют специальные атрибуты.
Простой пример использования атрибута FRAME приведен в примере 2.7. На рис. 2.7 показано, как этот пример выглядит на экране браузера.
|
Пример 2.7. Таблица с отключенным внешним обрамлением |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TIТLE>2000 World Championship</TITLE> </HEAD> <BODY> <Н2 АLIGN="CENTER">2000 World Championship</Н2> Final result in the 2000 world tic-tac-toe championship. Deep Green is "X", Garry Kasparov is "0". <TABLE ALIGN="СЕNTER" BОRDER=1 FRAME="VOID"> <TR><TH>X<ТН>0<TH>X <TR><TH>X<TH>0<TH>X <ТR><ТН>0<TH>X<ТH>0 </TАВLE> </BОDY> </HTML>
|
В примере 2.8 приведена таблица, для которой в заголовках столбцов текст отображается белым цветом на черном фоне, а в остальных ячейках выводится черный текст на светло-сером фоне. Внешний вид таблицы показан на рис. 2.8.
|
Пример 2.8. Задание цвета фона и текста таблицы |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TIТLE>WWW Standards</TITLE> </HEAD> <ВОDY BGCOLOR="WHITE"> <Н1 ALIGN="CENTER">WWW Standards</Hl> <TАВLE BОRDER=1 BGСОLOR="#EEEEEE"> <TR BGCOLOR="BLACK"> <ТН><FОNT СОLOR="WHITE">Standard</FONT> <TH><FONT COLOR="WHITE">Obsolete Version</FONТ> <TH><FONT COLOR="WНIТE">Most Widely Supported Version</FONT> <TH><FONT COLOR="WНITE">Upcoming Version</FОNT> <ТR> <ТD>НТML <TD>3.2 <TD>4.0 <ТD>XHTML <TR> <TD>HTTP <ТD>1.0 <TD>1.1 <TD>1.2 </TАВLE> </BODY> </HTML>
|
При необходимости ячейки могут расширяться на несколько столбцов либо строк. Примеры кода приведены в примерах 2.9 и 2.10, а внешний вид таблицы показан на рисунке 2.9.
|
Пример 2.9. Ячейка заголовка, расширяющаяся на два столбца |
|
<TАВLE ВОRDER=1> <TR> <TH COLSPAN=2>Заголовок столбцов 1 и 2 <TН>Заголовок столбца 3 <TR> <TD>Столбец 1 <ТD>Столбец 2 <TD>Столбец 3 </TАВLE>
|
|
Пример 2.10. Ячейка данных, расширяющаяся на две строки |
|
<ТАВLE BОRDER=1> <ТR> <TН>Заголовок 1<TH>Заголовок 2 <TR><ТD ROWSPAN=2>Данные строк 1 и 2 <TD>Строка 1 Столбец 2 <ТR><TD>Строка 2 Столбец 2 </TАВLE>
|
