В этом разделе мы поэтапно расскажем, как делался сайт "Созвездие Близнецов"


НазадСодержаниеВперёд

Урок 14. Пространственно-логические задачки с таблицами: атрибуты colspan и rowspan



До этого я объясняла, как из простых таблиц составить страницу сайта. В этом уроке я расскажу о закономерностях создания сложных таблиц. То есть, таблиц, состоящих из разного количества строк и ячеек. Примеры, которые я буду использовать, можно посмотреть здесь Мы ещё несколько раз в течение урока обратимся к этой странице. А сейчас начнём по порядку.

Таблица 1
Начинать лучше с простого, а заодно вспомнить, как задаются ячейки и строки.
Несложная задача. Смотрим на таблицу 1, которую я обозначила голубым цветом (может быть, кто-то назовёт его синим - не важно). В ней всего две строки. Первая растянута на пять столбцов, вторая из этих самых столбцов состоит. Здесь вступает в действие очень ценный атрибут - "Colspan".
Атрибут colspan задаёт количество столбцов, на которые растягивается данная ячейка.
Мы задаём ему значение, равное пяти: Colspan="5". И наша первая ячейка растягивается на ширину пяти ячеек-столбцов следующей строки. Весь код таблички будет выглядеть так:

<table bgcolor=#a4bff7 width="100%" border="1">
<tr>
<td Colspan="5">
<p class="tabl"> Ячейка 1 строки 1, растягивается на пять столбцов при помощи атрибута "colspan", которому дано значение - colspan="5", по количеству ячеек во второй строке </p>
</td>
</tr>
<tr>
<td>
<p class="tabl"> Строка 2, ячейка 2 </p>
</td>
<td>
<p class="tabl"> Строка 2, ячейка 3 </p>
</td>
<td>
<p class="tabl"> Строка 2, ячейка 4 </p>
</td>
<td>
<p class="tabl"> Строка 2, ячейка 5 </p>
</td>
<td>
<p class="tabl"> Строка 2, ячейка 6 </p>
</td>
</tr>
</table>


Синим цветом я обозначила начало каждой строки, красным - конец строки. Теперь давайте разбираться с этой табличкой. Для начала посмотрим на рисунок ниже:



В этом рисунке я обозначила начало и конец каждой строки соответствующими тегами. Каждая строка начинается, на сколько вы должны уже знать, тегом <tr> и заканчивается закрывающим тегом </tr>
В данной таблице всё просто и наглядно. Первая строка начинается тегом <tr> , за которым следует тег, открывающий ячейку - <td> . Поскольку ячейка будет растянута на ширину пяти ячеек второй строки, то мы ставим атрибут colspan="5", после чего ячейка закрывается тегом </td> и вся строка так же закрывается тегом </tr>

Почему я так подробно об этом пишу? Для того, чтобы вы запомнили сразу и надёжно: каждая строка должна иметь начало и конец! Эти начало и конец строки обозначаются тегами <tr> и </tr> , а внутри строк уже будут располагаться все наши ячейки со всем содержимым, какое бы оно ни было - текст, картинки и пр.

Таблица 2
Теперь рассмотрим Таблицу 2, она обозначена светло-оранжевым (или грязно-оранжевым - кому как удобнее). Она похожа на таблицу 1, но я добавила ещё одну строку (3), которая содержит одну ячейку, так же растянутую на ширину пяти ячеек во второй строке. Код таблицы выглядит так:

<table bgcolor=#a4bff7 width="100%" border="1">
<tr>
<td Colspan="5">
<p class="tabl"> Ячейка 1 строки 1, растягивается на пять столбцов при помощи атрибута "colspan", которому дано значение - colspan="5", по количеству ячеек во второй строке </p>
</td>
</tr>
<tr>
<td>
<p class="tabl"> Строка 2, ячейка 2 </p>
</td>
<td>
<p class="tabl"> Строка 2, ячейка 3 </p>
</td>
<td>
<p class="tabl"> Строка 2, ячейка 4 </p>
</td>
<td>
<p class="tabl"> Строка 2, ячейка 5 </p>
</td>
<td>
<p class="tabl"> Строка 2, ячейка 6 </p>
</td>
</tr>
<tr>
<td Colspan="5">
<p class="tabl"> Ячейка 7 строки 3, растягивается на пять столбцов при помощи атрибута "colspan", которому дано значение - colspan="5", по количеству ячеек во второй строке </p>
</td>
</tr>
</table>


Чтобы понять, на сколько важно соблюдать именно такой порядок написания html-кода таблиц, рассмотрим более сложный вариант, который уже потребует некоторого пространственного воображения и логики. Перейдём к следующей таблице.

Таблица 3.
Смотрим таблицу 3 (она залита серым цветом) состоит из одной большой ячейки (слева), растянутой на высоту трёх ячеек, которые расположены одна над другой (справа). То есть, вся наша таблица состоит из трёх строк и первая ячейка растянута на высоту этих трёх строк. Посмотрите на рисунок ниже (только сперва обязательно посмотрите на данную таблицу в головом виде, по ссылке: Смотрим таблицу 3 и только потом смотрим на рисунок):



На рисунке я обозначила начало и конец каждой из трёх строк, из которых состоит данная таблица. Для того, чтобы первая ячейка таблицы растянулась на три строки, мы воспользуемся атрибутом "rowspan" и зададим ему значение равное трём: rowspan="3"
Атрибут rowspan, как вы уже догадались, задаёт количество строк, на которые растягивается ячейка.

Код таблички 3 будет выглядеть следующим образом:

<table bgcolor=#e5e5e7 width="100%" border="1">
<tr>
<td rowspan="3" WIDTH=200px>
<p class="tabl"> Строка 1, ячейка1. Ширина ячейки - 200px, ячейка растягивается на три строки при помощи атрибута "rowspan", которому дано значение - rowspan="3" </p>
</td>
<td> <p class="tabl"> Строка 1, ячейка 2 </p>
</td>
</tr>
<tr>
<td>
<p class="tabl"> Строка 2, ячейка 3 </p>
</td>
</tr>
<tr>
<td>
<p class="tabl"> Строка 3, ячейка 4 </p>
</td>
</tr>
</table>


Примечание: <p class="tabl"> Текст </p> - я задала форматирование для текста, чтобы он был лучше виден. У вас на этом месте в табличке, если вы будете её использовать, будет стоять что-то своё (картинки, текст и пр.).

Обратите внимание! В этой табличке хорошо просматривается важная закономерность, без которой вы не сможете сами написать подобную табличку! Для того, чтобы понять эту закономерность, посмотрите ещё раз на рисунок:



Красной чертой я продолжила строки, заданные слева, как бы они проходили, если бы мы их прописали в нашей таблице. Они как бы упускаются и в ячейке мы их не видим, но при построении таблицы мы должны их учитывать. Это важно, потому что, как я уже говорила в одном из уроков, браузер читает наш html-код таблицы, начиная с левого верхнего угла этой таблицы, слева направо. От открывающего строку в таблице тега <tr> браузер считывает все наши теги, сколько их есть в строке и преобразовывает в графическое изображение. Всё, что он считывает, становится в одну строку. И только после того, как браузер дочитал до знака конца строки - закрывающего тега </tr>, он "понимает", что строка закончилась - и нужно графически переходить на строку ниже, которая так же начнётся слева и будет идти направо. И снова браузер читает всё слева направо, от открывающего строку тега <tr> до следующего закрывающего строку тега </tr> , преобразовывая наши теги в графическое изображение следующей строки.

Та часть человечества, которая пишет от руки на бумаге слева направо, действует по такому же принципу, что и браузер. А теперь представьте себе разлинованный лист бумаги: мы можем дописывать текст до конца строки, а можем не дописать строку или даже пропустить строку, две, три - оставив их пустыми. Но это не значит, что их нет! Точно так же каждая строка таблицы учитывается браузером при прочтении html-кода этой таблицы.

В данном примере с таблицей 3 мы открыли первую (верхнюю) строку таблицы, при этом первая ячейка таблицы у нас растянута на все три строки таблицы. На это браузеру указывает атрибут rowspan="3". Закрывается строка там, где ей и положено. Вот этот фрагмент кода. Как из него видно, строка 1 закрывается после ячейки 2,

<table bgcolor=#e5e5e7 width="100%" border="1">
<tr>
<td rowspan="3" WIDTH=200px>
<p class="tabl"> Строка 1, ячейка1. Ширина ячейки - 200px, ячейка растягивается на три строки при помощи атрибута "rowspan", которому дано значение - rowspan="3" </p>
</td>
<td> <p class="tabl"> Строка 1, ячейка 2 </p>
</td>
</tr>


а не после всех ячеек, перед закрытием таблицы. Посмотрите на рисунок:



Я залила розовым цветом тот фрагмент, который мы прописали выше. Для чего? Для того, чтобы вы нагляднее себе представили этот существенный момент: в html-коде строка должна быть прописана вся, слева направо, от и до.
Последующие строки 2 и 3, которые содержат ячейки 3 и 4, вы прописываете точно так же, начиная строку с тега <tr> . Но! В строках 2 и 3 ячейка 1 уже задана и браузер это знает благодаря атрибуту rowspan="3" - и вы её не пишете. А пишете только ячейки 3 и 4:

<tr>
<td>
<p class="tabl"> Строка 2, ячейка 3 </p>
</td>
</tr>
<tr>
<td>
<p class="tabl"> Строка 3, ячейка 4 </p>
</td>
</tr>


Закрываете таблицу тегом </table> - и получаете исходный код.

Если мы забудем открыть или закрыть строку вовремя, или учесть те строки, которые остаются невидимыми, браузер "споткнётся" - и графический эффект может быть непредсказуемым. Например вот таким: Ячейка 4 "убежала" вниз Это произошло потому, что я поставила закрывающий тег </tr> не после ячейки 2, а до неё, то есть не довела строку до конца. Вариации "косых" таблиц, как вы понимаете, могут быть самые разнообразные.

Приведённая мной закономерность соблюдается в таблицах любой конфигурации. Так что я буду и дальше к ней возвращаться.

Таблица 4.
Смотрим таблицу 4 Она жёлтого цвета. Эта таблица похожа на предыдущую, но я задала ей ещё одну ячейку (справа), которая так же растягивается на высоту трёх строк. Код таблицы выглядит так:

<table bgcolor=#e5e5e7 width="100%" border="1">
<tr>
<td rowspan="3" WIDTH=200px>
<p class="tabl"> Строка 1, ячейка1. Ширина ячейки - 200px, ячейка растягивается на три строки при помощи атрибута "rowspan", которому дано значение - rowspan="3" </p>
</td>
<td> <p class="tabl"> Строка 1, ячейка 2 </p>
</td>
<td rowspan="3" WIDTH=200px>
<p class="tabl"> Строка 1, ячейка 3. Ширина ячейки - 200px, растягивается на три строки при помощи атрибута "rowspan", которому дано значение - rowspan="3 </p>
</td>
</tr>
<tr>
<td>
<p class="tabl"> Строка 2, ячейка 4 </p>
</td>
</tr>
<tr>
<td>
<p class="tabl"> Строка 3, ячейка 5 </p>
</td>
</tr>
</table>


То есть, первая строка содержит в себе три ячейки, первая и третья растягиваются на высоту трёх строк. Я обозначила их оранжевым цветом:



Попробуйте сами представить, как учитываются строки в данной таблице. Если не понимаете - то прочитайте объяснение ниже:

В строке 2 ячейки 1 и 3 уже учтены, поэтому мы пишем только ячейку 4:

<tr>
<td>
<p class="tabl"> Строка 2, ячейка 4 </p>
</td>
</tr>


И в строке 3, поскольку ячейка 1 и ячейка 3 уже учтены благодаря атрибуту rowspan="3", мы пишем только ячейку 5:

<tr>
<td>
<p class="tabl"> Строка 3, ячейка 5 </p>
</td>
</tr>


Таким образом каждая из трёх строк прописана от начала и до конца. И так должно быть в любой таблице. Далее посмотрим для примера ещё более сложный вариант.

Таблица 5.
Смотрим на таблицу 5 Она зелёная. Я пронумеровала ячейки в ней в таком порядке, в каком они должны стоять в html-коде. Эта таблица усложняется тем, что в ней ячейка 2 должна растянуться на две строки, ячейка 3 должна растянуться на четыре строки, а ячейка 4 должна растянуться на две строки. И ячейка 6 при этом будет растянута на два столбца.

Сразу оговорюсь: я задала ячейкам 2 и 4 фиксированную высоту при помощи атрибута "height", который отвечает за высоту. Я это сделала, чтобы развести границы ячеек друг от друга для большей наглядности. Если же вы будете заполнять такую таблицу содержимым, то они так же разойдутся, в соответствии с количеством текста или высотой картинок.

Попробуйте сами написать код такой таблички. А если не получится - посмотрите ниже: Html-код данной таблички выглядит так:
<table width="100%" bgcolor=#a4f7b5 border="1">
<tr>
<td> <p class="tabl"> Ячейка 1 </p> </td>
<td rowspan="2" height="100px">
<p class="tabl"> Ячейка 2, высота 100px, растягивается на две строки </p>
</td>
<td rowspan="4">
<p class="tabl"> Ячейка 3, растягивается на 4 строки </p>
</td>
</tr>
<tr>
<td rowspan="2" height="100px">
<p class="tabl"> Ячейка 4, высота 100px, растягивается на две строки </p>
</td>
</tr>
<tr>
<td> <p class="tabl"> Ячейка 5 </p>
</td>
</tr>
<tr>
<td Colspan="2">
<p class="tabl"> Ячейка 6, растягивается на два столбца </p>
</td>
</tr>
</table>


Давайте посмотрим на этот код внимательно. Строка 1 начинается с ячейки 1, далее слева направо следует ячейка 2, которая растягивается на две строки и ячейка 3, которая растягивается на четыре строки. После этих трёх ячеек мы закрываем строку тегом </tr> и переходим к следующей строке.

Строка 2 начинается как и положено, с тега <tr> , включает в себя ячейку 4, которая растягивается на две строки, а следующая ячейка данной строки входит в состав уже прописанной нами ячейки 2. Поэтому мы её упускаем и переходим к ячейке 3. Но она тоже уже прописана. Нам остаётся только закрыть тег </tr>

Переходим на строку 3. Начинаем её тегом <tr> и смотрим на ячейки этой строки. Первая ячейка строки 3 входит в состав ячейки 4, поэтому мы её упускаем. Вторая ячейка - которая у нас под номером 5, прописывается как положено: <td> <p class="tabl"> Ячейка 5 </p> </td> . Третья ячейка этой строки входит в состав ячейки 3, которая уже прописана нами и поэтому упускается. Можно смело закрывать строку. Ставим тег </tr> и переходим вслед за браузером на четвёртую строку.

Ставим открывающий строку тег <tr> и смотрим, что у нас осталось. А осталась у нас ячейка 6, которая растягивается на два столбца: <p class="tabl"> Ячейка 6, растягивается на два столбца </p> </td> . Поскольку следующая ячейка у нас уже прописана в составе ячейки 3, мы смело закрываем строку - </tr> - и не менее смело закрываем всю таблицу - </table>

Посмотрите на рисунок ниже:



На нём вы наглядно можете увидеть, как располагаются строки и какую ячейку в какой строке мы прописываем. Строки разграничены красными линиями. А входящие в их состав ячейки обозначены разными цветами. Как видите, нам нелегко было бы прописать ячейку 5 (она грязно-жёлтого цвета), если бы мы не разметили для себя, в состав какой строки она входит. Если помнить, что каждая новая строка всегда начинается с левого верхнего угла - то ошибок не будет.

Таблица 6.
Смотрим на таблицу 6 Она розового цвета. В этой таблице пять строк и четыре столбца. Сосчитайте их сами.

Я надеюсь, что эту логическую задачку вы уже можете разрешить сами, поэтому просто привожу здесь полный html-код таблицы 6:

<table width="100%" bgcolor=#f7a4af border="1">
<tr>
<td Colspan="4">
<p class="tabl"> Ячейка 1, растягивается на 4 столбца </p>
</td>
</tr>
<tr>
<td Colspan="2" rowspan="3">
<p class="tabl"> Ячейка 2, растягивается на два столбца и три строки</p>
</td>
<td Colspan="2">
<p class="tabl"> Ячейка 3, растягивается на два столбца </p>
</td>
</tr>
<tr>
<td Colspan="2">
<p class="tabl"> Ячейка 4, растягивается на два столбца </p>
</td>
</tr>
<tr>
<td Colspan="2">
<p class="tabl"> Ячейка 5, растягивается на два столбца </p>
</td></tr>
</td>
</tr>
<tr>
<td><p class="tabl"> Ячейка 6 </p></td>
<td><p class="tabl"> Ячейка 7 </p></td>
<td><p class="tabl"> Ячейка 8 </p></td>
<td><p class="tabl"> Ячейка 9 </p></td>
</tr>
</table>


Как видите, ничего сложного, так что перейдём к следующей таблице, которую я намеренно оставила напоследок. Для закрепления пройденного материала.

Таблица 7.
Внимательно смотрим на таблицу 7 по ссылке, а не рисунок ниже Она обозначена сиреневым цветом. В ней целых восемь строк и четыре столбца. Попробуйте для начала написать её код самостоятельно. Если всё ещё не получается - давайте разберёмся вместе.

Теперь смотрим рисунок. Для наглядности я обозначила границы таблицы и ячеек пожирнее, а красными линиями как всегда обозначила строки.



Вот как выглядит html-код этой таблицы:

<table width="100%" bgcolor=#e7b5f5 border="1">
<tr>
<td><p class="tabl"> Ячейка 1 </p></td>
<td Colspan="2">
<p class="tabl"> Ячейка 2, растягивается на два столбца </p>
</td>
<td><p class="tabl"> Ячейка 3 </p></td>
</tr>
<tr>
<td Colspan="2" rowspan="3">
<p class="tabl"> Ячейка 4, растягивается на два столбца и три строки </p>
</td>
<td Colspan="2">
<p class="tabl"> Ячейка 5, растягивается на два столбца </p>
</td>
</tr>
<tr>
<td Colspan="2">
<p class="tabl"> Ячейка 6, растягивается на два столбца </p>
</td>
</tr>
<tr>
<td Colspan="2">
<p class="tabl"> Ячейка 7, растягивается на два столбца </p>
</td>
</tr>
<tr>
<td><p class="tabl"> Ячейка 8 </p></td>
<td rowspan="4"><p class="tabl"> Ячейка 9, растягивается на четыре строки </p></td>
<td rowspan="4"><p class="tabl"> Ячейка 10, растягивается на четыре строки </p></td>
<td rowspan="2"><p class="tabl"> Ячейка 11, растягивается на две строки </p></td>
</tr>
<tr>
<td rowspan="2">
<p class="tabl"> Ячейка 12, <br> растягивается на две строки </p> </td>
</tr>
<tr>
<td rowspan="2"> <p class="tabl"> Ячейка 13, <br> растягивается на две строки </p>
</td>
</tr>
<tr>
<td><p class="tabl"> Ячейка 14 </p></td>
</tr>
</table>


Синим цветом я, как и в предыдущих html-кодах, пометила тег, открывающий строку, красным - закрывающий. Как видите, с первой строкой всё просто. В неё входит ячейка 1, ячейка 2 (растягивается на две колонки атрибутом Colspan="2"), и ячейка 3.

Вторая строка заключает в себе ячейку 4, которая при помощи атрибута rowspan="3" растягивается на три строки. Далее в эту же строку входит ячейка 5, которая растягивается на две колонки атрибутом Colspan="2" - и на этом строка заканчивается.

Третья строка должна начинаться ячейкой 4, но поскольку мы растянули на три строки атрибутом rowspan ячейку 4, то мы её не пишем, а переходим сразу к ячейке 6, которая растягивается на два столбца атрибутом сolspan="2". И закрываем строку.

Четвёртая строка во всём похожа на третью, должна начинаться ячейкой 4, но поскольку мы растянули на три строки атрибутом rowspan ячейку 4, то мы её не пишем, а переходим сразу к ячейке 6, которая растягивается на два столбца атрибутом сolspan="2". Закрываем строку.

Пятая строка начинается с ячейки 8, потом идёт ячеек 9 и 10, которые при помощи атрибута rowspan="4" растягиваются каждая на 4 строки. И завершает строку ячейка 11, которая атрибутом rowspan="2" растягивается на две строки. На этом мы заканчиваем пятую строку. Как видите, здесь у нас разные ячейки растягиваются по высоте на разное количество строк. Поэтому в следующих строках мы должны очень чётко это учитывать.

Шестая строка начинается ячейкой 12, которая с помощью rowspan="2" растягивается по высоте на две строки. А дальше в состав шестой строки входят ячейки 9, 10 и 11, уже прописанные нами и браузер помнит, что они должны растягиваться каждая на своё количество строк. Поэтому мы смело закрываем строку, в которой у нас как бы лежит всего одна ячейка. Надеюсь, вы понимаете, что это - только кажется. Закрываем строку.

Теперь обратим внимание на следующую ячейку - под номером 13. У неё интересная судьба. Она входит в состав седьмой строки. Но в этой строке у нас уже прописаны ячейки 12, 9 и 10. Поэтому нам остаётся прописать в седьмой строке только саму ячейку 13. И закрыть строку.

И последняя строка, под номером восемь. В неё входит ячейка 14, а ячейки 9, 10 и 13 уже учтены браузером благодаря всё тому же атрибуту rowspan. Так что мы смело закрываем и эту последнюю строку, после чего закрываем всю таблицу.

Как видите, все ячейки встали на свои места и растянулись так, как и положено.

Выводы: прежде, чем составлять html код любой таблицы, нужно представить себе, а лучше нарисовать (хоть на бумаге), из скольких строк она состоит и сколько столбцов она содержит. Нельзя забывать, что каждая строка и каждый столбец должны начинаться там, где им положено и заканчиваться там, где это нужно. И если мы будем полностью соблюдать это простое правило, для нас никакая таблица не покажется сильно сложной в написании её html-кода.

Благодарю за внимание!




Перейти к Уроку 15


© М.В. Гуминенко. 2008 г.
По вопросам использования материалов сайта обращаться по адресу: Kippari2007@rambler.ru



Навигация по урокам

Работа с хостингом

Регистрация на Narod.ru

Регистрация на платном хостинге

Переход с одного платного хостинга на другой


Вопросы по таблицам

Таблица как основа для страницы сайта: табличные теги "width", "border"

Таблица как модуль для ссылок: ячейки и строки ("td" и "tr"), значения атрибута "align"

Атрибут "VALIGN" и его значения. Атрибуты "cellpadding" и "cellspacing"

Сложные таблицы. Атрибуты атрибуты "colspan" и "rowspan"


Форматирование текста

Выравнивание текста (атрибут "align"). Имя, цвет, размер шрифта (font: family, face, color, size). Абзац ("p"). Как задать отступ красной строки (немного о стиле CSS)

Как прописать шрифты и заголовки в стилях CSS

Амперсанды. Текстовые теги. Специфические символы


Делаем ссылки

Как написать код ссылки

Как задать внешний вид ссылки (шрифт, цвет, размер и пр.) в стилях CSS

Что нужно сделать, чтобы на одной странице они были разного цвета, шрифта, размера и пр. (в CSS)

Внутристраничные ссылки или закладки (якоря)

Ссылка "Наверх"


Картинки (логотипы, баннеры, фон)

Загрузка изображений на Radikal.ru

Картинки в тексте

Как сделать работающую кнопку (баннер)

Как установить логотип, задать цвет фона (таблицы, страницы сайта), установить фоновое изображение. Атрибуты bgcolor и background

Как установить логотип через документ стилей CSS

Масштабирующиеся логотипы

Масштабирующиеся рамки в обрамлении таблицы (страницы)

Размещение картинки на странице с текстом

Неподвижный фон


Вопросы по JavaScript и динамическому html

Скрытый текст с помощью JavaScript и динамического html

Бегущая строка

Простейшие фотоальбомы

Сменяющийся логотип


Несколько советов по установке форумного движка SMF на платный хостинг