Табличная верстка в 3 колонки

Верстка

Рисунок Табличная верстка в 3 колонки
Табличная верстка в 3 колонки Табличная верстка в 3 колонки
оценка: 5.0 из 5
оценок: 1

Поговорим о верстке сайта в 3 колонки. Многие сайты верстаются именно в таком формате. Одна колонка выдается для меню и разной навигации. Во второй колонке размещают формы входа, разные партнерки и рекламные материалы. Третяя колонка содержит сам материал. Расположение колонок каждый верстальщик подбирает сам.

Самый простой способ верстки в 3 колонки можно осуществить при помощи таблиц.

Плюсы данного метода:

  1. Простота понимания кода.
  2. Абсолютная кроссбраузерность. Никаких хаков и извращений. Будет работать в любом браузере.
  3. Высота всех колонок будет равна высоте самой высокой колонки.
  4. Возможность гибко управлять шириной каждой из колонок.

Минусы метода:

  1. Нет никакой семантической структуры страницы.
  2. Каждая следующая ячейка таблицы загружается только после полной загрузки текущей ячейки. Если в ячейке находится тяжелая картинка, то структура страницы будет искажена до полной загрузки этой картинки.
  3. Много кода.
  4. Сложности при смене дизайна.

Проанализировав все плюсы и минусы табличной верстки, могут найтись люди, которые захотят верстать свой сайт таблицами. Для них и предназначен данный материал.

Итак, основа табличной верстки в 3 колонки:

Code
<table cellpadding="0" cellspacing="0" class="wrap">
  <tr>
    <td class="col1">Колонка 1</td>
    <td class="col2">Колонка 2</td>
    <td class="col3">Колонка 3</td>
  </tr>
</table>

Для того, чтобы управлять шириной колонок, используем CSS-стили. В зависимости от требований верстки могут быть разные стили. Но все они объединяются в один основной стиль:

Code
<style type="text/css">
  .wrap{
    width: 1000px; /* ширина страницы */
    border: none;
  }
  .wrap td{
    vertical-align: top;
/* по умолчанию содержимое выравнивается по центру, отключаем это */   }
  .col1{
    background: #f00; /* необязательно */
    width: 250px; /* ширина колонки 1 */
  }
  .col2{
    background: #0f0; /* необязательно */
    width: 500px;/* ширина колонки 2 */
  }
  .col3{
    background: #00f; /* необязательно */
    width: 250px;/* ширина колонки 3 */
  }
</style>

Ширина страницы может бвть задана как в процентах, так и в пикселях. Если задать 100%, то ширина сайта будет растягиваться на всю ширину родительского блока.

Ширина колонок также может быть задана как в процентах, так и в пикселях. Если одну из колонок нужно сделать резиновой, то из стилей нужно просто удалить пункт width соответствующей колонки.

Выглядит табличная верстка в 3 колонки так:

Колонка 1 Колонка 2 Колонка 3

На этом все. Удачи в свершениях!

Не по теме. Урок по табличной верстке.

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Табличная верстка в 3 колонки
Верстка
Скрипты, инструкции, справочники

rss
Категория:Верстка
Просмотрено:4423
Рейтинг:5.0/1
Дата добавления:2013-11-15 02:01, Пятница
Добавил:Szen
Теги:таблицы, 3 колонки, колонки

Мини-форум

№ 02013-11-15 02:01
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Табличная верстка в 3 колонки".
Гость
Учавствовать в обсуждении "Табличная верстка в 3 колонки" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Какой JavaScript фреймворк вы изпользуете?
Всего ответов: 141
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 4
Гостей: 4
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz