|
||
|
aranea.ru || Занятия и примеры по HTML | Элементы TR, TH, TD
Элементы TR, TH, TDПример 42Пример 43 Пример 44 Пример 45 Элемент TR включает в себя все ячейки ряда. Об атрибутах элемента TR читайте в главе 11.2.5 Ряды таблицы: элемент TR. Для внесения каких-либо форматирующих особенностей в ячейки ряда, лучше использовать атрибуты элементов ячеек (TH и TD). Атрибуты элементов TH и TD описываются в главе 11.2.6 Ячейки таблицы: элементы TH и TD. Из всех указанных в этой главе атрибутов, рассмотрим следующие:
Пример 42
<HTML>
<HEAD>
<TITLE>
Пример 42
</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="70%" align="center">
<TR>
<TH height="30">1-1</TH>
<TH>1-2</TH>
<TH width="40">1-3</TH>
</TR>
<TR>
<TD>2-1</TD>
<TD>2-2</TD>
<TD>2-3</TD>
</TR>
<TR>
<TD>3-1</TD>
<TD>3-2</TD>
<TD>3-3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
* Обратите внимание. Если высота задается для какой-то одной ячейки, то все ячейки в ряду наследуют эту высоту. Если ширина задается для какой-то одной ячейки, то все ячейки в колонке наследуют эту высоту. ** Если высота объекта (например, изображение), вставленного в ячейку, превышает установленную высоту, то ячейка увеличивается в соответствии с размером объекта, преодолевая настройки (смотрите пример 43 ниже). *** Если ширина объекта или очень длинного слова больше установленного значения, то ячейка расширяется в соответствии с объектом или словом (смотрите пример 43 ниже). Пример 43
<HTML>
<HEAD>
<TITLE>
Пример 43
</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="70%" align="center">
<TR>
<TH height="30">1-1<img src="logo_100.jpg"></TH>
<TH>1-2 </TH>
<TH width="40">1-3 очень_длинное_слово_в_этой_ячейке</TH>
</TR>
<TR>
<TD>2-1</TD>
<TD>2-2</TD>
<TD>2-3</TD>
</TR>
<TR>
<TD>3-1</TD>
<TD>3-2</TD>
<TD>3-3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
* В примере применяется элемент IMG, который рассмотрен в разделе Графические форматы и изображения. Атрибут colspan="n" определяет целое число n колонок, которые занимает ячейка. Пример 44
<HTML>
<HEAD>
<TITLE>
Пример 44
</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="100%">
<TR>
<TH width="33%">1-1</TH>
<TH width="33%">1-2</TH>
<TH width="33%">1-3</TH>
</TR>
<TR>
<TD>2-1</TD>
<TD bgcolor="yellow" colspan=2>2-2</TD>
</TR>
<TR>
<TD bgcolor="red" colspan="3">3-1</TD>
</TR>
<TR>
<TD bgcolor="green" colspan="2">4-1</TD>
<TD>4-2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Атрибут rowspan="n" устанавливает число n рядов, которые занимает ячейка. Пример 45
<HTML>
<HEAD>
<TITLE>
Пример 45
</TITLE>
</HEAD>
<BODY>
<TABLE border="1" width="100%">
<TR>
<TH rowspan="4" bgcolor="red">1-1</TH>
<TH bgcolor="blue">1-2 </TH>
<TH bgcolor="blue">1-3</TH>
</TR>
<TR>
<TD bgcolor="yellow">2-2</TD>
<TD bgcolor="yellow">2-3</TD>
</TR>
<TR>
<TD bgcolor="yellow">3-2</TD>
<TD rowspan="2" bgcolor="green">3-3</TD>
</TR>
<TR>
<TD bgcolor="yellow">4-2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Вначале кажется, что рассчитать таблицу очень сложно, но помните правило: количество ячеек во всех рядах должно быть одинаковым, с учетом атрибутов colspan и rowspan. Посмотрите раздел Ячейки, которые занимают несколько рядов или колонок. |
