Учебник по программированию на HTML

HTML в примерах

Объединение строк или столбцов таблицы HTML

Иногда требуется создать табличный элемент, объединяющий две или более ячейки, как в горизонтальном, так и в вертикальном направлении. В качестве примера рассмотрим склонение латинских местоимений:

    neut. masc.  fem. 
nom. id    is    ea 
acc. id    eum   eam 
gen. eius  eius  eius 
dat. ei    ei    ei 
abl. eo    eo    ea 

Очевидно, этот пример лучше реализовать с помощью таблицы HTML, и, используя вышеописанные конструкции, можно записать информацию с простым табличным представлением данных. Однако, если Вы хотите сделать это точнее, без представления одинакового содержимого в разных ячейках, Вы можете использовать атрибуты "ROWSPAN" и "COLSPAN", как это показано ниже:

<TABLE BORDER=1 ALIGN=CENTER CELLPADDING=3> 
<CAPTION>Declination of <I>is</I> in singular</CAPTION> 
<TR><TH></TH><TH>neuter</TH><TH>masc.</TH><TH>fem.</TH></TR> 
<TR><TH>nom.</TH><TD ROWSPAN=2 VALIGN=MIDDLE><I>id</I></TD> 
<TD><I>is</I></TD><TD><I>ea</I></TD></TR> 
<TR><TH>acc.</TH><TD><I>eum</I></TD><TD><I>eam</I></TD></TR> 
<TR><TH>gen.</TH><TD COLSPAN=3 ALIGN=CENTER><I>eius</I></TD></TR> 
<TR><TH>dat.</TH><TD COLSPAN=3 ALIGN=CENTER><I>ei</I></TD></TR> 
<TR><TH>abl.</TH><TD COLSPAN=2 ALIGN=CENTER><I>eo</I></TD> 
<TD><I>ea</I></TD></TR> 
</TABLE> 

Рис. Пример на web-странице.

В данном примере первая ячейка специфицируется с ROWSPAN=2, что в действительности означает, что две смежные ячейки в одном и том же столбце объединяются в одну ячейку. Заметим, что когда Вы пишете код HTML для следующей строки (второй элемент TR), вы просто пропускаете элемент ячейки, соответствующий месту, которое уже взято для использования.