5.3 Верстка страницы - HTML - Каталог статей

5.3 Верстка страницы

Урок №5: Таблицы (часть 1)

Таблицы часто используются web-дизайнерами не по своему прямому назначению, а для разметки структуры страницы в целом. Как, например, можно расположить информацию на странице в несколоко колонок (как в газете)? Выход - создать таблицу из одной строки и нескольких ячеек. В ячейках расположить информацию (абзацы, заголовки, рисунки, списки, другие таблицы...).

Рассмотрим сокращенный код примера разбиения на колонки:

Листинг №5.3.1: Разбиение на колонки

<body style="...">
 <div style="text-align: center;">
 <table width="750" cellspacing="0" cellpadding="10" border="0">
 <!-- Общая часть. Какое-то вступление, расположенное по центру -->
 <thead>
 <tr>
 <td colspan="2"> ... </td>
 </tr>
 </thead>
 <!-- Далее идет разбиение на колонки -->
 <tbody valign="top">
 <tr>
 <!-- 1-я колонка -->
 <td> ... </td>
 <!-- 2-я колонка -->
 <td> ... </td>
 </tr>
 <tbody> 
 ...

Запустив пример, вы увидите на странице статью, собранную по довольно типичному для газет щаблону. Сверху по центру заголовок и вступительная часть, затем, информационная часть, разбитая на колонки и, наконец, заключительная чать, содержащая информацию об авторе. Я воспроизвел этот результат с помощью таблицы следующего вида:

Общий заголовок
Колонка 1	Колонка 2
Заключительная часть

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

Категория: HTML | Добавил: slava (18.07.2009)

Просмотров: 1134 | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]