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

Таблицы являются широко используемым элементом для представления различных данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря своей наглядности, универсальности и простоте таблицы также повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал. Добавляя к таблицам всю мощь стилей можно весьма удачно вписать таблицы в дизайн сайта, наглядно и красиво представить табличные данные.

Ширина таблицы

По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.

Пример 1. Ширина таблицы в процентах

table { width: 100%; }
.tbl-medium { width: 60%; }
.tbl-small { width: 200px; }

В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу <table> класс tbl-small.

<table class="tbl-small">

Выравнивание таблиц

Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto, как показано в примере 2.

Пример 2. Выравнивание таблицы с помощью margin

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    margin: auto; /* Выравнивание по центру */
   }
  </style>
 </head>
 <body>
  <table>
   ...
  </table>
 </body>
</html>

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

Цвет фона

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору table. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th, то он и будет установлен в качестве фона (пример 3).

Пример 3. Цвет фона

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    background: #f5e8d0; /* Цвет фона таблицы */
    border-spacing: 0; /* Расстояние между ячеек */
   }
   th {
    background: #496791; /* Цвет фона ячеек */
    color: #fff; /* Цвет текста */
   }
   td, th {
    padding: 5px 10px; /* Поля в ячейках */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th rowspan="2">Вид соединения</th>
    <th colspan="2">Поля допусков ширины шпоночного паза</th>
   </tr>
   <tr>
    <th>Вал</th><th>Втулка</th>
   </tr>
   <tr>
    <td>Свободное</td><td>H9</td><td>D10</td>
   </tr>
   <tr>
    <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
   </tr>
   <tr>
    <td>Плотное</td><td colspan="2">P9</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Изменение цвета фона

Рис. 1. Изменение цвета фона

Если нам требуется сделать зебру — так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child, добавляя его к селектору tr. Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов <thead> и <tbody> (пример 4).

Пример 4. Создание зебры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии */
   }
   thead {
    background: #f5e8d0; /* Цвет фона заголовка */
   }
   td, th {
    padding: 5px; /* Поля в ячейках */
    border: 1px solid #333; /* Параметры рамки */
   }
   tbody tr:nth-child(even) {
    background: #f0f0f0; /* Зебра */
   }
  </style>
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <th rowspan="2">Интервалы размеров, мм</th>
     <th colspan="4">Допуск IT, мкм, для квалитетов</th>
    </tr>
    <tr>
     <th>5</th><th>6</th><th>7</th><th>8</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>До 3</td><td>4</td><td>6</td><td>10</td><td>14</td>
    </tr>
    <tr>
     <td>Св. 3 до 6</td><td>5</td><td>8</td><td>12</td><td>18</td>
    </tr>
    <tr>
     <td>Св. 6 до 10</td><td>6</td><td>9</td><td>15</td><td>22</td>
    </tr>
    <tr>
     <td>Св. 10 до 18</td><td>8</td><td>11</td><td>18</td><td>27</td>
    </tr>
    <tr>
     <td>Св. 18 до 30</td><td>9</td><td>13</td><td>21</td><td>33</td>
    </tr>
    <tr>
     <td>Св. 30 до 50</td><td>11</td><td>16</td><td>25</td><td>39</td>
    </tr>
    <tr>
     <td>Св. 50 до 80</td><td>13</td><td>19</td><td>30</td><td>46</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 2.

Зебра

Рис. 2. Зебра

Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd, тогда серым цветом будут выделяться нечётные строки.

Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even).

Поля внутри ячеек

Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding, которое работает с селектором td или th, как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).

Расстояние между ячеек

Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing, добавляя его к селектору table (пример 5).

Пример 5. Использование border-spacing

table {
 border-spacing: 3px; /* Расстояние между ячеек */
}
thead  th {
 background: #e08156; /* Цвет фона заголовка */
 color: #333; /* Цвет текста */
}
td, th {
 padding: 5px; /* Поля в ячейках */
 background: #4c715b; /* Цвет фона ячеек */
 color: #f5e8d0; /* Цвет текста */
}

Добавляя этот стиль к любой таблице получим результат продемонстрированный на рис. 3.

Вид таблицы с расстоянием между ячеек

Рис. 3. Вид таблицы с расстоянием между ячеек

Если к table добавляется свойство border-collapse со значением collapse, то border-spacing игнорируется, потому как расстояния между ячеек уже нет.

Границы и рамки

Чтобы чётко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает стилевое свойство border, которое применяется к элементам (<td> или <th>). Однако здесь нас подстерегают подводные камни. Поскольку рамка создаётся для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для устранения указанной особенности существует несколько путей. Самый простой — воспользоваться свойством border-collapse со значением collapse. В его задачу входит отслеживать соприкосновение линий и вместо двойной границы изображать одинарную. Это свойство достаточно добавить к селектору table, а дальше оно всё сделает самостоятельно (пример 6).

Пример 6. Применение свойства border-collapse при создании рамок таблицы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    border-collapse: collapse; /* Убираем двойные линии */
    width: 100%; /* Ширина таблицы */
    border-spacing: 0; /* Расстояние между ячеек */
   }
   td {
    border: 2px solid #333; /* Параметры границ */
    padding: 4px; /* Поля в ячейках */
    text-align: center; /* Выравнивание по центру */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><td>O</td><td>X</td><td>X</td></tr>
   <tr><td>O</td><td>O</td><td>X</td></tr>
   <tr><td>X</td><td>X</td><td>O</td></tr>
  </table>
 </body>
</html>

Разница между границами таблицы при добавлении свойства border-collapse, а также без него, представлена на рис. 4.

 

свойство не установлено

а — свойство не установлено

свойство установлено

б — свойство установлено

Рис. 4. Вид таблицы при использовании border-collapse

На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).

Линии не обязательно делать для всех сторон ячеек, согласно дизайну они могут отделять одну строку или колонку от другой. Для этого мы используем свойства border-bottom, border-left и другие подобные. Применять границы к элементам <tr>, <thead>, <tfoot> и <tbody> нельзя, поэтому добавляем их к селектору table и td (пример 7).

Пример 7. Линии между строк

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии */
    border-bottom: 2px solid #333; /* Линия снизу таблицы */
    border-top: 2px solid #333; /* Линия сверху таблицы */
   }
   td { 
    text-align: center; /* Выравнивание по центру */
    border-bottom: 1px solid #333;
    border-top: 1px solid #333;
   }
   td, th {
    padding: 5px; /* Поля в ячейках */
   }
  </style>
 </head>
 <body>
  <table>
   <thead>
    <tr>
     <th rowspan="2">Вид соединения</th>
     <th colspan="2">Поля допусков ширины шпоночного паза</th>
    </tr>
    <tr>
     <th>Вал</th><th>Втулка</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Свободное</td><td>H9</td><td>D10</td>
    </tr>
    <tr>
     <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
    </tr>
    <tr>
     <td>Плотное</td><td colspan="2">P9</td>
    </tr>
   </tbody>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 5.

Таблица с горизонтальными линиями

Рис. 5. Таблица с горизонтальными линиями

Выравнивание текста в ячейках

По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент <th>, он определяет ячейку заголовка, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 8).

Пример 8. Выравнивание содержимого ячеек по горизонтали

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   table {
    border-collapse: collapse; /* Убираем двойные линии */
    width: 100%; /* Ширина таблицы */
   }
   th { 
    background: #dfebb7; /* Цвет фона ячейки */
    text-align: left; /* Выравнивание по левому краю */
   }
   td {
    text-align: center; /* Выравнивание по центру */
   }
   th, td {
    border: 1px solid black; /* Параметры рамки */
    padding: 4px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><th>Заголовок 1</th><td>Ячейка 1</td><td>Ячейка 2</td></tr>
   <tr><th>Заголовок 2</th><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

В данном примере содержимое <th> выравнивается по левому краю, а содержимое <td> — по центру. Результат примера показан ниже (рис. 6).

Выравнивание текста в ячейках

Рис. 6. Выравнивание текста в ячейках

Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align со значением top, как показано в примере 9.

Пример 9. Выравнивание содержимого ячеек по вертикали

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица</title>
  <style>
   th {
    background: #496791; /* Цвет фона ячеек заголовка */
    color: #fff; /* Цвет текста */
   }
   td { 
    background: #f5e8d0; /* Цвет фона ячеек */
    text-align: center; /* Выравниваем по центру */
   }
   td, th {
    padding: 5px 10px; /* Поля в ячейках */
    vertical-align: top; /* Выравниваем по верхнему краю */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th rowspan="2">Вид соединения</th>
    <th colspan="2">Поля допусков ширины шпоночного паза</th>
   </tr>
   <tr>
    <th>Вал</th><th>Втулка</th>
   </tr>
   <tr>
    <td>Свободное</td><td>H9</td><td>D10</td>
   </tr>
   <tr>
    <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td>
   </tr>
   <tr>
    <td>Плотное</td><td colspan="2">P9</td>
   </tr>
  </table>
 </body>
</html>

В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.

Выравнивание текста в ячейках

Рис. 7. Выравнивание текста в ячейках

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.08.2018
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid