Студопедия — Объединение элементов таблиц
Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

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






Для создания сложных таблиц не обойтись без объединения строк и столбцов. Для объединения ячеек соседних строк и столбцов таблицы, в 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:[email protected]">Попробуй свзаться со мной</A>
</BODY>
</HTML>

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

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







Дата добавления: 2015-03-11; просмотров: 270. Нарушение авторских прав; Мы поможем в написании вашей работы!



Композиция из абстрактных геометрических фигур Данная композиция состоит из линий, штриховки, абстрактных геометрических форм...

Важнейшие способы обработки и анализа рядов динамики Не во всех случаях эмпирические данные рядов динамики позволяют определить тенденцию изменения явления во времени...

ТЕОРЕТИЧЕСКАЯ МЕХАНИКА Статика является частью теоретической механики, изучающей условия, при ко­торых тело находится под действием заданной системы сил...

Теория усилителей. Схема Основная масса современных аналоговых и аналого-цифровых электронных устройств выполняется на специализированных микросхемах...

Мотивационная сфера личности, ее структура. Потребности и мотивы. Потребности и мотивы, их роль в организации деятельности...

Классификация ИС по признаку структурированности задач Так как основное назначение ИС – автоматизировать информационные процессы для решения определенных задач, то одна из основных классификаций – это классификация ИС по степени структурированности задач...

Внешняя политика России 1894- 1917 гг. Внешнюю политику Николая II и первый период его царствования определяли, по меньшей мере три важных фактора...

Тактика действий нарядов полиции по предупреждению и пресечению правонарушений при проведении массовых мероприятий К особенностям проведения массовых мероприятий и факторам, влияющим на охрану общественного порядка и обеспечение общественной безопасности, можно отнести значительное количество субъектов, принимающих участие в их подготовке и проведении...

Тактические действия нарядов полиции по предупреждению и пресечению групповых нарушений общественного порядка и массовых беспорядков В целях предупреждения разрастания групповых нарушений общественного порядка (далееГНОП) в массовые беспорядки подразделения (наряды) полиции осуществляют следующие мероприятия...

Механизм действия гормонов а) Цитозольный механизм действия гормонов. По цитозольному механизму действуют гормоны 1 группы...

Studopedia.info - Студопедия - 2014-2024 год . (0.01 сек.) русская версия | украинская версия