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

Многие с известной осторожностью относятся к использованию связки: overflow:hidden; и margin-bottom:-3000px;padding-bottom:3000px;, но если разобраться, то нет особых причин опасаться часто не предсказуемого, на первый взгляд, поведения популярных браузеров. Нюансы в наличии имеются, но, тем не менее, все проблемы решаемы.

Стремясь к наиболее простой, легко повторяемой глобальной разметке web-страницы, перебрав по началу, а уж потом и самостоятельно разработав некоторые варианты оной, в конце концов, остановился на таком. Первоначальная версия опубликована в статье Запасной козырь в рукаве, никогда… с примерами в качестве бонуса.

Из этих примеров, берем только центральную часть, и никто не помешает нам сделать практически полный аналог таблицы. Разумеется, не стоит использовать описанный ниже пример везде и всюду, для отображения табличных данных лучше таблиц еще ничего не придумано. Речь пойдет о том, как с применением этой технологии разметить web-страницу в особо трудных случаях, не прибегая собственно к таблицам.

html-код прост и незамысловат, приведен только один слой, в терминологии таблицы строка, состоящая из трех ячеек:

<div id="wrap">
  <div class="center">
    <div class="content">Content</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
</div>

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

Поведение данного слоя:

1. Колонки одинаковой высоты, равные по высоте той, в которой максимум информации
2. Не зависимый фон или фоновая графика
3. Наличие разделительных вертикальных линий, обычный border
4. Возможность произвольного задания ширины колонок
5. Объединение колонок в разных комбинациях
6. Легкая организация резиновой области контента

Вот собственно и все. В данном конкретном случае макет имеет фиксированную ширину. Некоторые подробности в теле самой страницы.