Компоновка HTML - использование таблиц

Как известно тег < table> используется для отображения таблиц в HTML документах. У этого тега имеется атрибут border, указывающий толщину границы. И если его значение равно нулю, то граница не видна, видно лишь содержимое ячеек. Это и используется для компоновки страниц. В распоряжении дизайнера появляется не одна большая область для вставки элементов, а бесконечное число более мелких зон.

Наберите следующий пример.

< html> < body> < p> Часть этой страницы отформатирована с помощью двух столбцов, какгазетная страница. Все, что находится ниже этого текста, располагается в двухячейках таблицы. Как можно видеть, есть левый столбец и правый столбец.< /p> < table border=" 0" width=" 100%" > < tr> < td текст выводится в левомстолбце.< /td> < td этот текст выводится вправом столбце.< /td> < /tr> < /table> < /body> < /html>

Пример выполнения данного HTML-кода

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

< html> < body> < p> Часть этой страницы отформатирована с помощью двух столбцов, какгазетная страница. Все что находится ниже этого текста располагается в двухячейках таблицы. Как можно видеть, есть левый столбец и правый столбец.< /p> < table border=" 0" width=" 100%" > < tr> < td текст выводится в левомстолбце. Ширина этого столбца 20%< /td> < td width=" 80%" этот текст выводится в правом столбце. Ширина столбца80%< /td> < /tr> < /table> < /body> < /html>

Пример выполнения данного HTML-кода

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

Не имеет значения, сколько текста будет размещено на этой странице, он будет оставаться в пределах своего столбца.

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

< html> < body> < p> Часть этой страницы отформатирована с помощью двух столбцов, какгазетная страница, и общего заголовка. Все что находится ниже этого текстарасполагается в трех ячейках таблицы, причем для верхней ячейки указан атрибутcolspan=" 2". Как можно видеть, есть левый столбец и правый столбец, а такжеобщий заголовок. Для каждой ячейки указан свой цвет фона.< /p> < table border=" 0" cellpadding=" 0" cellspacing=" 0" > < tr height=" 150px" > < td colspan=" 2" bgcolor=" #cccccc" > Этот текст выводится в верхней ячейке таблицы.< /td> < /tr> < tr height=" 500px" > < td bgcolor=" #dddddd" > Этот текст выводится в левом столбце. Ширина этого столбца 20%< /td> < td bgcolor=" #eeeeeee" > Аэтот текст выводится в правом столбце. Ширина столбца 80%< /td> < /tr> < /table> < /body> < /html>

Пример выполнения данного HTML-кода

Этот же эффект можно получить и применив две таблицы вложенных одна в другую.

< html> < body> < p> Часть этой страницы отформатирована с помощью двух столбцов, какгазетная страница, и общего заголовка. Все что находится ниже этого текстарасполагается в ячейках таблицы, причем здесь применяется вложенность однойтаблицы в другую. Как можно видеть, есть левый столбец и правый столбец, атакже общий заголовок. Для каждой ячейки указан свой цвет фона.< /p> < table border=" 0" cellpadding=" 0" cellspacing=" 0" > < tr height=" 150px" > < td bgcolor=" #cccccc" > Этот текст выводится в верхней ячейке таблицы.< /td> < /tr> < tr height=" 500px" > < td width=" 100%" > < table border=" 0" height=" 100%" cellpadding=" 0" cellspacing=" 0" > < tr> < td bgcolor=" #dddddd" > Этот текст выводится в левом столбце. Ширина этого столбца 20%< /td> < td bgcolor=" #eeeeeee" > А этот текст выводится в правом столбце. Ширина столбца 80%< /td> < /tr> < /table> < /td> < /tr> < /table> < /body> < /html>

Пример выполнения данного HTML-кода

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

⇐ Предыдущая234567891011Следующая ⇒

Поделиться: