Объединение элементов таблиц.

Для создания сложных таблиц не обойтись без объединения строк и столбцов. Для объединения ячеек соседних строк и столбцов таблицы, в 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>&copy 2001 Вебмастер

<A HREF="mailto:myname@mail.ru">Попробуй связаться со мной</A>

</BODY>

</HTML>

 

 

В заключении следует отметить, что таблицы очень удобный инструмент для компоновки и форматирования элементов Web-страниц. Использование таблиц без линий сетки позволяет жестко связать текстовые блоки документа с графикой и другими объектами.

Например, кнопки управления, которыми вы пользуетесь для навигации по моим страницам - это то же таблица (проверьте посмотрев источник HTML). Используя таблицы, можно создавать альтернативы картам ссылок, рассмотренным в предыдущей главе.

 








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


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

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

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

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