Для создания сложных таблиц не обойтись без объединения строк и столбцов. Для объединения ячеек соседних строк и столбцов таблицы, в HTML используются атрибуты ROWSPAN и COLSPAN тегов <TH>; и <TD>;. Данные атрибуты задают количество объединемых ячеек в строке (ROWSPAN=N) или столбце (COLSPAN=N). Рассмотрим использование данных атрибутов на примере таблицы.
HTML код таблицы:
<TABLE BORDER ALIGN=CENTER>
<TR ALIGN=CENTER>
<TH COLSPAN=3>ДРУЗЬЯ И ПОДРУГИ</TH>
</TR>
<TR ALIGN=CENTER>
<TD ROWSPAN=2>ДРУЗЬЯ</TD><TD>Коля</TD><TD>44-44-44</TD>
</TR>
<TR ALIGN=CENTER>
<TD>Вася</TD><TD>33-33-33</TD>
</TR>
<TR ALIGN=CENTER>
<TD ROWSPAN=2>ПОДРУГИ</TD><TD>Маша</TD><TD>11-11-11</TD>
</TR>
<TR ALIGN=CENTER>
<TD>Глаша</TD><TD>22-22-22</TD>
</TR>
</TABLE>
Внешний вид таблицы:
| ДРУЗЬЯ И ПОДРУГИ
|
| ДРУЗЬЯ
| Коля
| 44-44-44
|
| Вася
| 33-33-33
|
| ПОДРУГИ
| Маша
| 11-11-11
|
| Глаша
| 22-22-22
|
В стандарте HTML 4 повились новые теги для группировки (не объединения, а именно группировки) строк и столбцов таблицы в группы с общими свойствами. Это теги <COLGROUP>; и <COL>; - группировка и описание свойств столбцов, <THEAD > - определение шапки таблицы, <TBODY>; - определение группы тело-таблицы, <TFOOT>; - определение нижней строки. Полезным атрибутом тегов <COLGROUP>; и <COL>; является атрибут SPAN=N, который распространяет свойства, заданные данными тегами на N-столбцов в группе.
Использование данных тегов существенно облегчает компоновку и форматирование таблиц. Схема их применения следующая (в данном примере применяется одиночная форма записи тегов <THEAD>;, <TBODY>; и <TFOOD>;, но в случае использования одного из них, необходимо применять контейнерную форму):
<TABLE атрибуты таблицы>
<COLGROUP общие атрибуты 1-ой группы>
<COL SPAN=10 доп. атрибуты первых 10 столбцов таблицы>
<COL доп. атрибуты 11 столбца таблицы>
...
<COLGROUP общие атрибуты последней группы>
<COL доп. атрибуты j столбца таблицы>...<COL доп. атрибуты N столбца таблицы>
<THEAD>
<TH><TH>1 заголовок</TH>...<TH>N заголовок</TH><TR>
<TBODY>
<TR><TD>1 столбец</TD>...<TD>N столбец</TD><TR>
...
<TR><TD>1 столбец</TD>...<TD>N столбец</TD><TR>
<TFOOT>
<TR><TD>1 итоговый столбец</TD>...<TD>N итоговый столбец</TD><TR>
</TABLE>;
Для демонстрации возможностей новых тегов рассмотрим два варианта, какой из них проще - вам решать, но результат получится один и тот же.
| Старый подход
| Новый подход
|
| <table border align=center> <tr> <th width=80>тип <th width=120>название <th width=50>1998 <th width=50>1999 <th width=50>2000 </tr> <tr align=center> <td width=80>тип1 <td width=120>название1 <td width=50 align=right>1,2 <td width=50 align=right>1,3 <td width=50 align=right>1,4 </tr> <tr align=center> <td width=80>тип2 <td width=120>название2 <td width=50 align=right>2,2 <td width=50 align=right>2,3 <td width=50 align=right>2,4 </tr> </table>
| <table border align=center> <col width=80 align=center> <col width=120 align=center> <col width=50 align=right span=3> <tr> <th>тип<th>название <th align=center>1998<th align=center>1999<th align=center>2000 </tr> <tr> <td>тип1<td>название1 <td>1,2<td>1,3<td>1,4 </tr> <tr> <td>тип2<td>название2 <td>2,2<td>2,3<td>2,4 </tr> </table>
|
А вот результат обоих наших деяний:
| тип
| название
|
|
|
|
| тип1
| название1
| 1,2
| 1,3
| 1,4
|
| тип2
| название2
| 2,2
| 2,3
| 2,4
|
Ну и по доброй традиции, для закрепления материала, рассмотрим пример HTML документа, использующего таблицы (обратите внимание, что размер ячеек, содержащих изображение, задан соответствующим размеру изображения).
Пример 5. Форматирование таблиц. [просмотр примера в окне]
<HTML>
<HEAD>
<TITLE>Использование таблиц в документах</TITLE>
</HEAD>
<BODY BGCOLOR="WHITE", TEXT="BLACK", LINK="BLUE", ALINK="RED", VLINK="NAVY">
<H1 align=center>Список моих друзей и подруг</H1>
</P>
<TABLE BORDER ALIGN=CENTER VALIGN=MIDDLE WIDTH="50%">
<TR BGCOLOR=#FAD503>
<TH>Категория</TH><TH>ФИО</TH><TH>Фото</TH><TH>Телефон</TH>
</TR>
<TR ALIGN=CENTER>
<TD ROWSPAN=2 BGCOLOR=#05C9FA>ДРУЗЬЯ</TD><TD>Коликов Коля</TD>
<TD WIDTH=50 HEIGHT=50><IMG SRC="boy1.gif"></TD><TD>44-44-44</TD>
</TR>
<TR ALIGN=CENTER>
<TD>Васюков Вася</TD>
<TD WIDTH=50 HEIGHT=50><IMG SRC="boy2.gif"></TD><TD>33-33-33</TD>
</TR>
<TR ALIGN=CENTER>
<TD ROWSPAN=2 BGCOLOR=#F9ACDE>ПОДРУГИ</TD><TD>Машина Маша</TD>
<TD WIDTH=50 HEIGHT=50><IMG SRC="girl1.gif"></TD><TD>11-11-11</TD>
</TR>
<TR ALIGN=CENTER>
<TD>Глашева Глаша</TD>
<TD WIDTH=50 HEIGHT=50><IMG SRC="girl2.gif"></TD><TD>22-22-22</TD>
</TR>
</TABLE>
</P>
<HR>
<P ALIGN=CENTER>© 2001 Вебмастер
<A HREF="mailto:[email protected]">Попробуй свзаться со мной</A>
</BODY>
</HTML>
В заключении следует отметить, что таблицы очень удобный инструмент для компоновки и форматирования элементов Web-страниц. Использование таблиц без линий сетки позволяет жестко связать текстовые блоки документа с графикой и другими объектами.
Например, кнопки управления, которыми вы пользуетесь для навигации по моим страницам - это то же таблица (проверьте посмотрев источник HTML). Используя таблицы, можно создавать альтернативы картам ссылок,
