Таблицы. Основной инстинкт

Я люблю таблицы.

Я знаю, я знаю. Я - идиот. Но это действительно так.

Я помню, когда впервые обнаружил, что такое таблицы, давно еще в дни когда самым крутым браузером считался Netscape 1.1. Я разбирался с этим всю ночь и к 4 утра мог сделать при помощи таблиц все что угодно. Да, и тогда я наконец понял, что я могу управлять форматированием создаваемой вебстраницы.

Прэлестно, как говорил тот самый толстый котище ... Прэлестно. Фактически, прелесть таблиц состоит в том, что они гибки в настройках. Вы можете сделать их распространяющемися на всю ширину открытого окна браузера независимо от того, насколько широкий оно распахнуто или наоборот задать им размер и тогда не будет учитываться размер окна браузер при форматировании. Выбор ваш. Вы командуете парадом!.

Но сегодня мы начнем с основ.

Возможности и Невозможности

Первый шаг к пониманию таблиц это знание форм которые они могут принимать. Давайте я покажу Вам пока что на примере эдакой сеточки::

+ - + - +

|   |   |  

+ - + - +

|   |   |  

+ - + - +

Это вполне возможно.

Вы можете начать удалять линии:

+ - + - + + - + - +

|       | |   |   |

+ - + - + +   + - +

|   |   | |   |   |

+ - + - + + - + - +

примеры выше также выполнимы. Но вот то что ниже - нет:

+ - + - +

|   |   |  

+ - +   +

|       |  

+ - + - +

В основном, если Вы можете нарисовать свою таблицу при помощи нашей магической сеточки, и там не будет элемента подобного латинской букве L, Вы можете cвободно кодировать это (имеется в виду, конечно, не кодирование разведданных, а кодирование HTML). И если Вы с самого начала поймете то, что Вы можете и не можете делать, то убережете себя от лишней бесполезной работы в итоге.

Основы

Любая таблица имеет три основных элемента : таблица, строка таблицы, и ячейка таблицы. Отметки для них:

Таблица: <table>

Строка Таблицы: <tr>

Ячейка Таблицы: <td>

Обязательно запомните, что <td> всегда находится внутри <tr>, который всегда находится внутри <table>.

Достаточно уже. Давайте дальше!

Слышу, слышу Ваши вопли. Ладно, уговорили! Давайте делать основную таблицу. Что у нас есть:

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

И имеется код:

<TABLE BORDER>

     <TR>
          <TD> Ячейка 1 </TD>

          <TD> Ячейка 2 </TD>
     </TR>

     <TR>
          <TD> Ячейка 3 </TD>

          <TD> Ячейка 4 </TD>
     </TR>

</TABLE>

Как Вы видите, первая строка таблицы содержит ячейки 1 и 2; вторая строка таблицы - ячейки 3 и 4. Строки Таблицы, всегда расположены горизонтально. Содержание каждой ячейки - в данном случае, слова " Ячейка 1 " или " Ячейка 2 " - находятся между <TD> и </TD>.

Чтобы таблица стала видна, я добавил border к<TABLE>. Это просто делает ее видимой. Вы можете также определить его ширину, добавляя число как в <TABLE BORDER=5>. Но осторожно, не заходите слишком далеко.

"Colspan" и "rowspan"

Вы можете также делать одну ячейку в в одной строке , а в другой строке - две ячейки.. Например так:

Ячейка 1
Ячейка 3	Ячейка 4

Чтобы добиться этого, Вы должны использовать colspan. Просто добавьте colspan=2 к <td>, и ВУАЛЯ!

<TABLE BORDER>

     <TR>
          <TD COLSPAN=2> Ячейка 1 </TD>
     </TR>

     <TR>
          <TD> Ячейка 3 </TD>

          <TD> Ячейка 4 </TD>
     </TR>

</TABLE>

Можно сделать и так:

Ячейка 1	Ячейка 2
	Ячейка 3

Всего-то и надо, что добавить rowspan=2 к <td>:

<TABLE BORDER>

     <TR>
          <TD ROWSPAN=2> Ячейка 1 </TD>
     </TR>

     <TR>
          <TD> Ячейка 3 </TD>

          <TD> Ячейка 4 </TD>
     </TR>

</TABLE>

Внимание: Строки, располагаются горизонтально, столбцы - вертикально. Так, если Вы хотите слить ячейки по горизонтали, используйте colspan. Чтобы слить ячейки по вертикали, используйте rowspan.