6. Об'єднання комірок
Об’єднання комірок можна зробити, установивши атрибути COLSPAN= ( для об'єднання сусідніх стовпців) або ROWSPAN= ( для об'єднання сусідніх рядків):
<TABLE WIDTH="50%" BORDER="1" CELLPADDING="10" ALIGN="center" BGCOLOR="#DFFFDF">
<TR>
<TD WIDTH="33%">Це перша комірка</ТD>
<TD WIDTH="33%">Це друга комірка</ТD>
<TD ROWSPAN="3">A це три комірки третього стовпця об'єдналися в одну велику комірку</ТD>
</TR>
<TR>
<TD COLSPAN="2">Це єдина комірка другого рядка, що поєднує обидва стовпця</ТD>
</TR>
<TR>
<TD>Це перша комірка третього рядка</ТD>
<TD>A це друга комірка третього рядка</ТD>
</TR>
</TABLE>
У результаті ми бачимо таблицю з трьох рядків по три комірки. Третя комірка першого рядка за допомогою атрибута ROWSPAN="3" об'єднана з іншими двома комірками третього стовпця. Тому в третьому рядку таблиці всього дві комірки. А в другому рядку ми за допомогою атрибута COLSPAN="2" поєднуємо дві комірки, що залишились, в одну.
Для комірок заголовка таблиці замість тегу <TD> використовують тег <ТН>. У комірках <ТН> текст за замовчуванням вирівнюється по центру й відображається напівжирним.
Приклад:
<TABLE WIDTH="50%" BORDER="1" cellpadding="20" cellspacing="1"
ALIGN="center" BGCOLOR="#DFFFDF">
<TR>
<TH colspan='3' bgcolor='#CDDDCD'>
Це заголовок таблиці
</TH>
</TR>
<TR>
<TD WIDTH="33%">Це перша комірка</ТD>
<TD WIDTH="33%">Це друга комірка</ТD>
<TD ROWSPAN="3">A це три коміроки третього стовпця об'єдналися в одну більшу комірку</ТD>
</TR>
<TR>
<TD COLSPAN="2">Це єдина комірока другого рядка, що поєднує обидва стовпця</ТD>
</TR>
<TR>
<TD>Це перша комірка третього рядка</ТD>
<TD>A це друга комірка третього рядка</ТD>
</TR>
</TABLE>
7. Декор таблиць
Найпоширеніші браузери по різному трактують властивості таблиць. NN(Netscape Navigator) ігнорує порожні комірки на відміну від IE (Internet Explorer).
Приклад:
<TABLE border=1 width="100%">
<TR>
<TD>P-100/32/6,4/4SVGA/15"</TD>
<TD rowspan=2 width=70>$300</TD>
<TD rowspan=2 width=70>Зі складу</TD></TR>
<TR>
<TD> </TD>
</TR>
</TABLE>
На такому рівні оформлення таблиці виглядає гарно. Але спробуйте видалити бордер і позначити колір таблиці. Ви повинні контролювати свою роботу декількома браузерами. Ось приклад картинки, яка ілюструє роботу різних браузерів.
Декоративні властивості таблиці описуються параметрами:
<TABLE BORDER="#" BGCOLOR="#DEE2EB"
CELLPADDING="#" CELLSPACING="#"> ,
де
BORDER="#" |
– ця сама об'ємна рамочка навколо таблиці |
BGCOLOR="#DEE2EB" |
– загальний колір тіла таблиці |
CELLPADDING="#" |
– відстань у пікселях між комірками таблиці |
CELLSPACING="#" |
– відступ між текстом усередині комірки й границею самої комірки |
Крім цього існують можливість визначення кольору тіла комірки, вибір кольору бордера. NN усі декоративні властивості таблиці передає на властивості комірки. Тому в першому прикладі ми бачимо комірки (NN), і загальний рівний фон (IE).