Макет з двома колонками

Влад Мержевич

Двоколоночна модульна сітка часто використовується на веб-сайтах, де одна колонка містить основний матеріал (текст статті), а друга - посилання на розділи сайту та іншу інформацію. Для створення подібного макету таблиці зручно використовувати - кожна комірка виступає як окрема колонка, що дозволяє легко налаштовувати різні параметри відображення документа.

Ширина колонок

Для початку розглянемо найпростіший варіант, коли ширина лівої колонки жорстко задана в пікселях, а ширина правої колонки змінюється залежно від розмірів вікна браузера. Для цього потрібно встановити загальну ширину всієї таблиці у відсотках через атрибут width тега <table> і для першої комірки встановити її ширину в пікселях або відсотках також за допомогою атрибута width, але вже для тега <td> (приклад 1).

Приклад 1. Ширина колонки в пікселях

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Дві колонки</title>
 </head>
 <body>
  <table width="100%" cellspacing="0" cellpadding="5">
   <tr> 
    <td width="200" valign="top">Ліва колонка</td><td valign="top">Права колонка</td>
   </tr>
  </table>
 </body>
</html>

У цьому прикладі рамка таблиці не відображається, а вертикальне вирівнювання вмісту комірок по верхньому краю визначається атрибутом valign зі значенням top. Це необхідно для того, щоб при різній кількості вмісту комірок вони не зсувалися відносно один до одного, а починалися рівно з верхнього краю.

Атрибути width і valign можна замінити стильовими властивостями width і vertical-align з тими ж значеннями. Тоді цей код матиме наступний вигляд (приклад 2).

Приклад 2. Використання стилів

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Дві колонки</title>
  <style type="text/css">
   #maket {
    width: 100%; /* Ширина всієї таблиці в відсотках */
   }
   #maket TD {
    vertical-align: top; /* Вертикальне вирівнювання в комірках */
   }
   TD#leftcol {
    width: 200px; /* Ширина лівої колонки в пікселях */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0" cellpadding="0" id="maket">
   <tr> 
    <td id="leftcol">Ліва колонка</td><td>Права колонка</td>
   </tr>
  </table>
 </body>
</html>

Поля всередині колонок

Відстань між колонками регулюється атрибутом cellpadding тега <table>. Оскільки cellpadding визначає відстань від межі комірки до краю її вмісту, то простір між вмістом різних колонок буде дорівнювати подвоєному значенню цього параметра. Використовуючи стилі, зокрема властивість padding, можна легко регулювати значення відступу для кожної колонки (приклад 3).

Приклад 3. Використання полів

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Дві колонки</title>
  <style type="text/css">
   #leftcol {
    padding-right: 10px; /* Поле справа від тексту */
    vertical-align: top; /* Вирівнювання по верхньому краю комірок */
    width: 200px; /* Ширина колонки */ 
   }
  </style>
 </head>
 <body>
  <table width="100%" cellspacing="0" cellpadding="0">
   <tr> 
    <td id="leftcol">Ліва колонка</td><td>Права колонка</td>
   </tr>
  </table>
 </body>
</html>

У цьому прикладі значення атрибутів cellspacing і cellpadding дорівнюють нулю, а відстань між вмістом колонок визначається властивістю padding-right, яка додається до лівої комірки за допомогою ідентифікатора з іменем leftcol.

Аналогічно відступи можна регулювати не тільки справа, але і з інших сторін кожної комірки. У прикладі 4 показано, як встановлювати поля для всіх комірок через стилі.

Приклад 4. Поля в комірках

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Дві колонки</title>
  <style type="text/css">
   #maket TD {
    padding: 5px; /* Поля навколо вмісту комірок */
    vertical-align: top; /* Вирівнювання по верхньому краю комірок */
    width: 200px; /* Ширина колонки */
   }
  </style>
 </head>
 <body>
  <table width="100%" cellspacing="0" id="maket">
   <tr> 
    <td id="leftcol">Ліва колонка</td>
    <td valign="top">Права колонка</td>
   </tr>
  </table>
 </body>
</html>

Колір фону колонок

Для візуального виділення однієї колонки від іншої використовують різні прийоми, найбільш поширеним з них, мабуть, є використання фонового кольору. Краще вказувати колір через стилі, це дозволяє винести оформлення сторінки в окремий файл. Для цього створюємо новий стилевий клас, встановлюємо для нього властивість background і застосовуємо його до необхідної комірки (приклад 5).

Приклад 5. Колір фону

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Дві колонки</title>
  <style type="text/css">
   #maket {
    width: 100%; /* Ширина всієї таблиці */
   }
   TD {
    vertical-align: top; /* Вертикальне вирівнювання в комірках */
    padding: 5px; /* Поля навколо комірок */
   }
   TD#leftcol {
    width: 200px; /* Ширина лівої колонки */
    background: #ccc; /* Колір фону лівої колонки */
   }
   TD#rightcol {
    background: #fc3; /* Колір фону правої колонки */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0" id="maket">
   <tr> 
    <td id="leftcol">Ліва колонка</td>
    <td id="rightcol">Права колонка</td>
   </tr>
  </table>
 </body>
</html>

У цьому прикладі різний колір фону додається для правої і лівої колонок.

Роздільник колонок

Використання полів не завжди підходить для встановлення потрібної відстані між колонками. Наприклад, у випадку, коли поля навколо тексту не можна включити з-за різних причин. Тоді допоможе додавання ще однієї комірки, яка виступає в якості роздільника між колонками (приклад 6).

Приклад 6. Використання трьох комірок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Дві колонки</title>
  <style type="text/css">
   #maket {
    width: 100%; /* Ширина всієї таблиці */
   }
   TD {
    vertical-align: top; /* Вертикальне вирівнювання в комірках */
    padding: 5px; /* Поля навколо комірок */
   }
   TD#leftcol {
    width: 200px; /* Ширина лівої колонки */
    background: #ccc; /* Колір фону лівої колонки */
    border: 1px solid #000; /* Параметри рамки */
   }
   TD#rightcol {
    background: #fc3; /* Колір фону правої колонки */
    border: 1px solid #000; /* Параметри рамки */
   }
   #spacer {
    width: 10px; /* Відстань між колонками */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0" id="maket">
   <tr> 
    <td id="leftcol">Ліва колонка</td>
    <td id="spacer"></td>
    <td id="rightcol">Права колонка</td>
   </tr>
  </table>
 </body>
</html>

У цьому прикладі вводиться ще одна комірка зі стилевим ідентифікатором spacer,

Часті запитання