Объединение элементов таблиц.
Для создания сложных таблиц не обойтись без объединения строк и столбцов. Для объединения ячеек соседних строк и столбцов таблицы, в 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:myname@mail.ru">Попробуй связаться со мной</A>
</BODY>
</HTML>
В заключении следует отметить, что таблицы очень удобный инструмент для компоновки и форматирования элементов Web-страниц. Использование таблиц без линий сетки позволяет жестко связать текстовые блоки документа с графикой и другими объектами.
Например, кнопки управления, которыми вы пользуетесь для навигации по моим страницам - это то же таблица (проверьте посмотрев источник HTML). Используя таблицы, можно создавать альтернативы картам ссылок, рассмотренным в предыдущей главе.
Дата добавления: 2015-04-19; просмотров: 782;