Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом, как правило, в одной колонке располагается основной материал (текст статьи, например), а во второй — ссылки на разделы сайта и другая информация. Для создания подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве отдельной колонки, что позволяет легко регулировать различные параметры отображения документа.
Ширина колонок
Для начала рассмотрим самый простой вариант, когда ширина левой колонки жестко задана в пикселах, а ширина правой колонки варьируется в зависимости от размеров окна браузера. Для этого требуется задать общую ширину всей таблицы в процентах через атрибут 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. Линия между колонок
Резюме
Создание колонок с помощью таблиц процесс достаточно простой и быстрый, следует только добавить таблицу с двумя ячейками и определить ее визуальные атрибуты. К тому же большинство параметров, определяющих вид таблицы, можно вынести в стили и таким образом ускорить процесс добавления однотипных таблиц и документов на их основе.
При двухколонном макете применяются разные средства по оформлению колонок. Например, используется фоновая заливка, добавляется рамка вокруг колонок, изменяется расстояние между ними или устанавливается вертикальная разделительная линия. Все эти вещи управляются с помощью стилей, что ведет к сокращению кода, расширяет варианты модификаций таблиц и удобству разработки сайта.
Источник
Макет из двух колонок
Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом, как правило, в одной колонке располагается основной материал (текст статьи, например), а во второй — ссылки на разделы сайта и другая информация. Для создания подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве отдельной колонки, что позволяет легко регулировать различные параметры отображения документа.
Ширина колонок
Для начала рассмотрим самый простой вариант, когда ширина левой колонки жестко задана в пикселах, а ширина правой колонки варьируется в зависимости от размеров окна браузера. Для этого требуется задать общую ширину всей таблицы в процентах через атрибут width тега
и для первой ячейки установить её ширину в пикселах или процентах также с помощью атрибута width , но уже для тега
(пример 2.16).
Пример 2.16. Ширина колонки в пикселах
XHTML 1.0 IE Cr Op Sa Fx
В данном примере граница у таблицы не отображается, а вертикальное выравнивание содержимого ячеек по верхнему краю определяется атрибутом valign со значением top . Это требуется для того, чтобы при разном объеме содержимого ячеек, они не сдвигались бы относительно друг друга, а начинались одинаково от верхнего края.
Переведём все используемые атрибуты таблицы в стилевые свойства. Тогда данный код будет иметь следующий вид (пример 2.17).
Пример 2.17. Использование стилей
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Цвет фона колонок
Чтобы визуально отделить одну колонку от другой используют разные приемы, самым распространенным из них, пожалуй, является использование фонового цвета. Для этого создаём новый стилевой класс, устанавливаем для него свойство background и применяем его к требуемой ячейке (пример 2.18).
Пример 2.18. Цвет фона
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
В данном примере разный цвет фона добавляется для правой и левой колонки (рис. 2.21).
Рис. 2.21. Колонки разного цвета
Разделитель колонок
Использование полей не всегда подходит для установки нужного расстояния между колонок. Например, в случае, когда поля вокруг текста нельзя включать в силу разных соображений. Тогда поможет добавление еще одной ячейки, которая выступает в качестве разделителя между колонками (пример 2.19).
Пример 2.19. Использование трех ячеек
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
В данном примере вводится еще одна колонка с именем spacer , это позволяет легко менять ширину между колонками. Внутрь этой ячейки можно ничего не вкладывать, браузеры достаточно корректно работают с подобными ячейками.
На рис. 2.22 показан результат примера. Для наглядности и «красоты» вокруг колонок добавлена граница.
Рис. 2.22. Расстояние между колонками
Линия между колонками
Разделять колонки можно не только с помощью цвета фона и пустого пространства, но и добавлением линии между колонок. Для создания линии необходимо установить свойство border-left для правой колонки или border-right для левой (пример 2.20).
Пример 2.20. Добавление линии
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан ниже (рис. 2.23).
Рис. 2.23. Линия между колонок
Создание двух колонок с помощью таблиц процесс достаточно простой и быстрый, следует только включить таблицу с двумя ячейками и определить их параметры. Например, задать фоновую заливку ячеек, добавить рамку вокруг ячеек, изменить расстояние между ними или установить вертикальную разделительную линию.
Источник
Колонки таблицы
Чтобы взгляд читателя скользил по данным, представленным в колонках таблицы, не перескакивая на соседний раздел, колонки удобно выделить цветом фона или вертикальными линиями. При этом цвет четных и нечетных колонок может различаться.
Поскольку формирование таблицы происходит по строкам, а не по колонкам, то для изменения вида колонок приходится задавать стиль практически для каждой ячейки. В этом случае удобно использовать разные классы — один для ячеек четных колонок, а второй — для нечетных. На рис. 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. Линии между колонками
К сожалению, работа с колонками таблицы не так удобна, как хотелось бы. Если применять стили, то фактически все ячейки таблицы пестрят указаниями на определенный стилевой класс. За счет этого снижается удобство по расширению табличных данных и повышается объем кода. Существуют специальные теги и призванные облегчить работу с колонками таблицы. Но их возможности ограничены, да и нужный результат будет отображаться не во всех браузерах. Так что на данном этапе для создания таблиц желаемого вида приходится обращаться к стилям.
Источник
Особенности таблиц
При верстке с помощью таблиц необходимо знать некоторые особенности, которые присущи таблицам. Это нужно для того, чтобы понимать, как построить макет в том или ином случае, создать эффективный код и не допустить откровенных ляпов в работе. Считается, что табличная верстка проще, чем другими методами, например, с помощью слоев. Однако таблицы тоже таят в себе множество хитростей, которые, так или иначе, влияют на отображение страницы.
Ширина таблицы
Ширина таблицы, если она явно не указана, устанавливается браузером автоматически исходя из содержимого ячеек. Когда таблица применяется для создания опорной сетки на странице, такой подход нежелателен, поскольку зависит от переменных данных. Поэтому ширину таблицы указывают всегда — в процентах, если используется «резиновый» макет или в пикселах для макета фиксированной ширины.
Ширина ячеек
Ширина ячеек определяется атрибутом width тега
, причем устанавливать это значение требуется в том случае, если ширина ячейки должна быть задана.
Рассмотрим на примере тот случай, когда размер ячеек нужно указать. Предположим, что нам требуется создать на веб-странице две колонки, одна из них должна иметь размер 200 пикселов, а вторая занимать оставшееся место. Создаем таблицу с двумя ячейками и для левой ячейки задаем параметр width=»200″ (пример 1). Единицы измерения ставить не нужно, браузер сам понимает, что если задано число, значит, используются пикселы.
Пример 1. Ширина ячеек
Поскольку в данном примере ширина таблицы указана как 100%, таблица будет занимать всю свободную ширину окна браузера. При этом левая колонка берет под себя 200 пикселов, а правая — оставшееся свободное место.
Ширина ячейки иной раз может меняться, несмотря на то, что указана жестко. Это происходит, например, в том случае, если в ячейку добавили рисунок, размер которого превышает ширину ячейки. Чтобы вместить изображение, ячейка будет вынуждена раздаться. Также может повлиять на размер ячейки ее текстовое содержимое, которое содержит очень длинное слово.
Чтобы избежать указанной ситуации применяют несколько средств.
Не добавляют в ячейку фиксированной ширины те изображения, размер которых превышает ширину ячейки. Способ, конечно, звучит банально, тем не менее, зная особенности ячеек, можно избежать неприятностей с их отображением.
Для тега
используют стилевое свойство table-layout со значением fixed . Применение этого свойства позволяет обрезать рисунок, если он не помещается целиком в ячейку (пример 2).
Пример 2. Свойство table-layout
Результат данного примера показан на рис. 1.
Рис. 1. Отображение рисунка при использовании свойства table-layout
Современные браузеры (Firefox 3+, Internet Explorer 8+, Chrome и Safari) несколько иначе показывают таблицу (рис. 2).
Рис. 2. Отображение рисунка в браузере Safari
Воспользоваться стилевым свойством overflow со значением scroll . Это свойство добавляет полосы прокрутки к содержимому, но из-за того, что он применяется к блочным элементам им нельзя воспользоваться для тега
. Поэтому приходится вкладывать внутрь ячейки тег
Пример 3. Полосы прокрутки в ячейках
Результат данного примера показан на рис. 3.
Рис. 3. Отображение рисунка при использовании свойства overflow
Содержимое ячеек
Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причем пробел в расчет не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.
Старые браузеры не отображали цвет фона пустых ячеек вида , поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел ( ). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил прозрачный рисунок размером в один пиксел. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.
К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла. Браузеры достаточно корректно работают с таблицами и без присутствия содержимого ячеек.
Объединение ячеек
Предположим, что нам потребовалось использовать объединение некоторых ячеек в таблице, как, например, показано ниже. Причем высота оранжевой и серой ячейки жестко задана и равна 30 пикселам.
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Для наглядности код этой таблицы приведен в примере 4.
Пример 4. Таблица с объединенными ячейками
Хотя высота оранжевой ячейки вроде как указана фиксированной, она может произвольно меняться в зависимости от объема информации в других ячейках. Подобная неприятность замечена в некоторых браузерах.
При повышении сложности таблицы за счет увеличения числа ячеек и их объединений, растет вероятность и повышения ошибок при отображении документа. За счет этого объединение ячеек по вертикали применяют достаточно редко и в том случае, когда высота ячеек не оказывает существенного влияния на макет страницы.
Чтобы все-таки получить нужный результат, одну таблицу разбивают на несколько мелких таблиц или вкладывают таблицу внутрь ячейки другой таблицы. Вложенные таблицы получили свое распространение именно по той причине, что дают устойчивый и однообразный результат.
Скорость загрузки таблицы
Пока таблица не загрузится полностью, ее содержимое не начнет отображаться. Дело в том, что браузер, прежде чем показать содержимое таблицы, должен вычислить необходимые размеры ячеек, их ширину и высоту. А для этого необходимо знать, что в этих ячейках находится. Поэтому браузер и ожидает, пока загрузится все, что находится в ячейках, и только потом отображает таблицу.
Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 кБ). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout , применение которого позволяет несколько повысить скорость отображения содержимого таблицы.
