Таблицы на html

Вы уже, наверное, обратили внимание на то, что практически все сайты, которые Вы видели, поделены на зоны. В одной зоне расположено меню, в другой реклама, в третьей выводится какая-либо информация и т.д. Эти зоны образуются таблицами. Таблицы являются важной частью разметки документа HTML. Они позволяют выводить текст или изображения в определенном месте страницы. Таблица создается при помощи парного тэга <table>.

Таблица может иметь свои размеры, цвет фона, может иметь даже фоновый рисунок, иметь рамку вокруг себя или не иметь и т.д. Таблица должна содержать в себе хотя бы одну строку и один столбец. Строка создается при помощи парного тэга <tr>, а столбец парным тэгом <td>. При создании таблиц набросайте на бумаге образец создаваемых таблиц для четкого распределения всего пространства страницы. А теперь давайте попробуем создать простую таблицу. Она будет состоять из двух строк и трех столбцов, раскрашенных для наглядности разными цветами.

Вот что у нас получилось:

1-1	1-2	1-3
2-1	2-2	2-3

Теперь разберем все по порядку. В тэге <table> указаны толщина рамки border, длина width и ширина height всей таблицы и расстояние между ячейками cellspacing. Все эти атрибуты прописываются по мере надобности. Длину можно указывать в пикселах или в процентах от ширины экрана. Ширину лучше указывать в пикселах. Если не указать длину и ширину - таблица будет сформирована по наполнению ячеек, что может привести к непредсказуемым результатам.

В тэге <td> указаны атрибуты цвета ячейки и выравнивания. Для выравнивания по вертикали используется атрибут valign с параметрами middle, top и bottom. В данном случае текст выровнен по горизонтали по центру. Если не указана длина конкретной ячейки, то вся указанная в тэге <table> длина таблицы разделится поровну между всеми столбцами. Если Вы указали в тэге <td> длину ячейки, то изменится длина всего столбца, т.е. во всех строках. Этот нюанс необходимо учитывать при разработке таблиц. Ячейки динамически увеличивают свою ширину по мере их заполнения. В ячейки таблицы можно вставлять текст, картинки, ссылки, формы и т.д.

Для объединения ячеек существуют атрибуты colspan> и rowspan>. Colspan объединяет ячейки столбцов, а rowspan объединяет ячейки строк. Рассмотрим это на примере:

<table border="1" width="300" height="100" cellspacing="2">

<tr>

Вот что у нас получилось:

1-1 2-1	1-2 и 1-3
	2-2	2-3

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

<table border="0" width="300" height="100" cellspacing="0" cellpadding="5">

<tr>

1-1 2-1	1-2 и 1-3
	2-2	2-3

Вы видите результат. На первый взгляд осталось вроде то же. Но рамки нет, нет разрывов между ячейками, текст выровнен по разным сторонам с полями в 5 пикселов. При создании сайта Вам придется варьировать поля в соответствии с вашими надобностями.

Таблицу, при необходимости можно вложить в другую таблицу. Например, так:

<table border="2" cellspacing="0" cellpadding="5" bgcolor="#F5FFFA" width="30%" height="200">
<tr>
<td valign="top">
<center>Ваш текст<br><br><br></center>
<center><table width="50%" border="0" bgcolor="#87CEFA">
<tr>
<td>Ваш другой текст или картинка</td>
</tr>
</table></center>
</td>
</tr>
</table>

Ваш текст

Ваш другой текст или картинка

Теперь разберемся с тем, что же мы написали. В определении первой таблицы мы указали толщину ее рамки, без расстояния между ячейками, поле определили в 5 пикселов, задали цвет фона таблицы, длину задали 30%, а ширину в 200 пикселов. Таблица состоит из одной строки и одного столбца. В столбце задано выравнивание текста по верхнему краю и по центру. В этом же столбце мы разместили по центру другую таблицу с длиной в 50% и для наглядности с другим цветом без рамки.

Примечание

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

Поиграйтесь с размерами и цветами таблицы, повставляйте текст, картинки и т.д. и любуйтесь произведенным результатом. Если у Вас не получилось то, что Вы хотели - проанализируйте весь написанный код на предмет ошибок. Иногда забывают закрыть кавычки или поставить угловую скобку. Будьте внимательны и у Вас все получится.

В следующей главе мы познакомимся с формами.

Таблицы на html

Реклама