Наверх

Оформление таблиц в CSS

Про HTML-таблицы читайте здесь, а в этой статье я расскажу об их оформлении с помощью CSS. Для форматирования таблиц каскадные стили используют перечисленные ниже свойства.

width и height

Задают соответственно ширину и высоту таблицы. Без этих свойств параметры определяются автоматически и зависят от содержимого контейнера <table>. Значения устанавливаются в любых единицах длины CSS, но зачастую используются пиксели (px) и проценты (%). Последние настраивают ширину относительно родительского элемента, первые же задают абсолютную величину.

table {width: 450px; height: 80%;}

caption-side

Указывает, где будет размещён заголовок таблицы, описанный тегом <caption>. Свойству можно задавать значения:

  • top — расположить над таблицей.
  • bottom — разместить под таблицей.

Эксклюзивно для обозревателя Firefox доступны значения left (заголовок слева) и right (справа от таблицы), но другие браузеры их не понимают.

table {caption-side: top;}

border-collapse

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

Таблица с двойной рамкой

Так рамки ячеек отображаются по умолчанию. Правило border-collapse: separate; даёт такой же эффект. Чтобы решить проблему, нужно объявить border-collapse: collapse; (результат показан на рисунке ниже).

Таблица с рамкой по умолчанию

border-spacing

Определяет расстояние между границами ячеек. Правило задаётся сразу для всей таблицы. Если значение одно, то оно установит расстояние и по горизонтали, и по вертикали. Если значения два, то первое задаст расстояние по горизонтали, второе — по вертикали. Свойство несовместимо с правилом table {border-collapse: collapse;}.

CSS-код

   table { 
    border: 4px double #FCA360;
    border-collapse: separate;
    border-spacing: 10px 20px;
   }
   td {
    padding: 3px;
    border: 1px solid #FCA360;
   }

Задаёт таблице следующее оформление:

Таблица с оформлением

empty-cells

Указывает, будет ли отображаться фон и границы ячейки, если она пуста. Значение у свойства может быть одно из двух:

  • show — показывать границы и фон (по умолчанию).
  • hide — скрыть их. Если все ячейки строки пусты, то будет скрыта, соответственно, вся строка. Если таблице задано правило border-collapse: collapse;, то свойство игнорируется.

table-layout

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

  • auto. Ширина определяется автоматически. При этом либо суммируется ширина всех столбцов, либо берётся значение свойства width, если таблице оно задано. Браузер сначала загружает таблицу, потом анализирует её, определяя ширину, и только после этого отображает.
  • fixed. Фиксированная ширина, которая определяется по первой строке.

Пример оформления таблицы

Не забывайте, что таблице можно задавать и другие универсальные правила, например, как мы это делали с высотой (height) и шириной (width).

Помня это, оформим несложную таблицу, частично прокомментировав код.

<!DOCTYPE html>
<html>
 <head>
  <title>border-collapse</title>
  <style>
   table {
    width: 50%;
    caption-side: bottom;
    border: 4px solid #006400;
    border-collapse: collapse;
    table-layout: fixed;
   }
   th {
    font-size: 13px;
    font-weight: bold;
    background: #ADFF2F;
    border-top: 4px solid #006400;
    border-bottom: 3px solid #FF8C00;
    color: #039;
    padding: 8px;
   }
   td {
    background: #E0FFFF;
    border-bottom: 1px solid #FF8C00;
    border-top: 1px solid transparent;
    padding: 8px;
   </style>
 </head>
 <body>   
  <table>
   <caption>Пример таблицы</caption>
   <tr> 
    <th>Цены</th><th>2014</th>
    <th>2015</th><th>2016</th>
   </tr>
   <tr> 
    <td>Хлеб</td><td>16</td>
    <td>18</td><td>21</td>
   </tr>
   <tr> 
    <td>Сахар</td><td>35</td>
    <td>44</td><td>50</td>
   </tr>
   <tr> 
    <td>Соль</td><td>8</td>
    <td>8,50</td><td>9</td>
   </tr>
  </table> 
 </body>
</html>

В браузере таблица будет выглядеть, как показано ниже.

Пример таблицы

width: 50%;

Задаём ширину таблицы в половину от родительской. 50% берётся от ширины контейнера <body>, потому что других родителей у неё нет. То есть таблица будет занимать ровно половину окна браузера.

caption-side: bottom;

Размещаем заголовок снизу, под таблицей.

border: 4px solid #006400;

Задаём таблице цветную рамку толщиной 4 пикселя.

border-collapse: collapse;

Объединяем границы ячеек.

table-layout: fixed;

Настраиваем способ определения браузером ширины таблицы.

font-size: 13px;

Задаём размер шрифта заглавных ячеек.

font-weight: bold;

Делаем текст внутри них жирным.

background: #ADFF2F;

Устанавливаем цвет фона ячеек.

border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00;

Настраиваем верхние и нижние рамки.

color: #039;

Определяем цвет текста.

padding: 8px;

Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям.

You must have Javascript enabled to use this form.