HTML. Усложненная таблица. Атрибуты colspan и rowspan.

     Атрибут colspan- определяет количество колонок, на которые будет растянута наша ячейка.
     Растянем нашу первую строку атрибутом colspan="2" (где "2"- это значение на которое колонка или строка будут растянуты).

Пример:

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border=1>
<caption>
Наша таблица
</caption>
<tr>
<td bgcolor="#FFCC33" colspan="2">Первая строка, первая колонка </td>
<td bgcolor="#336699">Первая строка, вторая колонка </td>
</tr>
<tr> 
<td bgcolor="#336699">Вторая строка, первая колонка </td>
<td bgcolor="#FFCC33">Вторая строка, вторая колонка</td> 
</tr>
</table>
</body>
</html>

 

Результат:

Наша таблица
Первая строка, первая колонка Первая строка, вторая колонка
Вторая строка, первая колонка Вторая строка, вторая колонка

 

     Как видите получилось не очень удачно, мы как бы раздвоили первую колонку в первой строке, тем самым вытеснив вторую колонку первой строки. Для более лучшего результата, просто уберем код-HTML второй колонки первой строки из нашего примера.

Пример:

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border=1>
<caption>
Наша таблица
</caption>
<tr>
<td bgcolor="#FFCC33" colspan="2">Первая строка, первая колонка </td>
</tr>
<tr> 
<td bgcolor="#336699">Вторая строка, первая колонка </td>
<td bgcolor="#FFCC33">Вторая строка, вторая колонка</td> 
</tr>
</table>
</body>
</html>

 

Результат:

Наша таблица
Первая строка, первая колонка
Вторая строка, первая колонка Вторая строка, вторая колонка

 

     Атрибут rowspan- определяет количество строк, на которые будет растянута наша ячейка.
     Растянем нашу первую колонку атрибутом rowspan="2" и сразу же уберем уже ненужный нам HTML-код второй строки первой колонки.

Пример:

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border=1>
<caption>
Наша таблица
</caption>
<tr>
<td bgcolor="#FFCC33" rowspan="2">Первая строка, первая колонка </td>
<td bgcolor="#336699">Первая строка, вторая колонка </td>
</tr>
<tr> 
<td bgcolor="#336699">Вторая строка, первая колонка </td>
</tr>
</table>
</body>
</html>

 

Результат:

Наша таблица
Первая строка, первая колонка Первая строка, вторая колонка
Вторая строка, первая колонка

 

 Смотрите также:
Загрузка...
     Усложненная таблица. Пространство между ячейками.