Таблиця з рамкою

```html

23.09.2010

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

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

Для створення рамки використовується стильовий параметр border, який додається до селектору TABLE. Також таблиця виглядає ефектно, коли колір рамки співпадає з кольором фону заголовка (тег <th>), як показано на рис. 1.

У прикладі 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: 1px solid black; /* Рамка навколо таблиці */
   }
   TD, TH {
    padding: 3px; /* Поля навколо вмісту комірок */
   }
   TH {
    text-align: left; /* Вирівнювання по лівому краю */
    background: black; /* Колір фону */
    color: white; /* Колір тексту */
   }
  </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>

У цьому прикладі вирівнювання тексту в усіх комірках відбувається по лівому краю, що не завжди зручно. На рис. 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: 2px solid black; /* Рамка навколо таблиці */
    background: silver; /* Колір фону таблиці */
   }
   TD, TH { 
    text-align: center; /* Вирівнювання по центру */
    padding: 3px; /* Поля навколо вмісту комірок */
   }
   TH { 
    background: #4682b4; /* Колір фону */
    color: white; /* Колір тексту */
    border-bottom: 2px solid black; /* Лінія знизу */
   }
   .lc { 
    font-weight: bold; /* Жирний начерк тексту */
    text-align: left; /* Вирівнювання по лівому краю */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td class="lc">Рубіни</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td class="lc">Ізумруди</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td class="lc">Сапфіри</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

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

Ефектно виглядає таблиця, у якої фон заголовка виконаний у вигляді градієнту (рис. 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: 2px solid #2e8b57; /* Рамка навколо таблиці */
   }
   THEAD {
    background: #2e8b57 url(images/tablebg.gif) repeat-x; /* Параметри фону */
   }
   TD, TH {
    padding: 3px; /* Поля навколо вмісту комірок */
    text-align: center; /* Вирівнювання по центру */
   }
   .lc { 
    font-weight: bold; /* Жирний начерк тексту */
    text-align: left; /* Вирівнювання по лівому краю */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <thead>
    <tr>
     <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
    </tr>
   </thead>
   <tr>
    <td class="lc">Рубіни</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td class="lc">Ізумруди</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td class="lc">Сапфіри</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

У цьому прикладі тег <thead> охоплює лише верхню строку таблиці з її заголовком. Для цього тегу в стилях одночасно встановлюється колір фону та зображення, яке наведене на рис. 4. Хоча колір під зображенням не видно, краще його завжди додавати, наприклад, для випадку відключення користувачем відображення зображень у браузері.

CSSтаблиці

``` SEO текст: "Навчіться легко додавати рамки до таблиць у HTML за допомогою стильових властивостей. Вирівнюйте вміст комірок, змінюйте фон, створюйте градієнти та додавайте фонові зображення до вашої таблиці. Детальні приклади та пояснення для новачків."

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