04.04.2013

Создание сложных таблиц

 

Простые таблицы — довольно большая редкость. Гораздо чаще встречаются сложные таблицы, в которых ячейки располагаются одновременно в нескольких соседних столбцах или строках.

Для объединения ячеек используют следующие атрибуты тега <TD>:

• colspan – сообщает программе просмотра, что нужно раздвинуть клетку таблицы на несколько столбцов.

Например, если нужно объединить ячейки двух столбцов, напишем <TD colspan = "2"> .

• rowspan – сообщает программе просмотра, что нужно раздвинуть клетку таблицы на несколько строк.

Например, <TD rowspan = "2">  растягивает клетку таблицы на две строки.

 

К примеру нам надо создать вот такую таблицу:

Сложная таблица

Большая ячейка A Маленькая ячейка 1 Маленькая ячейка 2
Большая ячейка B

 

Если присмотреться, у нас таблица состоит из двух строк и трех столбцов.

Но, в первом столбце обе ячейки объединены в одну - это ячейка под названием  "Большая ячейка А"

А также в нижней строке объединены в одну еще две ячейки.


Вот фрагмент кода создания таблицы с различной шириной строк и столбцов. Атрибут border тега <TABLE> устанавливает ширину бордюра (рамки таблицы) и может принимать любое значение от 0 до 10. Ширина бордюра = 0 обозначает его отсутствие.

 

<TABLE border="4">
 <TBODY>
  <TR>
   <TD rowspan="2">Большая ячейка А</TD>
   <TD>Маленькая ячейка 1</TD>
   <TD>Маленькая ячейка 2</TD>
  </TR>
  <TR>
   <TD colspan="2"></TD>
  </TR>
 </TBODY>
</TABLE>

 

В первой строке мы описали три ячейки, причем первая ячейка как бы захватывает и вторую строку. Поэтому во второй строке мы должны были описать две ячейки (то есть два тега <TD>), но поскольку мы эти две ячейки объединили, во второй строке остался всего один тег <TD>.


Разберем пример чуть-чуть посложнее. 

Попытаемся создать таблицу следующего вида:


Таблица цветов



blue

green

red

pink

yellow

 

Вот фрагмент кода для данной таблицы:

<table width="80%">
<tbody>
<tr>
<td colspan="5" bgcolor="#8bfef7"> </td> 
</tr>      
<tr>        
<td colspan="5">
<h3 style="text-align: center;">Таблица цветов</h3></td> 
</tr>      
<tr>          
<td colspan="5" bgcolor="#8bfef7"><br /></td> 
</tr>
<tr>
<td width="30%"></td>
<td width="10%"><img src="" alt="" title="" align="ight" /> </td>
<td width="20%">blue</td>
<td width="20%" bgcolor="#0000ff"> </td>
<td width="30%"></td>
</tr>      
<tr>
<td></td>
<td><img src="" alt="" title="" align="ight" /></td>
<td>green</td>
<td bgcolor="#00ff00"> </td>
<td></td>
</tr>      
 /*** Остальные строки пишем аналогично   ***/
</tbody>
</table>