Таблицы
Таблицы
Таблицы реализуются с помощью тега <TABLE>. Таблицы формируются по строкам (<TR> и </TR>), содержащим несколько ячеек (<TD> и </TD>), которые, в свою очередь, формируют столбцы. Пример простой таблицы размером 2х2 приведен ниже:
<TABLE width="200" height="100" border="1" bgcolor="pink" align="center">
<TR>
<TD>Ячейка 1<TD>Ячейка 2</TD>
</TR>
<TR>
<TD>Ячейка 3<TD>Ячейка 4</TD>
</TR>
</TABLE>
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Свойства width и height определяют ширину и высоту таблицы, соответственно. Можно указывать значения в пикселях (как в примере) или в процентах (например width=50%). Свойством border задается толщина линий таблицы в пикселях (по умолчанию значение нуль - линии не видны). Цвет фона ячеек определяется свойством bgcolor. Выравнивание таблицы (но не элементов внутри нее) осуществляется свойством align, имеющим три значения: left (левый край, по умолчанию), center (центр), right (правый край).
Элементы TH и TD
Элементы TH и TD служат для обозначения ячейки. Причем TH используется для ячеек-заголовков, а TD - для ячеек-данных. Если не указано иначе, то текст, расположенный в TH, будет выводиться жирным шрифтом с выравниванием по центру, а в TD - нормальным начертанием с выравниванием по левому краю.
Пример:
<TABLE border=1 border color="white" bgcolor="pink">
<TR><TH>строка 1, заголовок 1 <TH>строка 1, заголовок 2
<TR><TD>строка 2, данные 1<TD> строка 2, данные 2
...
</TABLE>
| строка 1, заголовок 1 | строка 1, заголовок 2
|
|---|
| строка 2, данные 1 | строка 2, данные 2
...
|
Заголовок
Элемент CAPTION служит для указания заголовка таблицы. Он должен следовать сразу после открывающего тега TABLE. Текст, находящийся внутри контейнера CAPTION отображается либо непосредственно над таблицей, либо сразу после нее.
Пример:
<CAPTION>Заголовок таблицы</CAPTION>
Группировка строк таблицы
Для группировки строк таблицы применяются элементы THEAD, TFOOT и TBODY. При этом одна таблица может содержать только по одному элементу THEAD и TFOOT, и произвольное количество TBODY. Каждый элемент группы строк должен содержать хотя бы по одному элементу TR.
Пример:
<TABLE border=1 border color="white" bgcolor="pink">
<TH>Язык программирования</TH>
<TH COLSPAN=2>Особенности</TH>
<TR>
<TD>C++</TD>
<TD ROWSPAN=2>Использует</TD>
<TD>Классы</TD>
<TR>
<TD>Visual BASIC</TD>
<TD>Обьекты</TD>
</TABLE>
| Язык программирования |
Особенности |
| C++ |
Использует |
Классы |
| Visual BASIC |
Обьекты |
Форматирование столбцов
Эти элементы позволяют легко манипулировать форматированием столбцов таблиц. С их помощью вы можете задавать, например, выравнивание сразу для всех ячеек столбца. При этом элемент COL задает форматирование конкретной колонки, а элемент COLGROUP - объединяет несколько колонок в одну группу.
Примеры:
<COL ALIGN="Left">
<COLGROUP SPAN=2 ALIGN="Right">
<Назад>