2.8. CSS-таблицы

Опубликовано: 18 июня 2014 Обновлено: 22 декабря 2020 14 комментариев

Спецификация CSS даёт неограниченные возможности для оформления таблиц. По умолчанию таблица и ячейки таблицы не имеют видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу.

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

Форматирование таблиц

1. Границы таблицы border

Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством border:

table {
   border-collapse: collapse;
   /*убираем пустые промежутки между ячейками*/
   border: 1px solid grey;
   /*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/
}

Границы ячеек заголовка каждого столбца задаются для элемента th:

th {
   border: 1px solid grey;
}

Границы ячеек тела таблицы задаются для элемента td:

td {
   border: 1px solid grey;
}

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

th, td {
   border: 1px solid grey;
}

Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:

table {
   border: 3px solid grey;
}

Границы можно задавать частично:

/* устанавливаем для таблицы внешнюю границу серого цвета толщиной 3px */
table {
   border-top: 3px solid grey;
}
/* задаём для ячейки тела таблицы границу серого цвета толщиной 1px */
td {
   border-bottom: 1px solid grey;
}

Подробнее о свойстве border вы можете прочитать здесь.

2. Как задать ширину и высоту таблицы

По умолчанию ширина и высота таблицы определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).

Ширина таблицы и столбцов задаётся с помощью свойства width. Если для таблицы задано table {width: 100%;}, то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.

Ширину таблицы и столбцов обычно задают в px или %, например:

table {
   width: 600px;
}
th {
   width: 20%;
}
td:first-child {
   width: 30%;
}

Высота таблицы не задается. Высотой рядов таблицы можно управлять, добавив верхний и нижний padding для элементов <td> и <th>.

Фиксировать высоту с помощью свойства height не рекомендуется.

th, td {
   padding: 10px 15px;
}

3. Как задать фон таблицы

По умолчанию фон таблицы и ячеек прозрачный. Если страница или блок, содержащие таблицу, имеют фон, то он будет просвечиваться сквозь таблицу. Если фон задан и для таблицы и для ячеек, то в местах наложения фона таблицы и ячеек будет виден фон только ячеек. В качестве фона для таблицы в целом и её ячеек могут выступать:

4. Столбцы таблицы

Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью элемента <tr>. На практике бывают случаи, когда необходимо специальное форматирование столбцов, которое возможно следующими способами:

  • с помощью элемента <col> можно задать фон для любого количества столбцов;
  • с помощью селектора table td:first-child, table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);
  • с помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.

Подробнее про элемент <col> вы можете прочитать здесь.

Подробнее про CSS-селекторы вы сможете прочитать здесь.

5. Как добавить таблице заголовок

Добавить заголовок в таблицу можно с помощью элемента <caption>, а с помощью свойства caption-side его можно поместить перед таблицей или под ней. Для горизонтального выравнивания текста заголовка применяется свойство text-align.

Свойство наследуется.

caption-side
Значения:
top Заголовок таблицы располагается над таблицей. Значение по умолчанию.
bottom Располагает заголовок под таблицей.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента. 
<table>
   <caption>Таблица № 1</caption>
      <tr>
         <th>Company</th>
         <th>Q1</th>
         <th>Q2</th>
         <th>Q3</th>
         <th>Q4</th>
      </tr>
...
</table>
caption {
   caption-side: bottom;
   text-align: right;
   padding: 10px 0;
   font-size: 14px;
}
caption_side
Рис. 1. Пример отображения заголовка под таблицей

6. Как убрать промежуток между рамками ячеек

Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse, то промежуток уберётся.

Свойство наследуется.

border-collapse
Значения:
separate Рамки ячеек располагаются раздельно.
collapse Рамки ячеек сливаются в одну, а промежутки между рамками убираются.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

table {
   border-collapse: collapse;
}
table_border_collapse
Рис. 2. Пример таблиц со сливающимися и раздельными рамками ячеек

7. Как увеличить промежуток между рамками ячеек

С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом.

Свойство наследуется.

border-spacing
Значения:
<длина> <длина> Добавляет промежутки между рамками как по вертикали, так и по горизонтали. Если заданы две длины, то первая всегда определяет горизонтальный промежуток, а вторая — вертикальный.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

table {
   border-collapse: separate;
   border-spacing: 10px 20px;
}
table {
   border-collapse: separate;
   border-spacing: 10px;
}
table_border_spacing
Рис. 3. Пример таблиц с увеличенными промежутками между рамками ячеек

8. Как скрыть пустые ячейки таблицы

Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table {border-collapse: collapse;}, то ячейка не будет скрыта.

Свойство наследуется.

empty-cells
Значения:
show Рамка и фон пустой ячейки будут отрисовываться так же, как для ячейки таблицы, имеющей содержимое.
hide Если все ячейки строки пусты, то вся строка отображается так, если бы было задано значение display: none.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента. 
<table>
<tr>
  <th>Company</th>
  <th>Q1</th>
  <th>Q2</th>
  <th>Q3</th>
  </tr>
<tr>
  <td>Microsoft</td>
  <td>20.3</td>
  <td>30.5</td>
  <td></td>
</tr>
<tr>
  <td>Google</td>
  <td>50.2</td>
  <td>40.63</td>
  <td>45.23</td>
</tr>
</table>
table {
   border: 1px solid #69c;
   border-collapse: separate;
   empty-cells: hide;
}
th, td {
   border: 2px solid #69c;
}
table_empty
Рис. 4. Пример скрытия пустой ячейки таблицы

9. Компоновка макета таблицы с помощью свойства table-layout

Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек.

Свойство не наследуется.

table-layout
Значения:
auto Значение по умолчанию. Ширина макета таблицы определяется шириной её содержимого с учетом значений свойств padding-left, padding-right, border-left width плюс одна ширина border-right последней ячейки в ряду, или заданной шириной ячеек и толщиной рамки. Если ширина ячеек не задана явно, они могут быть разной ширины.
fixed Свойство сработает только в том случае, если для таблицы задана ширина. Ширина ячеек будет одинаковой, а содержимое ячеек, которое не помещается в ячейку, будет наползать под содержимое соседней ячейки.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

table {
   table-layout: fixed;
}

10. Лучшие макеты таблиц

По материалам статьи Top 10 CSS Table Designs из журнала Smashing Magazine

top-table

Перейти на страницу с примерами

1. Горизонтальный минимализм

Горизонтальные таблицы — это таблицы, текст в которых читается по горизонтали. Каждая сущность представляет собой отдельную строку. Вы можете оформить подобные таблицы в минималистском стиле, поместив двухпиксельную границу под заголовком th.

top-table1

<table>
<tr><th>Employee</th><th>Salary</th><th>Bonus</th><th>Supervisor</th></tr>
<tr><td>Stephen C. Cox</td><td>$300</td><td>$50</td><td>Bob</td></tr>
<tr><td>Josephin Tan</td><td>$150</td><td>-</td><td>Annie</td></tr>
<tr><td>Joyce Ming</td><td>$200</td><td>$35</td><td>Andy</td></tr>
<tr><td>James A. Pentel</td><td>$175</td><td>$25</td><td>Annie</td></tr>
</table>
table {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  font-size: 14px;
  background: white;
  max-width: 70%;
  width: 70%;
  border-collapse: collapse;
  text-align: left;
}
th {
  font-weight: normal;
  color: #039;
  border-bottom: 2px solid #6678b1;
  padding: 10px 8px;
}
td {
  color: #669;
  padding: 9px 8px;
  transition: .3s linear;
}
tr:hover td {
  color: #6699ff;
}

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

top-table2

td {
  border-bottom: 1px solid #ccc;
  color: #669;
  padding: 9px 8px;
  transition: .3s linear;
}
/*остальной код - как в примере выше*/

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

top-table3

th {
  font-weight: normal;
  color: #039;
  padding: 10px 15px;
}
td {
  color: #669;
  border-top: 1px solid #e8edff;
  padding: 10px 15px;
}
tr:hover td {
  background: #e8edff;
}

2. Вертикальный минимализм

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

top-table4

th {
  font-weight: normal;
  border-bottom: 2px solid #6678b1;
  border-right: 30px solid white;
  border-left: 30px solid white;
  color: #039;
  padding: 8px 2px;
}
td {
  border-right: 30px solid white;
  border-left: 30px solid white;
  color: #669;
  padding: 12px 2px;
}

3. «Коробочный» стиль

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

top-table5

th {
  font-size: 13px;
  font-weight: normal;
  background: #b9c9fe;
  border-top: 4px solid #aabcfe;
  border-bottom: 1px solid white;
  color: #039;
  padding: 8px;
}
td {
  background: #e8edff;
  border-bottom: 1px solid white;
  color: #669;
  border-top: 1px solid transparent;
  padding: 8px;
}
tr:hover td {
  background: #ccddff;
}

Самое сложное — найти ту цветовую гамму, которая будет гармонично сочетаться с вашим сайтом. Если сайт нагружен по графике и дизайну, то вам будет довольно трудно использовать этот стиль.

top-table6

table {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
  font-size: 14px;
  max-width: 70%;
  width: 70%;
  text-align: center;
  border-collapse: collapse;
  border-top: 7px solid #9baff1;
  border-bottom: 7px solid #9baff1;
}
th {
  font-size: 13px;
  font-weight: normal;
  background: #e8edff;
  border-right: 1px solid #9baff1;
  border-left: 1px solid #9baff1;
  color: #039;
  padding: 8px;
}
td {
  background: #e8edff;
  border-right: 1px solid #aabcfe;
  border-left: 1px solid #aabcfe;
  color: #669;
  padding: 8px;
}

4. Горизонтальная зебра

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

top-table7

th {
  font-weight: normal;
  color: #039;
  padding: 10px 15px;
}
td {
  color: #669;
  border-top: 1px solid #e8edff;
  padding: 10px 15px;
}
tr:nth-child(2n) {
  background: #e8edff;
}

5. Газетный стиль

Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект :hover при наведении на строку.

top-table8

table {
  border: 1px solid #69c;
}
th {
  font-weight: normal;
  color: #039;
  border-bottom: 1px dashed #69c;
  padding: 12px 17px;
}
td {
  color: #669;
  padding: 7px 17px;
}
tr:hover td {
  background: #ccddff;
}

top-table9

table {
  border: 1px solid #69c;
}
th {
  font-weight: normal;
  color: #039;
  padding: 10px;
}
td {
  color: #669;
  border-top: 1px dashed white;
  padding: 10px;
  background:#ccddff;
}
tr:hover td {
  background: #99bcff;
}

top-table10

table {
  border: 1px solid #6cf;
}
th {
  font-weight: normal;
  font-size: 13px;
  color: #039;
  text-transform: uppercase;
  border-right: 1px solid #0865c2;
  border-top: 1px solid #0865c2;
  border-left: 1px solid #0865c2;
  border-bottom: 1px solid white;
  padding: 20px;
}
td {
  color: #669;
  border-right: 1px dashed #6cf;
  padding: 10px 20px;
}

6. Фон таблицы

Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.

table {
   background: url("https://html5book.ru/wp-content/uploads/2019/04/suggestions.png") 98% 86% no-repeat;
}
th {
   font-weight: normal;
   font-size: 14px;
   color: #339;
   padding: 10px 12px;
   background: white;
}
td {
   color: #669;
   border-top: 1px solid white;
   padding: 10px 12px;
   background: rgba(51, 51, 153, .2);
   transition: .3s;
}
tr:hover td {
   background: rgba(51, 51, 153, .1);
}

Публикации по этой теме:

Шпаргалка по работе с таблицами

Оформление таблицы с помощью псевдоклассов

CSS таблицы цен

Красивое оформление таблиц

Выравнивание текста в таблице с помощью CSS

1.7. HTML-таблицы
CSS-ссылки
CSS-списки

Поделиться: