Вирівнювання елементів

23.09.2010

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

Завдяки можливості вирівнювання вмісту комірок таблиці одночасно по горизонталі та вертикалі, збільшуються можливості управління розташуванням елементів відносно один одного. Таблиці дозволяють задавати вирівнювання зображень, тексту, полів форми та інших елементів відносно один одного та веб-сторінки в цілому. Вирівнювання в основному потрібно для встановлення візуального зв'язку між різними елементами, а також їх групування.

Центрування по вертикалі

Одним з способів показати відвідувачеві спрямованість та назву сайту є використання сплеш-сторінки. Це перша сторінка, на якій, як правило, розміщена flash-заставка або малюнок, що виражає головну ідею сайту. Зображення також є посиланням на інші розділи сайту. Потрібно розмістити цей малюнок по центру вікна браузера незалежно від розширення монітора. Для цієї мети можна скористатися таблицею з шириною та висотою, рівною 100% (приклад 1).

Приклад 1. Центрування зображення

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Вирівнювання</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблиці */
    height: 100%; /* Висота таблиці */   
   } 
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td align="center"><img src="images/recipe.png" width="414" height="58" 
     alt="Рецепти HTML">
    </td>
   </tr>
  </table> 
 </body>
</html>

У цьому прикладі вирівнювання по горизонталі встановлюється за допомогою параметра align="center" тега <td>, а по вертикалі вміст комірки не потрібно вирівнювати, оскільки це положення задано за замовчуванням.

Для того щоб висота таблиці встановлювалась як 100%, необхідно прибрати <!DOCTYPE>, код при цьому перестає бути валідним.

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

Вирівнювання по горизонталі

За рахунок поєднання атрибутів align (горизонтальне вирівнювання) та valign (вертикальне вирівнювання) тега <td>, можна встановлювати декілька видів положень елементів відносно один одного. На малюнку 1 показані способи вирівнювання елементів по горизонталі.

Розглянемо деякі приклади вирівнювання тексту згідно з наведеним малюнком.

Вирівнювання по верхньому краю

Для вказання вирівнювання вмісту комірок по верхньому краю, для тега <td> потрібно встановити атрибут valign зі значенням top (приклад 2).

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

<!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%" cellpadding="5">
   <tr>
    <td valign="top" width="75%" bgcolor="#f0f0f0">Колонка 1</td>
    <td valign="top" width="25%" bgcolor="#ffcc00">Колонка 2</td>
   </tr>
  </table> 
 </body>
</html>

У цьому прикладі характеристики комірок керуються за допомогою параметрів тега <td>, але також зручніше змінювати через стилі. Зокрема, вирівнювання в комірках вказується властивостями vertical-align та text-align (приклад 3).

Приклад 3. Застосування стилів для вирівнювання

<!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>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблиці */
   }
   #col1 {
    width: 75%; /* Ширина першої колонки */
    background: #f0f0f0; /* Колір фону першої колонки */
   }
   #col2 {
    width: 25%; /* Ширина другої колонки */
    background: #fc5; /* Колір фону другої колонки */
    text-align: right; /* Вирівнювання по правому краю */
   }
   #col1, #col2 {
    vertical-align: top; /* Вирівнювання по верхньому краю */
    padding: 5px; /* Поля навколо вмісту комірок */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td id="col1">Колонка 1</td>
    <td id="col2">Колонка 2</td>
   </tr>
  </table> 
 </body>
</html>

Для скорочення коду в цьому прикладі використовується групування селекторів, оскільки властивості vertical-align та padding застосовуються одночасно до двох комірок.

Вирівнювання по нижньому краю робиться аналогічно, лише замість значення top використовується bottom.

Вирівнювання по центру

За замовчуванням вміст комірки вирівнюється по центру їх вертикалі, тому в разі різної висоти колонок потрібно задавати вирівнювання по верхньому краю. Іноді все ж потрібно залишити початковий спосіб вирівнювання, наприклад, при розміщенні формул, як показано на малюнку 2.

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

Приклад 4. Вирівнювання формули

<!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%">
   <tr>
    <td width="100"></td>
    <td align="center"><img src="images/formula.png" width="289" height="158" 
      alt="Формула 18.6"></td>
    <td width="100" align="right">(18.6)</td>
   </tr>
  </table> 
 </body>
</html>

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

Вирівнювання елементів форми

За допомогою таблиць зручно визначати положення полів форми, особливо, коли вони перемішуються з текстом. Один з варіантів оформлення форми, призначеної для введення коментаря, показаний на малюнку 3.

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

Приклад 5. Вирівнювання полів форми

<!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>
  <form method="post" action="handler.php">
   <table width="100%" cellspacing="0" cellpadding="4">
    <tr> 
     <td align="right" width="100">Ім'я</td>
     <td><input type="text" name="nickname" maxlength="50" size="20"></td>
    </tr>
    <tr> 
     <td align="right">E-mail</td>
     <td><input type="text" name="email" maxlength="50" size="20"></td>
    </tr>
    <tr> 
     <td align="right" valign="top">Коментар</td>
     <td><textarea name="text" cols="35" rows="10"></textarea></td>
    </tr>
    <tr> 
     <td></td>
     <td><input type="submit" value="Додати коментар"></td>
    </tr>
   </table>


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