Таблицы

Таблицы

Полученные знания уже позволяют нам создать простейший HTML-документ, но не более того. Для создания сложных страниц понадобится знание таблиц, потому что в современной верстке все строится именно на их основе. Если вы с таблицами не знакомы вовсе, то советую вам купить хорошую книжку по HTML. Я, конечно, постараюсь кое-что рассказать и объяснить, но на детали не рассчитывайте. Итак, создадим таблицу, состоящую из двух строк и трех столбцов. В языке HTML это делается следующим образом:

<TD>1 ячейка (1 строка)</TD>

<TD>2 ячейка (1 строка)</TD>

<TD>3 ячейка (1 строка)</TD> </TR> <TR>

<TD>1 ячейка (2 строка)</TD>

<TD>2 ячейка (2 строка)</TD>

<TD>3 ячейка (2 строка)</TD> </TR> </TABLE>

Как данная таблица выглядит в браузере, ясно из рис. 1.6.

Начало таблицы обозначает тег <table>, а конец — тег </table>. Элемент <tr> обозначает строку таблицы, а элемент <td> — ячейку. Обратите внимание на вложенность элементов. Таблица может содержать несколько строк (несколько элементов <tr>), а строка может содержать несколько ячеек (несколько элементов <td>). В нашем примере таблица состоит из двух строк, а каждая строка состоит из трех ячеек.

Рассмотрим атрибуты элемента <table>. В примере указаны лишь основные, но вы редко будете пользоваться другими атрибутами. Итак.

О WIDTH *

Обозначает ширину таблицы. В приведенном примере ширина равна 100%, т. е. таблица займет все доступное окно браузера по ширине. При установке ширины таблицы можно использовать проценты (%) и пикселы (рх).

Ширину таблицы задают в пикселах, когда хотят задать ее жестко. В этом случае она не будет растягиваться на все окно браузера и не будет зависеть от разрешения экрана, а всегда будет иметь заданное значение. Например, если написать <table яютн="зоо">, то таблица будет иметь ширину ровно 300 пикселов (если, конечно, содержимое физически сможет уместиться в эту ширину, потому что в противном случае таблица растянется, чтобы вместить в себя содержимое).

Ширину таблицы задают в процентах, если нужна гибкость. Тогда таблица будет иметь разную ширину при разных разрешениях, и будет изменяться при изменении размеров окна браузера. Например, если написать <table width=ioo%>, то при разрешении 800х600 (и окне браузера, развернутом на полный экран) ширина таблицы будет около 800 пикселов (немного меньше, потому что элементы интерфейса браузера отнимут некоторое пространство), а при разрешении 1024х768 ширина таблицы будет около 1024 пикселов.

П BORDER

Обозначает ширину рамки таблицы. Каждая ячейка таблицы имеет рамку, однако нельзя установить рамку для какой-то определенной ячейки, рамки устанавливаются сразу для всех ячеек в теге <table>. Если установить border="o", то рамок не будет вовсе, при любом другом значении рамки будут. На фактическую ширину рамки влияет еще и атрибут cells pacing.

О CELLS РАС ING . .

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

атрибут border="i". Но фактическая ширина рамки равна 5 пикселам. Так получается из-за того, что значение атрибута cellspacing равно 5.

CELLPADDING

Обозначает ширину отступов вокруг содержимого каждой ячейки. В нашем примере атрибут cellpadding="io", т. е. ширина полей равна 10 пикселам. Для более глубокого понимания особенностей данных атрибутов давайте рассмотрим еще один пример, но с другими значениями.

<TD>1 ячейка (1 строка)</TD>

<TD>2 ячейка (1 строка)</TD>

<TD>3 ячейка (1 строка)</TD> </TR> <TR>

<TD>1 ячейка (2 строка)</TD>

<TD>2 ячейка (2 строка)</TD>

<TD>3 ячейка (2 строка)</TD> . </TR> </TABLE>

браузере эта таблица будет выглядеть так, как представлено на рис. 1.7.

Обратите внимание на отличия от предыдущего примера. Во-первых, ширина таблицы равна точно 200 пикселов, во-вторых, ширина рамки равна одному пикселу (потому что атрибут border="i", а атрибут cellspacing="o"),

в-третьих, содержимое каждой ячейки вплотную прилегает к рамкам, потому что ширина отступов вокруг содержимого равна нулю (атрибут

CELLPADDING="0").

В HTML на таблицы накладывается одно любопытное ограничение: количество ячеек в каждой строке одной таблицы должно быть одинаковым. Исходя из этого, на первый взгляд кажется, что нельзя сделать таблицу, где в первой строке будет три ячейки, а во второй строке — две ячейки. На самом деле можно. Для этого существует атрибут colspan, который указывает брау-зеру, сколько ячеек следует объединить в одну. Например:

<TD>1 ячейка (1 строка)</TD>

<TD>2 ячейка (1 строка)</TD>

<TD>3 ячейка (1 строка)</TD> </TR> <TR>

<TD>1 ячейка (2 строка)</TD>

<TD COLSPAN="2">2 и З ячейка (2 строка)</TD> </TR> </TABLE>

Результат выполнения этого кода продемонстрирован на рис. 1.8.

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

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

Для объединения ячеек по вертикали существует атрибут rows pan. По механизму действия он аналогичен атрибуту colspan, так что подробно останавливаться на нем не будем.

В HTML выравнивание содержимого ячеек таблицы по горизонтали осуществляется с помощью атрибута align. Он может принимать четыре значения:

П left — содержимое выравнивается по левому краю;

П right — содержимое выравнивается по правому краю;

П center — содержимое выравнивается по центру;

D justify — текст выравнивается по ширине путем увеличения расстояния между словами.

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

В начало … Назад … Далее