CSS-таблицы

Спецификация 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;
}

РИС. 2. ПРИМЕР ОТОБРАЖЕНИЯ ЗАГОЛОВКА ПОД ТАБЛИЦЕЙ

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

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

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

Синтаксис

table {border-collapse: collapse;}

РИС. 3. ПРИМЕР ТАБЛИЦ СО СЛИВАЮЩИМИСЯ И РАЗДЕЛЬНЫМИ РАМКАМИ ЯЧЕЕК

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

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

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

Синтаксис

table {border-collapse: separate; border-spacing: 10px 20px;}
table {border-collapse: separate; border-spacing: 10px;}

РИС. 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;}

РИС. 5. ПРИМЕР СКРЫТИЯ ПУСТОЙ ЯЧЕЙКИ ТАБЛИЦЫ

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

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

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

Синтаксис

table {table-layout: fixed;}