Таблиця без рамки

23.09.2010

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

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

Для зміни кольору фону таблиці використовуємо властивість background, додаючи її до селектору TABLE. Для оформленняния нижньої лінії таблиці намалюємо лінію за допомогою властивості border-bottom (приклад 1).

Приклад 1. Створення таблиці без рамки

<!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-bottom: 2px solid maroon; /* Лінія внизу таблиці */
    background: #fffacd; /* Колір фону таблиці */
   }
   TH {
    background: maroon; /* Колір фону заголовка */
    color: white; /* Колір тексту */
    text-align: left; /* Вирівнювання по лівому краю */
   }
   TD, TH {
    padding: 3px; /* Відступи навколо тексту */
   }
  </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>

Так як вміст тегу TH спочатку вирівнюється по центру, для зміни цієї характеристики в даному прикладі використовується стилеве властивість text-align зі значенням left. Можна зробити навпаки і встановити вирівнювання по центру для комірок тегу TD. Однак вміст першої колонки з назвами каменів краще залишити вирівненим по лівому краю. Щоб встановити різне вирівнювання вмісту для різних колонок, розглянемо два способи.

Перший метод полягає в використанні тегу COL, який додається в контейнер TABLE і встановлює, зокрема, вирівнювання для окремих колонок (приклад 2).

Приклад 2. Вирівнювання за допомогою тегу <col>

<!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-bottom: 2px solid maroon; /* Лінія внизу таблиці */
    background: #fffacd; /* Колір фону таблиці */
   }
   TH {
    background: maroon; /* Колір фону заголовка */
    color: white; /* Колір тексту */
   }
   TD, TH {
    padding: 3px; /* Відступи навколо тексту */
   }
  </style>
 </head> 
 <body> 
  <table cellspacing="0">
  <!-- Вирівнювання першої колонки по лівому краю -->
  <col align="left">
 
  <!-- Вирівнювання решти колонок по центру -->
  <col span="3" align="center">
   <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>

Атрибут align тегу COL вказує, з якого боку вирівнювати комірки колонки, а span визначає кількість колонок, до яких будуть застосовані встановлені параметри. Якщо цього атрибуту немає, то тег COL працює лише для однієї колонки.

Вирівнювання вмісту колонок за допомогою тегу COL працює в браузері Internet Explorer і не працює в браузері Firefox та деяких інших.

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

Створюємо стилевий клас, наприклад, з назвою jewel і застосовуємо його до комірок лівої колонки (приклад 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: 300px; /* Ширина таблиці */
    border-bottom: 2px solid maroon; /* Лінія внизу таблиці */
    background: #fffacd; /* Колір фону таблиці */
   }
   TH {
    background: maroon; /* Колір фону заголовка */
    color: white; /* Колір тексту */
   }
   TD, TH {
    padding: 3px; /* Відступи навколо тексту */
    text-align: center; /* Вирівнювання по центру */
   }
   TD.jewel {
    text-align: left; /* Вирівнювання по лівому краю */
    background: #ccc; /* Колір фону */
   }
  </style>
 </head> 
 <body> 
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td class="jewel">Рубіни</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td class="jewel">Ізумруди</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td class="jewel">Сапфіри</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

У цьому прикладі змінюється колір фону і спосіб вирівнювання для всіх комірок, де встановлений атрибут class="jewel". Результат прикладу показано на малюнку 2.

CSSтаблиці

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