Аннотация и статус данного документа
Уже неоднократно говорилось о том, что таблицы не должны использоваться для визуальной разметки документа. Этот документ показывает возможность создания 3-х столбцовой разметки с использованием только технологии CSS.
Пожалуйста присылайте комментарии и предложения Dominique Hazaлl-Massieux. Переводы данной статьи.
Введение
HTML - это язык структурирования, что обозначает его использование в качестве инструмента разметки текста через использование тэгов. Тэг table должен использоваться только тогда, когда мы имеем дело с табличными данными с строками и столбцами.
Но с чрезмерно частым применением таблиц HTML для визуальной разметки, использование этого тэга разбивает страницу на столбцы. Помимо того, что подобная разметка неверна по смыслу предназначения языка HTML, она вредит в ряде случаев, например при отображении содержимого страницами браузерами для людей с ограниченными возможностями или браузерами с рядом ограничений по отображению содержимого.
Этот документ описывает возможность создания 3-х столбцового шаблона и ссылается на ряд других приемов верстки.
Описание разметки
Способ, описанный здесь - один из использованных на странице для новых пользователей W3C. Он позволяет построить 3-х колоночную верстку со следующими особенностями:
- текст в центре на странице идет первым в коде, что обозначает что этот текст будет прочитан первым без подключения соответствующей таблицы стилей CSS или в невизуальном браузере
- далее по-порядку идут левый и правый столбцы
Такая верстка идеальна для страниц, потому что позволяет иметь полноценный текст по центру и удобные списки ссылок по бокам.
Одно из ограничений подобной верстки - она не работает в браузерах, чья поддержка CSS реализована плохо, однако в этом случае страница останется читаемой в одну колонку в порядке очередности текста в HTML разметке.
Чтобы вы получили представления о том, как выглядит подобная разметка, она применена непосредственно к этой странице, которую вы читаете.
Реализация
Данная разметка использует абсолютное позиционирование CSS. Если мы поделим HTML страницу на 3 части при помощи
<div id="main">, <div
id="list1" class="link-list">, <div id="list2" class="link-list">, то мы можем применить следующие правила CSS по отношению к этим частям:
/* Свойства, общие для левого и правого столбцов */
div.link-list {
width:10.2em;
position:absolute;
top:0;
font-size:80%;
padding-left:1%;
padding-right:1%;
margin-left:0;
margin-right:0;
}
/* мы отодвигаем левую часть main, используя свойство margin-* */
#main {
margin-left:10.2em;
margin-right:10.2em;
padding-left:1em;
padding-right:1em;
}
/* затем помещаем каждую часть на место */
#list1 {
left:0;
}
#list2 {
right:0;
}
Основной идеей данного метода является обрезание центрального столбца по сторонам используя свойства
margin-left и margin-right, и дальнейшее позиционирование столбцов свойством
position:absolute, устанавливая координаты верхнего левого и верхнего правого углов в (0,0).
Во избежание плохой реализации CSS при прочтении таблицы стилей, присоединяйте таблицу через <style type="text/css">@import
url('your-stylesheet-url');</style>.