Таблицы в HTML
Вложенные таблицы
Теги, используемые для представления таблиц
Для представления таблиц используются нескольких видов тегов HTML:
- теги TABLE, которые обрамляют всю табличную спецификацию необязательный элемент CAPTION, специфицирующий заголовок (имя) таблицы теги TR, специфицирующие строки таблицы теги TH, специфицирующие заголовки строк и столбцов теги TD, специфицирующие данные в таблице, т. е. содержимое табличных ячеек
Вложенные таблицы
Упражнение1
<HTML>
<HEAD>
<TITLE>Пример вложенной таблицы</TITLE>
</HEAD>
<BODY>
<TABLE BORDER WIDTH="50%">
<TR><TD>111111</TD><TD>222222</TD>
</TR>
<TR><TD>
<TABLE BORDER WIDTH=100%>
<TR><TD>33333_1</TD><TD>33333_2</TD>
</TR>
</TABLE>
</TD>
<TD>4444444</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Объединение ячеек
Упражнение2
Для того чтобы объединить несколько ячеек в строке существует атрибут colspan="n" где n в кавычках указывается количество ячеек которое необходимо объединить.
Чтобы объединить ячейки по вертикали т. е. в столбце необходимо использовать атрибут rowspan="n" где n в кавычках указывается количество ячеек, которое необходимо объединить.
Для того чтобы увидеть как это работает создайте новую таблицу содержащую три строки по три ячейки в каждой. Код этой таблицы будет следующий:
<TABLE BORDER="1" CELLSPACING="0" СELLPADDING="0">
<TR>
<TD>1 - ЯЧЕЙКА </TD>
<TD >2 - ЯЧЕЙКА</TD>
<TD>3 - ЯЧЕЙКА</TD>
</TR>
<TR>
<TD>4 - ЯЧЕЙКА</TD>
<TD>5 - ЯЧЕЙКА</TD>
<TD>6 - ЯЧЕЙКА</TD>
</TR>
<TR>
<TD>7 - ЯЧЕЙКА</TD>
<TD>8 - ЯЧЕЙКА</TD>
<TD>9 - ЯЧЕЙКА</TD>
</TR>
</TABLE>
Изменить код:
<TABLE BORDER="1" CELLSPACING="0" СELLPADDING="0">
<TR>
<TD COLSPAN="2">1 И 2 – ЯЧЕЙКИ ОБЪЕДИНЕННЫЕ </TD>
<TD ROWSPAN="3">3-6-9 – ЯЧЕЙКИ ОБЪЕДИНЕННЫЕ</TD>
</TR>
<TR>
<TD>4 - ЯЧЕЙКА</TD>
<TD>5 - ЯЧЕЙКА</TD>
</TR>
<TR>
<TD>7 - ЯЧЕЙКА</TD>
<TD>8 - ЯЧЕЙКА</TD>
</TR>
</TABLE>
