Об'ємна таблиця

23.09.2010

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

Ефект об'ємності таблиці досягається за рахунок одночасного використання світлих і темних кольорів у рамці або комірках, при цьому виникає ілюзія, що таблиця виступає над фоном веб-сторінки. Наприклад, рамка навколо таблиці за замовчуванням відображається як об'ємна. Хоча такий вид рамки не користується достатньою популярністю серед веб-дизайнерів, це не означає, що такі рамки взагалі не слід використовувати. Використовуючи стилі, таблиці можна надати найрізноманітніший вигляд, включаючи об'ємний, який може успішно виділятися на тлі своїх "плоских" сусідів.

Товщина тривимірної рамки регулюється атрибутом border тега <table>, при цьому змінюється лише зовнішня межа навколо таблиці. Товщина ліній всередині таблиці залишається незмінною.

Для створення вказаної таблиці винесемо всі можливі параметри в стилі, а додавання рамки покладемо на атрибут border (приклад 1).

Приклад 1. Використання атрибута border

<!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">
   TABLE {
    width: 300px; /* Ширина таблиці */
   }
   TH {
    background: #4b0082; /* Колір фону */
    color: #fffff0; /* Колір тексту */
   }
   TD, TH {
    padding: 3px; /* Відступи навколо вмісту комірок */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0" border="2">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубіни</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Ізумруди</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфіри</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

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

Стилі також дозволяють створити ефект тривимірності таблиці за рахунок використання універсального стилевого властивості border. В якості значень вказується стиль лінії і її товщина, які значно впливають на кінцевий вигляд таблиці. У табл. 1 показані деякі значення та кінцевий результат.

Табл. 1. Вигляд рамки в залежності від стилю та товщини межі елемента
Стиль рамки	Товщина рамки
Стиль рамки	2 пікселя	4 пікселя	6 пікселів
groove (углиблена)
ridge (бортик)
inset (вдавлена)
outset (видавлена)

У прикладі 2 для додавання рамки використовується стиль зі значенням groove та товщиною 5 пікселів. Вигляд отриманої таблиці показано на рис. 2.

Рис. 2. Розділення комірок таблиці

Стилеве властивість border застосовується до селектора TABLE для створення рамки навколо таблиці та до селекторів TD і TH для додавання рамки до кожної комірки. При цьому, щоб у місцях дотику різних комірок не виникало подвійних ліній, використовується властивість border-collapse із значенням collapse (приклад 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">
   TABLE {
    width: 300px; /* Ширина таблиці */
    border-collapse: collapse; /* Прибираємо подвійні лінії між комірками */
    border: 5px groove #ccc; /* Рамка навколо таблиці */
   }
   TH {
    background: #4b0082; /* Колір фону */
    color: #fffff0; /* Колір тексту */
   }
   TD, TH {
    padding: 3px; /* Відступи навколо вмісту комірок */
    border: 5px groove #ccc; /* Межа між комірками */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубіни</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Ізумруди</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфіри</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

У цьому прикладі створюється углиблена рамка сірого кольору навколо комірок та таблиці в цілому.

Ми можемо самі створити ефект тривимірності таблиці за рахунок правильного чергування темних і світлих ліній в її рядках.

Рис. 3. Таблица з "видавленими" рядками

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

Для створення наведеної на рис. 3 таблиці введемо додатковий клас з назвою even, і будемо додавати його до парних рядків таблиці. При цьому для селектора TR не можна прямо встановити властивість border, лінія в цьому випадку просто не відображатиметься. Тому скористаємося контекстними селекторами і додамо конструкцію .even TD, яка вказує, що для всіх комірок, розташованих всередині елемента з класом even, задаємо лінію знизу і зверху. Колір фону за допомогою властивості background можна застосовувати до селектора TR, що і показано в прикладі 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">
   TABLE {
    width: 227px; /* Ширина таблиці */
    background: #ccc; /* Колір фону непарних рядків */
    border: 1px solid #000; /* Рамка навколо таблиці */
   }
   TD, TH {
    padding: 3px; /* Відступи навколо вмісту */
    text-align: left; /* Вирівнювання по лівому краю */
   }
   TR.even {
    background: #e0e0e0; /* Колір фону парних рядків */
   }
   .even TD {
    border-top: 2px solid #666; /* Темна лінія зверху комірки */
    border-bottom: 1px solid #fff; /* Світла лінія знизу комірки */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr class="even">
    <td>Рубіни</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>


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