Часть 2. Табличная верстка

Метод табличной верстки получил широкое распространение во времена предшествовавшие появлению стандарта CSS, так как на тот момент не было другой простой возможности точно расположить элементы на странице. Таблицы же, за счет того, что автоматически изменяют свой размер в соответствии с содержимым, а также за счет возможности, напротив, задать точные размеры той или иной ячейки, позволяют быстро и удобно расставить иллюстрации к тексту или совместить несколько частей коллажа в одно большое изображение. Кроме того, таблицы в HTML могут быть вложенными, что позволяет создавать целые иерархии таблиц, что было очень удобно при верстке сложных страниц, отдельные элементы которых должны были бы сохранять свое положение и размер на экране вне зависимости от размера окна браузера, тогда как другие элементы, напротив, должны были изменяться в размерах и/или изменять свое местоположение относительно остальных объектов документа.

Плюсами табличной верстки можно назвать:

· разделение содержания от представления;

· возможность верстать «табличные» макеты любой сложности;

· простая реализация;

· корректное отображение в различных браузерах.

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

Теги, используемые при создании таблиц:

· <table> </table> - теги начала и конца таблицы;

· <th> </th> - теги заголовка таблицы (текст будет выделен жирным и отцентрирован;

· <tr> </tr> - теги начала и конца строки;

· <td> </td> - теги начала и конца столбца.

Основные атрибуты:

· width - ширина таблицы указывается в "%" или в пикселях "800";

· border - толщина рамки;

· cellspacing - расстояние между ячейками;

· cellpadding - расстояние между рамкой ячейки и текстом;

· align - выравнивание по горизонтали (по умолчанию слева="left" центр="center" справа="right");

· valign - выравнивание по вертикали (верх="top" середина="middle" низ="bottom")

· colspan=x - количество ячеек по горизонтали;

· rowspan=x - количество ячеек по вертикали.

Пример табличной верстки для фиксированного макета из трех колонок.

При макете фиксированной ширины общая ширина таблицы задается в пикселах и остаётся постоянной независимо от разрешения монитора и размера окна браузера. При этом ширину отдельных колонок также имеет смысл установить в пикселах.

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

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

<table width=950 border=1>

<tr>

<td width=150>Колонка 1</td>

<td width=600>Колонка 2</td>

<td width=200>Колонка 3</td>

</tr>

</table>

Поиск по сайту: