HtmlGuide.ru

Поговорим о таблицах

Автор admin | Дата: 15.05.2009

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

Ну что ж, не будем с ними спорить, наше дело – верстка, вебстроительство. Таблицы можно использовать для того, чтобы разделить различные части страницы, например шапку, левую навигацию, основное содержимое и подвал. Но, также можно применить и для прямого их предназначения – представления информации в таблице.

Итак
TABLE – работаем с таблицами
TR – начинается строка
TD – начинается ячейка

Сразу же замечу, что теги таблиц парные, т.е. на каждый открывающий тег, нужно поставить свой закрывающий.
И если в IE ваша невнимательность может остаться незамеченной, то в других браузерах, например Opera или FireFox вся ваша верстка может отобразиться совсем иным образом.

Внутри данных тегов можно применять известные атрибуты, например такие как:

ALIGN WIDTH HEIGHT BGCOLOR

Но, есть и несколько особенных атрибутов, которые будут работать только для тега TABLE, это внутренние и внешние отступы.

Соответственно, cellpadding применяем, когда хотим задать отступ внутри ячейки, а cellspacing когда нужно сделать отступ в границах.

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

COLSPAN – объединяет ячейки
ROWSPAN – объединяет строки

Пример использования.

<table border=”1” cellpadding=”10″ cellspacing=”10″>
<tr>
<td colspan=”2″>Ячейка 0</td>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>

В данном примере мы видим, что верхняя ячейка будет одна, а ниже под ней будут размещены две ячейки.

<table border=1 cellpadding=”10″ cellspacing=”10″>
<tr>
<td rowspan=”2″>Ячейко 0</td>
<td>Ячейка 1</td>
</tr>
<tr>
<td>Ячейка 2</td>
</tr>
</table>

А если сохранить данный код, то мы увидим, как первая ячейка будет продолжена, таким образом с одной стороны мы получим одну ячейку, а с другой – две.

Тема таблиц в HTML – обширна.
Поэтому другие моменты мы рассмотрим в других темах.

Также рекомендую прочитать статьи про электронные системы управления документооборотом и уничтожение документов на сайте ArhiDelo.ru