Задачи с таблицами

Пространственно-логические задачки с таблицами: атрибуты 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-кода.

Spatial and logical puzzles tables: Attributes colspan, rowspan

 

Before I explain how to create simple spreadsheets page. In this lesson, I’ll talk about the laws governing the creation of complex tables. That is, a table consisting of rows and a different number of cells. The examples that I will use, we can see here a few times during the lesson, let us turn to this page. And now we start from the beginning.

 

Table 1

Better to start with a simple, but at the same time to remember how a given cell and row.

A simple task. We look at Table 1, which I marked in blue (maybe someone will call it blue — it does not matter). It has only two lines. The first stretched into five columns, the second of these is the most columns. Here comes into play a very valuable attribute — «Colspan».

Colspan attribute specifies the number of columns to which this cell is stretched.

We ask it a value equal to five: Colspan = «5». And our first cell extends over a width of five cell-column of the next line. All code labels will look like this:

 

<table bgcolor = # a4bff7 width = «100%» border = «1»>

<tr>

<td Colspan = «5»>

<p class = «tabl»> Cell 1 of row 1, extends over five columns using the attribute «colspan», which defines the meaning — colspan = «5», the number of cells in the second row </ p>

</ td>

</ tr>

<tr>

<td>

<p class = «tabl»> Line 2, Box 2 </ p>

</ td>

<td>

<p class = «tabl»> Line 2, Box 3 </ p>

</ td>

<td>

<p class = «tabl»> Line 2, Box 4 </ p>

</ td>

<td>

<p class = «tabl»> Line 2, Box 5 </ p>

</ td>

<td>

<p class = «tabl»> Line 2, Box 6 </ p>

</ td>

</ tr>

</ table>

Blue I marked the beginning of each line, the red — the end of the line. Now let’s deal with this sign. To begin with a look at the figure below:

 

 

 

In this figure, I marked the beginning and end of each line of the corresponding tags. Each line begins, on how much you should already know, the tag <tr> and ends with the closing </ tr>

In this table, everything is simple and clear. The first line begins the tag <tr>, followed by the tag opens the cell — <td>. Since the cell will be stretched to the width of five cells of the second row, then we set the attribute colspan = «5», then the cell is the closing </ td> and the entire string as the closing tag </ tr>

 

Why do I write about this in detail? In order for you to remember once and reliable: each line must have a beginning and an end! These start and end of a line designated by the tags <tr> and </ tr>, and inside the lines have to be placed all of our cells with all its contents, whatever it may be — text, pictures, etc.

 

table 2

Now look at Table 2, it is indicated by a light orange (or dirty orange — as you prefer). It is similar to Table 1, but I added another line (3), which contains a single cell, also stretched the width of the five cells in the second row. The code table is as follows:

 

<table bgcolor = # a4bff7 width = «100%» border = «1»>

<tr>

<td Colspan = «5»>

<p class = «tabl»> Cell 1 of row 1, extends over five columns using the attribute «colspan», which defines the meaning — colspan = «5», the number of cells in the second row </ p>

</ td>

</ tr>

<tr>

<td>

<p class = «tabl»> Line 2, Box 2 </ p>

</ td>

<td>

<p class = «tabl»> Line 2, Box 3 </ p>

</ td>

<td>

<p class = «tabl»> Line 2, Box 4 </ p>

</ td>

<td>

<p class = «tabl»> Line 2, Box 5 </ p>

</ td>

<td>

<p class = «tabl»> Line 2, Box 6 </ p>

</ td>

</ tr>

<tr>

<td Colspan = «5»>

<p class = «tabl»> 7 cell line 3, stretched into five columns using the attribute «colspan», which defines the meaning — colspan = «5», the number of cells in the second row </ p>

</ td>

</ tr>

</ table>

To understand how important it is to comply with such an order of writing html-code tables, consider a more complex version that already require some spatial imagination and logic. Let’s move on to the next table.

 

Table 3.

See Table 3 (which is filled with gray) consists of one large cell (left), stretched to a height of three cells, which are located one above the other (right). That is, our whole table has three rows and the first cell is stretched to a height of three lines. Look at the picture below (just be sure to first take a look at this table in the form of the head, the link: see Table 3 and then look at the picture):

 

 

 

The picture I have marked the beginning and end of each of the three lines that make up this table. To the first cell of the table lasted for three lines, we use the attribute «rowspan» and set its value equal to three: rowspan = «3»

Attribute rowspan, you guessed it, sets the number of lines that are stretched cell.

 

The code plate 3 is as follows:

 

<table bgcolor = # e5e5e7 width = «100%» border = «1»>

<tr>

<td rowspan = «3» WIDTH = 200px>

<p class = «tabl»> string 1 yacheyka1. Cell width — 200px, the cell extends over three lines using the attribute «rowspan», which defines the meaning — rowspan = «3» </ p>

</ td>

<td> <p class = «tabl»> string 1, cell 2 </ p>

</ td>

</ tr>

<tr>

<td>

<p class = «tabl»> Line 2, Box 3 </ p>

</ td>

</ tr>

<tr>

<td>

<p class = «tabl»> Line 3, Box 4 </ p>

</ td>

</ tr>

</ table>

Note: <p class = «tabl»> text </ p> — I have asked for the text formatting to make it easier to see. You have at this point in the table, if you use it will be something special (pictures, text, and so forth.).

 

Note! This label clearly visible important law, without which you can not write yourself like a plate! In order to understand this pattern, look again at the picture:

 

 

 

Red line I continued the lines given on the left as they were, if we have registered them in our table. They seem to be overlooked in the cell, we do not see them, but in the construction of the table we have to take them into account. This is important because, as I said in one of the lessons, the browser reads our html-code table starting from the upper left corner of the table, from left to right. From the opening line in the table <tr> tag browser reads all our tags, how many of them there are in a row, and transforms into a graphic image. All that he reads becomes in one line. And only after the browser read to mark the end of the line — a closing tag </ tr>, it «understands» that the row was over — and it is necessary to move to a line graph below, which also starts on the left and will go to the right. Once again, the browser reads everything from left to right from the opening line of <tr> tag to the next line of the closing tag </ tr>, transforming our tags in the graphic image of the next line.

 

That part of humanity, who writes by hand on paper, left to right, works on the same principle as that of the browser. Now imagine a lined sheet of paper: we can append text to the end of the line, but can not finish the line or even skip a line, two, three — leaving them empty. But this does not mean that they do not exist! Similarly, each row of the table is taken into account when reading the browser html-code from the table.

 

In this example, the table 3, we opened the first (top) row of the table, the first cell of the table we have stretched to all three rows of the table. In this browser indicates an attribute rowspan = «3». It closes the line where it should be. Here is the code snippet. As it can be seen from line 1 is closed after the cell 2,

 

<table bgcolor = # e5e5e7 width = «100%» border = «1»>

<tr>

<td rowspan = «3» WIDTH = 200px>

<p class = «tabl»> string 1 yacheyka1. Cell width — 200px, the cell extends over three lines using the attribute «rowspan», which defines the meaning — rowspan = «3» </ p>

</ td>

<td> <p class = «tabl»> string 1, cell 2 </ p>

</ td>

</ tr>

instead of after all the cells, before closing the table. Look at the picture:

 

 

 

I flooded the pink one fragment that we have registered above. For what? In order to more clearly you imagine this essential point: in a html-code line should be spelled out everything, from left to right, inside and out.

Subsequent lines 2 and 3, which contain cells 3 and 4, you have to write the same way, starting with a string tag <tr>. But! Lines 2 and 3 of the cell 1 is already set and the browser knows that thanks to attribute rowspan = «3» — and you do not write it. A write only the cells 3 and 4:

 

<tr>

<td>

<p class = «tabl»> Line 2, Box 3 </ p>

</ td>

</ tr>

<tr>

<td>

<p class = «tabl»> Line 3, Box 4 </ p>

</ td>

</ tr>

Close the table tag </ table> — and you get the source code.

 

If we forget to open or close the line on time, or to take into account those lines that are not visible, the browser will «stumble» — and graphic effects can be unpredictable. For example like this: Cell 4 «ran» down it was because I put closing tag </ tr> not after the cell 2 and before it, that is not finished until the end of the line. Variations «skew» tables, as you know, can be varied.

 

The given me regularity observed in the tables of any configuration. So I will continue to return to it.

 

Table 4.

See Table 4 It is yellow. This table is similar to the previous one, but I asked her to another cell (right), which also extends to a height of three lines. The code table is as follows:

 

<table bgcolor = # e5e5e7 width = «100%» border = «1»>

<tr>

<td rowspan = «3» WIDTH = 200px>

<p class = «tabl»> string 1 yacheyka1. Cell width — 200px, the cell extends over three lines using the attribute «rowspan», which defines the meaning — rowspan = «3» </ p>

</ td>

<td> <p class = «tabl»> string 1, cell 2 </ p>

</ td>

<td rowspan = «3» WIDTH = 200px>

<p class = «tabl»> Line 1, the cell 3. Cell width — 200px, stretched to three rows with the attribute «rowspan», which defines the meaning — rowspan = «3 </ p>

</ td>

</ tr>

<tr>

<td>

<p class = «tabl»> Line 2, Box 4 </ p>

</ td>

</ tr>

<tr>

<td>

<p class = «tabl»> Line 3, Box 5 </ p>

</ td>

</ tr>

</ table>

That is, the first line contains three cells, the first and third stretch to the height of three lines. I marked them in orange:

 

 

 

Try to imagine how counted rows in the table. If you do not understand — then read the explanation below:

 

In line 2, cell 1 and 3 already accounted for, so we write only the cell 4:

 

<tr>

<td>

<p class = «tabl»> Line 2, Box 4 </ p>

</ td>

</ tr>

And in line 3 as cell 1 and the cell 3 are already considered through the attribute rowspan = «3», we write only the cell 5:

 

<tr>

<td>

<p class = «tabl»> Line 3, Box 5 </ p>

</ td>

</ tr>

Thus, each of the three lines spelled out from the beginning to the end. And so it should be in any table. Next, look for an example of a more complex version.

 

Table 5.

We look at the table 5 it green. I numbered cell in it in the order in which they have to stand in a html-code. This table is complicated by the fact that in her cell 2 should be stretched into two lines, cell 3 should last for four lines, and cell 4 to be stretched into two lines. And cell 6 thus be stretched into two columns.

 

Just specify: I asked cells 2 and 4 fixed height using the attribute «height», which is responsible for the height. I did it to dissolve the boundaries of the cells from each other for clarity. If you fill the contents of such a table, they also disperse in accordance with the amount of text or images in height.

 

Try to write code such signs. And if it does not — see below: Html-code for this tablet looks like this:

 

<table width = «100%» bgcolor = # a4f7b5 border = «1»>

<tr>

<td> <p class = «tabl»> Cell 1 </ p> </ td>

<td rowspan = «2» height = «100px»>

<p class = «tabl»> Cell 2, height 100px, stretched into two lines </ p>

</ td>

<td rowspan = «4»>

<p class = «tabl»> Cell 3, stretched to 4 lines </ p>

</ td>

</ tr>

<tr>

<td rowspan = «2» height = «100px»>

<p class = «tabl»> Cell 4, height 100px, stretched into two lines </ p>

</ td>

</ tr>

<tr>

<td> <p class = «tabl»> Cell 5 </ p>

</ td>

</ tr>

<tr>

<td Colspan = «2»>

<p class = «tabl»> Cell 6 stretched on two columns </ p>

</ td>

</ tr>

</ table>

Let’s look at the code carefully. Line 1 starts with cell 1, then left to right, the next cell 2, which extends over two lines and the cell 3, which extends over four lines. After these three cells we close the string tag </ tr> and move to the next line.

 

Line 2 starts as expected, with the tag <tr>, includes a cell 4, which extends over two rows, and the next cell of this line is a part of us already registered cell 2. Therefore, we miss it and go to the cell 3. However, she, too, is already registered. We can only close the tag </ tr>

 

Go on line 3. We start her tag <tr> and looking at the cells that line. The first cell line 3 is part of the cell 4, so we miss her. The second cell — which we at number 5, is prescribed as expected: <td> <p class = «tabl»> Cell 5 </ p> </ td>. The third cell line that is part of the cell 3, which already spelled out by us and therefore overlooked. It is safe to close the line. We put a tag </ tr> and go after the browser on the fourth line.

 

Put the opening string <tr> tag and see what we have left. And we left the cell 6, which extends over two columns: <p class = «tabl»> Cell 6 stretched on two columns </ p> </ td>. Since the next cell we already spelled out in the composition of the cell 3, we can safely close the string — </ tr> — and at least safely close the entire table — </ table>

 

Look at the picture below:

 

 

 

In it you can clearly see how the strings are arranged and which cell line in which we prescribe. Rows delineated by red lines. And their constituent cells are color-coded. As you can see, we would not be easy to register a cell 5 (it is a dirty yellow color), if we had not marked out for himself in the line which it is included. If you remember that every new line always begins with the upper-left corner — the error will not.

 

Table 6.

We look at the table 6 It is pink. In this table, five rows and four columns. Count them yourself.

 

I hope that this logical puzzle you can already permit themselves, so just give here a full html-code in Table 6:

 

<table width = «100%» bgcolor = # f7a4af border = «1»>

<tr>

<td Colspan = «4»>

<p class = «tabl»> Cell 1, stretched to 4 columns </ p>

</ td>

</ tr>

<tr>

<td Colspan = «2» rowspan = «3»>

<p class = «tabl»> Cell 2, extends over two columns and three rows </ p>

</ td>

<td Colspan = «2»>

<p class = «tabl»> Cell 3, stretched to two columns </ p>

</ td>

</ tr>

<tr>

<td Colspan = «2»>

<p class = «tabl»> Cell 4, extends over two columns </ p>

</ td>

</ tr>

<tr>

<td Colspan = «2»>

<p class = «tabl»> Cell 5, stretched to two columns </ p>

</ td> </ tr>

</ td>

</ tr>

<tr>

<td> <p class = «tabl»> Cell 6 </ p> </ td>

<td> <p class = «tabl»> Cell 7 </ p> </ td>

<td> <p class = «tabl»> Cell 8 </ p> </ td>

<td> <p class = «tabl»> Cell 9 </ p> </ td>

</ tr>

</ table>

As you can see, nothing complicated, so let’s move on to the next table, I purposely left for last. To consolidate the material.

 

Table 7.

Carefully look at the table of 7 on the link, not the figure below it is marked in purple. It as much as eight rows and four columns. Try to start to write its own code. If you still can not — let’s see together.

 

Now look at the picture. For clarity, I have marked the border of the table and cells fatter and red lines as always marked line.

 

 

 

Here is the html-code in this table:

 

<table width = «100%» bgcolor = # e7b5f5 border = «1»>

<tr>

<td> <p class = «tabl»> Cell 1 </ p> </ td>

<td Colspan = «2»>

<p class = «tabl»> Cell 2, extends over two columns </ p>

</ td>

<td> <p class = «tabl»> Cell 3 </ p> </ td>

</ tr>

<tr>

<td Colspan = «2» rowspan = «3»>

<p class = «tabl»> Cell 4, extends over two columns and three rows </ p>

</ td>

<td Colspan = «2»>

<p class = «tabl»> Cell 5, stretched to two columns </ p>

</ td>

</ tr>

<tr>

<td Colspan = «2»>

<p class = «tabl»> Cell 6 stretched on two columns </ p>

</ td>

</ tr>

<tr>

<td Colspan = «2»>

<p class = «tabl»> Cell 7, stretched to two columns </ p>

</ td>

</ tr>

<tr>

<td> <p class = «tabl»> Cell 8 </ p> </ td>

<td rowspan = «4»> <p class = «tabl»> Cell 9, stretched to four lines </ p> </ td>

<td rowspan = «4»> <p class = «tabl»> Cell 10, stretched to four lines </ p> </ td>

<td rowspan = «2»> <p class = «tabl»> Cell 11, stretched into two lines </ p> </ td>

</ tr>

<tr>

<td rowspan = «2»>

<p class = «tabl»> Cell 12, <br> stretched into two lines </ p> </ td>

</ tr>

<tr>

<td rowspan = «2»> <p class = «tabl»> Cell 13, <br> stretched into two lines </ p>

</ td>

</ tr>

<tr>

<td> <p class = «tabl»> Cell 14 </ p> </ td>

</ tr>

</ table>

Blue I, as in the previous html-code marking tag line opens, the red — the end. As you can see, the first line of it’s simple. It includes cell 1, cell 2 (stretched into two columns attribute Colspan = «2»), and the cell 3.

 

The second line contains the cell 4, which by means of attribute rowspan = «3» extends over three lines. Further, in the same string 5 enters the cell which extends over two columns Colspan attribute = «2» — and this line ends.

 

The third line should begin cell 4 but as we stretched out on the three lines of the rowspan cell 4, we do not write it, and go directly to the cell 6, which extends over two columns attribute solspan = «2». And closes the line.

 

The fourth line around like a third, should begin cell 4 but as we stretched out on the three lines of the rowspan cell 4, then we it do not write, and go directly to the cell 6, which extends over two columns attribute solspan = «2». Close the line.

 

The fifth line begins with a cell 8, then goes cells 9 and 10, which by means of attribute rowspan = «4» stretched every 4 rows. And completing 11 cell line, which is an attribute rowspan = «2» stretched into two lines. This concludes the fifth row. As you can see, here we have different cells are stretched in height to a different number of lines. Therefore, in the following lines, we have to be very clear that into account.

 

The sixth line begins cell 12, which is using rowspan = «2» in height stretched into two lines. And then in the sixth row of the cell consists of 9, 10 and 11, has prescribed the browser remembers us and that they have to stretch each to their number of lines. Therefore, we can safely close the line, which we would like is just one cell. I hope you understand that it is — only it seems. Close the line.

 

Now pay attention to the next cell — at number 13. She had an interesting fate. It is part of the seventh row. But in this line have already registered cell 12, 9 and 10. Therefore, we have to register in the seventh line of the cell itself only 13. And to close the line.

 

And the last line, at number eight. As it enters the cell 14, and cell 9, 10 and 13 is already considered a browser through all the same attribute rowspan. So that we may boldly close, and the last line, then close the entire table.

 

As you can see, all of the cells fell into place and spread out as it should.

 

Conclusions: before make any html code for a table, you need to imagine a better draw (at least on paper), how many lines it is and how many columns it contains. We must not forget that each row and each column must start where they should and end up where it is needed. And if we are to fully comply with this simple rule, no table for us does not seem much harder to write her a html-code.