2.7. CSS-таблицы

css-tablesСпецификация 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
Рис. 2. Пример отображения заголовка под таблицей

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

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

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

Синтаксис

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

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
Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек

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
Рис. 5. Пример скрытия пустой ячейки таблицы

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 #fff;
  border-left: 30px solid #fff;
  color: #039;
  padding: 8px 2px;
}
td {
  border-right: 30px solid #fff;
  border-left: 30px solid #fff;
  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 #fff;
  color: #039;
  padding: 8px;
}
td {
  background: #e8edff;
  border-bottom: 1px solid #fff;
  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 #fff;
  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 #fff;
  padding: 20px;
}
td {
  color: #669;
  border-right: 1px dashed #6cf;
  padding: 10px 20px;
}

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

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

table {
  background: url("https://html5book.ru/images/blurry.jpg") no-repeat;
  background-position: 100% 55px;
}
th {
  font-weight: normal;
  color: #339;
  padding: 10px 12px;
 }
td {
  background: url("https://html5book.ru/images/back.png");
  color: #669;
  border-top: 1px solid white;
  padding: 10px 12px;
}
tr:hover td {
  background: url("https://html5book.ru/images/back.png"); 
  background: transparent;
}
  • PaSHA SHeremetev

    Елена, просто замечательная статья!
    И к данной статье вношу предложение )))
    Так как страница с примерами таблиц называется «Top 10 CSS Table Designs», а примеров в ней приведено всего 6 )))
    предлагаю дополнить страницу с примерами и саму эту статью
    таблицей, когда при наведении на строку остальная часть становится слегка размытой (blur)

    • Спасибо за предложение. Постараюсь в ближайшее время добавить до 10 примеров.

  • Valerich

    Добрый день!

    Столкнулся с такой проблеммой. На сайте встроена
    через JS форма поиска Гугл по сайту. Добавил в файл css стили для таблиц
    и т.к. эта форма построена тоже на таблице, у меня отображаются границы
    таблицы на форме. Как это убрать только в форме?

    Вот пример: https://jsfiddle.net/pez0qmz0/1/

    • Так как вы указали стили для таблицы и её ячеек

      table {
          border: 1px solid;
          border-collapse: collapse;
      }
      td {
          border: 1px solid;
      }
      

      , то лучше переписать эти правила через селектор класса, то есть вам нужно добавить класс всем таблицам на вашем сайте, например:

      .table {
          border: 1px solid;
          border-collapse: collapse;
      }
      .table td {
          border: 1px solid;
      }
      

      .
      Отменить границы для формы поиска гугл можно с помощью правила !important, но это не лучший вариант.

      • Valerich

        Елена спасибо за ответ!

        Получается мне придется каждый раз при создании таблицы, вручную прописывать ей класс .table. В этом нет проблемы, если таблиц несколько штук на сайте, а если постоянно создаются новые статьи и в них есть таблицы + статьи добавляют разные пользователи и объянять каждому, что нужно указать класс — проблематично. Как сделать, чтобы на автомате добавлялся класс при создании таблицы?))

        • Можно как вариант использовать table:not(селектор) {border: none}, td:not(селектор) {border: none} — элементы, которые не содержат указанный селектор — класс. В качестве селектора указать соответствующие классы таблиц гугл формы, их можно посмотреть в браузере в режиме разработчика.

          • Valerich

            Попробовал.

            «table {
            border: 1px solid;
            border-collapse: collapse;
            }
            td {
            border: 1px solid;

            Это из css файла убрал.

            Далее вставил:

            table:not(#google_search) {
            border: 1px solid;
            border-collapse: collapse;
            }
            td:not(#google_search) {
            border: 1px solid;
            }

            Все равно и таблица и форма остается с границей.

            В коде браузера код формы с такой иерархией:

            Пробовал вставлять:
            #___gcse_0, .gsc-control-cse gsc-control-cse-ru и все остальные вложенные классы поочереди. Ничего не получается(

          • Согласна, поиск от гугл сложно стилизовать. Попробуйте стили для таблицы указать так:

            table {border-collapse: collapse;}
            th {border:1px solid;}
            td {border:1px solid;}
            table.gsc-search-box td{border-width:0}
          • Valerich

            Получилось!!! Елена спасибо большое за помощь!

          • Пожалуйста!

  • «РемСити»

    Как вы адаптивные таблицы делаете???

    • table {
      width: 100%;
      max-width: 100%;
      }

      Если нужно зафиксировать ширину столбцов, то указываю её в процентах, например, width: 20%.
      Далее пишу медиазапросы, в которых уменьшаю внутренние отступы в ячейках padding и размер шрифта font-size. Единственное, таким способом можно адаптировать таблицы не более четырех столбцов. Для длинных таблиц есть приём с горизонтальной прокруткой.

      • «РемСити»

        А примеров у вас тут нет, чтобы с шрифтом уменьшалось?

        • Размер шрифта может наследоваться от размера шрифта body, например:

          body {font-size: 16px;}
          @media (max-width: 768px){
            body {font-size: 14px;}
          }
          @media (max-width: 480px){
            body {font-size: 13px;}
          }

          Опять же, все индивидуально. Какое семейство шрифтов у вас на сайте, какое количество столбцов в таблице? Разные шрифты одинакового размера могут быть визуально больше или меньше.