Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом, как правило, в одной колонке располагается основной материал (текст статьи, например), а во второй — ссылки на разделы сайта и другая информация. Для создания подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве отдельной колонки, что позволяет легко регулировать различные параметры отображения документа.
Ширина колонок
Для начала рассмотрим самый простой вариант, когда ширина левой колонки жестко задана в пикселах, а ширина правой колонки варьируется в зависимости от размеров окна браузера. Для этого требуется задать общую ширину всей таблицы в процентах через атрибут width тега
и для первой ячейки установить ее ширину в пикселах или процентах также с помощью атрибута width , но уже для тега
(пример 1).
Пример 1. Ширина колонки в пикселах
В данном примере граница у таблицы не отображается, а вертикальное выравнивание содержимого ячеек по верхнему краю определяется атрибутом valign со значением top . Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края.
Атрибуты width и valign можно заменить стилевыми свойствами width и vertical-align с теми же значениями. Тогда данный код будет иметь следующий вид (пример 2).
Пример 2. Использование стилей
Поля внутри колонок
Расстояние между колонками регулируется атрибутом cellpadding тега
. Поскольку cellpadding определяет расстояние от границы ячейки до края ее содержимого, то пространство между содержимым разных колонок будет равно удвоенному значению этого параметра. Используя стили, в частности, свойство padding , можно легко регулировать значение отступа для каждой колонки (пример 3).
Пример 3. Использование полей
В данном примере значения атрибутов cellspacing и cellpadding равны нулю, а расстояние между содержимым колонок определяется свойством padding-right , который добавляется к левой ячейке через идентификатор с именем leftcol .
Аналогично отступы можно регулировать не только справа, но и с других сторон каждой ячейки. В примере 4 показано, как устанавливать поля для всех ячеек через стили.
Пример 4. Поля в ячейках
Цвет фона колонок
Чтобы визуально отделить одну колонку от другой используют разные приемы, самым распространенным из них, пожалуй, является использование фонового цвета. Лучше указывать цвет через стили, это позволяет вынести оформление страницы в отдельный файл. Для этого создаем новый стилевой класс, устанавливаем для него свойство background и применяем его к требуемой ячейке (пример 5).
Пример 5. Цвет фона
В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 1).
Рис. 1. Колонки разного цвета
Разделитель колонок
Использование полей не всегда подходит для установки нужного расстояния между колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает в качестве разделителя между колонками (пример 6).
Пример 6. Использование трех ячеек
В данном примере вводится еще одна колонка со стилевым идентификатором spacer , это позволяет легко менять ширину между колонками. Внутрь этой ячейки можно ничего не вкладывать, браузеры достаточно корректно работают с подобными ячейками.
На рис. 2 показан результат примера. Для наглядности и «красоты» вокруг колонок добавлена граница.
Рис. 2. Расстояние между колонками
Линия между колонками
Разделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Опять же, здесь пригодятся стили, с помощью которых создание линий значительно упрощается. Следует только установить свойство border-left для правой колонки или border-right для левой (пример 7).
Пример 7. Добавление линии
Результат данного примера показан ниже.
Рис. 3. Линия между колонок
Резюме
Создание колонок с помощью таблиц процесс достаточно простой и быстрый, следует только добавить таблицу с двумя ячейками и определить ее визуальные атрибуты. К тому же большинство параметров, определяющих вид таблицы, можно вынести в стили и таким образом ускорить процесс добавления однотипных таблиц и документов на их основе.
При двухколонном макете применяются разные средства по оформлению колонок. Например, используется фоновая заливка, добавляется рамка вокруг колонок, изменяется расстояние между ними или устанавливается вертикальная разделительная линия. Все эти вещи управляются с помощью стилей, что ведет к сокращению кода, расширяет варианты модификаций таблиц и удобству разработки сайта.
Источник
Две колонки, навигация справа
Рассмотрим вариант создания двухколонного макета с помощью абсолютного позиционирования. При таком варианте одна колонка располагается как обычно, а координаты второй колонки задаются относительно верхнего правого или левого угла окна браузера. Поскольку слой заданный абсолютно накладывается поверх остального содержимого документа, то под него требуется оставить место путем добавления отступов. На рис. 1 показан вид веб-страницы, когда меню располагается в правой колонке, а основной текст — в левой.
Рис. 1. Веб-страница с навигацией в правой колонке
Для создания подобных колонок используем два слоя, стиль которых приведен в примере 1.
Пример 1. Двухколонный макет
Для левой колонки задаем отступ слева через свойство margin-right , оно включает в себя ширину правой колонки, ее положение от правого края окна браузера плюс расстояние между колонками. Для правой колонки устанавливаем абсолютное позиционирование с помощью свойства position: absolute , а положение самого слоя управляется через right и top . Их значения подбираются опытным путем в зависимости от вида макета и желания разработчика.
Нижнее закругление в правой колонке делается при помощи рисунка. Вначале готовим подходящее изображение с прозрачным участком, как показано на рис. 2.
Рис. 2. Картинка для создания закругления внизу колонки
Ширина изображения должна быть несколько больше ширины колонки, это связано с тем, что в разных браузерах ширина колонки может незначительно различаться. Поэтому и требуется сделать небольшой «запас».
Прозрачность, помеченная на рисунке шахматным полем, необходима для быстрого и удобного изменения цвета фона колонки. Зеленым цветом на данном рисунке обозначен цвет фона веб-страницы. Чтобы на границе совмещения цветов не возникал паразитный оттенок, рекомендуется отключить сглаживание и установить только два цвета — прозрачный и фона. За счет этого получается характерная «лесенка», которая хорошо заметна при увеличении изображения (рис. 3).
Рис. 3. Увеличенный фрагмент картинки
В примере 2 приведен стиль для добавления рисунка к нижней части колонки.
Пример 2. Рисунок в качестве фона
За счет того, что в рисунке использовалась прозрачность, цвет колонки легко менять через универсальный атрибут background . С помощью него же задается путь к изображению и его положение относительно края слоя. По умолчанию фон повторяется по вертикали и горизонтали, так что требуется отключить эту возможность через аргумент no-repeat . К нижнему краю текста колонки также необходимо добавить отступ паpaметром padding-bottom , ведь нижняя граница скругленная и текст не должен на нее «наступать».
Окончательный код для создания двухколонного макета, показанного на рис. 1, приведен в примере 3.
Пример 3. Двухколонный макет
При создании подобного макета, следует принимать во внимание, что слой с абсолютным позиционированием накладывается поверх остальных элементов документа. Поэтому в данном примере содержимое правой колонки меньше, чем левой. Иначе меню отобразилось бы поверх «подвала» веб-страницы, что выглядит нелогично и некрасиво.
Источник
Колонки таблицы
Чтобы взгляд читателя скользил по данным, представленным в колонках таблицы, не перескакивая на соседний раздел, колонки удобно выделить цветом фона или вертикальными линиями. При этом цвет четных и нечетных колонок может различаться.
Поскольку формирование таблицы происходит по строкам, а не по колонкам, то для изменения вида колонок приходится задавать стиль практически для каждой ячейки. В этом случае удобно использовать разные классы — один для ячеек четных колонок, а второй — для нечетных. На рис. 1 показана таблица, которая формируется именно таким способом.
Рис. 1. Таблица с выделенными колонками
Цвет нечетных колонок можно задать путем добавления стилевых свойств к селектору TABLE , а для четных колонок введем новый класс, назовем его even . Первая колонка обычно используется для заголовков строк, поэтому для нее имеет смысл задать стиль, отличный от стиля остальных ячеек. В данном случае вводим еще один класс, назовем его lc и для него определим выравнивание по левому краю и цвет текста (пример 1). Остается для ячеек первой колонки добавить к тегу
атрибут class=»lc» , а для ячеек четных колонок class=»even» .
Пример 1. Колонки разного цвета
Чтобы отделить первую строку с заголовком от данных таблицы в примере используется двойная линия. Она получается за счет добавления свойства border-bottom к селектору TH .
Рассмотрим еще один способ формирования вида колонок — не только за счет разного цвета фона, но и применением линий между колонками (рис. 2).
Рис. 2. Выделение колонок с помощью линий и цвета
Структура кода останется практически той же, что была показана в примере 1. А именно, для ячеек четных колонок используем класс even , а для первой колонки — класс lc . Чтобы установить линию между колонками, к селектору TD добавляем свойство border-left , оно создает линию слева от ячейки. Однако при этом возникнет ненужная линия слева в первой колонке, поэтому для класса lc используем border: none , это свойство уберет лишние границы (пример 2).
Пример 2. Линии между колонками
К сожалению, работа с колонками таблицы не так удобна, как хотелось бы. Если применять стили, то фактически все ячейки таблицы пестрят указаниями на определенный стилевой класс. За счет этого снижается удобство по расширению табличных данных и повышается объем кода. Существуют специальные теги и призванные облегчить работу с колонками таблицы. Но их возможности ограничены, да и нужный результат будет отображаться не во всех браузерах. Так что на данном этапе для создания таблиц желаемого вида приходится обращаться к стилям.
Источник
Макет из трех колонок
Использование трех колонок на страницах сайта обусловлено широтой информации, которую требуется показать посетителю. Обычно одна колонка, самая широкая, отдается под текст основного материала, статьи, например, а остальные колонки применяются для ссылок, рекламы, анонсов и т.д.
Принцип создания трехколонной модульной сетки с помощью таблицы аналогичен созданию двухколонной сетки, поэтому остановимся лишь на некоторых моментах.
Ширина колонок в пикселах
Ширина разных колонок зависит от используемого макета — фиксированного или «резинового». При макете фиксированной ширины общая ширина таблицы задается в пикселах и остается постоянной независимо от разрешения монитора и размера окна браузера. При этом ширину отдельных колонок также имеет смысл установить в пикселах. В примере 1 ширина макета задана как 750 пикселов, а колонки соответственно 150, 400 и 200 пикселов.
Пример 1. Фиксированная ширина колонок
При определении ширины колонок следует принимать во внимание значение атрибута cellpadding . На ширину ячеек этот аргумент не влияет, но зато уменьшает область, которая отводится под содержимое ячеек.
Ширину всех ячеек в подобном случае задавать не обязательно. Так, если не указать ширину одной ячейки, то она будет вычислена автоматически исходя из общей ширины таблицы и ширины остальных ячеек. В других случаях, например, когда не установлена ширина двух ячеек, их размер определяется по содержимому. Поскольку содержимое ячеек варьируется от страницы к странице, то ширина также будет «плавать». Это, по-английски говоря, not good (для тех, кто не понял, нехорошо), поскольку вид документов должен оставаться единым. Так что ширину колонок лучше все-таки задавать.
Ширина колонок в процентах
При «резиновом» макете ширина таблицы устанавливается в процентах от ширины окна браузера и, таким образом, напрямую зависит от нее. Здесь возможны два варианта:
ширина всех ячеек задана в процентах;
сочетание процентов и пикселов, когда ширина одних ячеек устанавливается в процентах, а других — в пикселах.
В первом случае вначале устанавливается ширина всей таблицы в процентах, а затем ширина отдельных ячеек (пример 2). Причем в сумме ширина ячеек должна получиться 100%, несмотря на то, что размер таблицы может быть иным. Дело в том, что ширина таблицы вычисляется относительно доступного пространства веб-страницы, а размер ячеек устанавливается относительно всей таблицы в целом.
Пример 2. Ширина колонок в процентах
Для удобства изменения вида колонок параметры в данном примере перенесены в стили.
Процентная запись для таблиц имеет ряд преимуществ — используется все свободное пространство веб-страницы, а сам макет подстраивается под ширину окна браузера. Вместе с тем каждая таблица имеет некоторый минимальный размер, при достижении которого таблица уже не уменьшается и начинает отображаться горизонтальная полоса прокрутки. Такой минимальный размер зависит от содержимого таблицы. Если, например, в каждую из трех ячеек поместить по рисунку шириной 200 пикселов, то общая ширина таблицы не может быть меньше 600 пикселов плюс значения полей вокруг изображений.
Сочетание процентов и пикселов
Рассмотрим два основных варианта, когда для задания ширины колонок одновременно применяются проценты и пикселы. Первый вариант состоит в том, что размер крайних колонок устанавливается в пикселах, а ширина средней колонки вычисляется автоматически, исходя из заданной ширины таблицы (рис. 1).
Рис. 1. Ширина средней колонки определяется браузером
Для создания подобного макета понадобится таблица с тремя ячейками. Ширину первой и третьей ячейки устанавливаем в пикселах, а ширину средней ячейки намеренно не задаем (пример 3). При этом обязательно следует определить общую ширину всей таблицы.
Пример 3. Ширина колонок в процентах и пикселах
Во втором варианте ширина двух колонок устанавливается в процентах, а третьей — в пикселах. В подобном случае обойтись одной таблицей не удастся. Сами посудите, если ширина всей таблицы равна 100%, первой колонки — 200 пикселов, а оставшихся колонок по 20%, то простое вычисление показывает, что размер первой колонки получается равным 60%. Поэтому заданное значение в пикселах браузером будет проигнорировано, а размер установлен в процентах.
На рис. 2 показана схема расположения вложенных таблиц относительно друг друга.
Рис. 2. Применение вложенных таблиц
Вначале создаем таблицу заданного размера и с двумя ячейками. Левая ячейка будет выступать в роли первой колонки, и для нее устанавливаем требуемую ширину в пикселах. Ширину для правой ячейки не определяем, поэтому она будет занимать оставшееся пространство, а также служить каркасом для других колонок. Внутрь этой ячейки добавляем вторую таблицу, тоже состоящую из двух ячеек. И уже для них определяем ширину в процентах (пример 4).
Пример 4. Вложенные таблицы
При создании подобного макета следует принимать во внимание следующие моменты.
Ширина внутренней таблицы должна быть задана как 100%, чтобы эта таблица занимала все свободное пространство.
Для того чтобы ячейки плотно прилегали друг к другу, для внешней таблицы необходимо обнулить значение атрибутов cellpadding и cellspacing . Поля можно устанавливать через свойство padding , как показано в данном примере.
Ширина второй и третьей колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом. Поэтому значение 60% в примере следует расценивать не как ширину колонки относительно всего макета, а лишь как ширину относительно внутренней таблицы.
