Табличная верстка в 3 колонки
Верстка
Табличная верстка в 3 колонкиПоговорим о верстке сайта в 3 колонки. Многие сайты верстаются именно в таком формате. Одна колонка выдается для меню и разной навигации. Во второй колонке размещают формы входа, разные партнерки и рекламные материалы. Третяя колонка содержит сам материал. Расположение колонок каждый верстальщик подбирает сам.
Самый простой способ верстки в 3 колонки можно осуществить при помощи таблиц.
Плюсы данного метода:
- Простота понимания кода.
- Абсолютная кроссбраузерность. Никаких хаков и извращений. Будет работать в любом браузере.
- Высота всех колонок будет равна высоте самой высокой колонки.
- Возможность гибко управлять шириной каждой из колонок.
Минусы метода:
- Нет никакой семантической структуры страницы.
- Каждая следующая ячейка таблицы загружается только после полной загрузки текущей ячейки. Если в ячейке находится тяжелая картинка, то структура страницы будет искажена до полной загрузки этой картинки.
- Много кода.
- Сложности при смене дизайна.
Проанализировав все плюсы и минусы табличной верстки, могут найтись люди, которые захотят верстать свой сайт таблицами. Для них и предназначен данный материал.
Итак, основа табличной верстки в 3 колонки:
<tr>
<td class="col1">Колонка 1</td>
<td class="col2">Колонка 2</td>
<td class="col3">Колонка 3</td>
</tr>
</table>
Для того, чтобы управлять шириной колонок, используем 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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Табличная верстка в 3 колонки
Верстка
Скрипты, инструкции, справочники
| Категория: | Верстка |
| Просмотрено: | 8874 |
| Рейтинг: | 5.0/1 |
| Дата добавления: | 2013-11-15 02:01, Пятница |
| Добавил: | Szen |
| Теги: | таблицы, 3 колонки, колонки |
Рекомендуем
Дополнительно к Табличная верстка в 3 колонки
Мини-форум
| № 0 | 2013-11-15 02:01 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Табличная верстка в 3 колонки". |
| Гость |
