Макет з трьох колонок
Використання трьох колонок на сторінках веб-сайту обумовлено обсягом інформації, яку потрібно показати відвідувачу. Зазвичай одну колонку, найширшу, відводять під основний матеріал, наприклад, статтю, а інші колонки використовуються для посилань, реклами, анонсів тощо.
Принцип створення трьохколоночної модульної сітки за допомогою таблиці аналогічний створенню двоколоночної сітки, тому зупинимося лише на деяких моментах.
Ширина колонок в пікселях
Ширина різних колонок залежить від використаного макету — фіксованого або "резинового". При фіксованому макеті загальна ширина таблиці вказується в пікселях і залишається постійною незалежно від роздільної здатності монітора та розміру вікна браузера.
Приклад 1. Фіксована ширина колонок
При визначенні ширини колонок слід враховувати значення атрибута cellpadding. На ширину комірок цей аргумент не впливає, але зменшує область, що відводиться під вміст комірок.
Зазначення ширини всіх комірок не є обов'язковим. Так, якщо не вказати ширину однієї комірки, вона буде обчислена автоматично на основі загальної ширини таблиці та ширини інших комірок.
Ширина колонок в відсотках
При "резиновому" макеті ширина таблиці задається відсотках від ширини вікна браузера. Тут можливі два варіанти: всі комірки задані в відсотках або поєднання відсотків і пікселів.
Приклад 2. Ширина колонок в відсотках
Для зручності зміни вигляду колонок параметри в цьому прикладі внесені в стилі.
Використання відсотків для таблиці має свої переваги — використовується весь вільний простір веб-сторінки, а макет підлаштовується під ширину вікна браузера.
Поєднання відсотків і пікселів
Розглянемо два основні варіанти, коли для визначення ширини колонок одночасно використовуються відсотки та пікселі. Перший варіант полягає в тому, що розмір крайніх колонок встановлюється в пікселях, а ширина середньої колонки обчислюється автоматично.
Для створення такого макета потрібна таблиця з трьома комірками. Ширину першої та третьої комірок встановлюємо в пікселях, а ширину середньої комірки не вказуємо наміренно.
Приклад 3. Ширина колонок в відсотках і пікселях