Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных.

После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид.

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

Добавление границ (border) в таблицы

CSS-свойство border — лучший способ определить границы для таблиц и ячеек. В следующем примере будет установлена черная граница для элементов <table>, <th>, и <td>.

table, th, td {
    border: 1px solid black;
}

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

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

Свертывание границ таблиц

Существуют две разные модели для установки границ ячеек таблицы в CSS: раздельная (separate) и свернутая (collapse).

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

Следующие правила сворачивают границы ячеек таблицы и применяют черную границу в один пиксель.

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

Регулировка пространства внутри таблиц

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

Чтобы добавить больше пространства между содержимым ячейки таблицы и границами ячейки, вы можете просто использовать CSS-свойство padding. Давайте посмотрим следующий пример:

th, td {
    padding: 15px;
}

Вы также можете отрегулировать расстояние между границами ячеек, используя CSS-свойство border-spacing, если границы вашей таблицы разделены (по умолчанию).

Следующие правила применяют интервал 10 пикселей между всеми границами в таблице:

table {
    border-spacing: 10px;
}

Настройка ширины и высоты таблиц

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

Однако вы также можете задать ширину и высоту таблицы, а также ее ячеек, явно используя CSS-свойства width и height. Правила в следующем примере устанавливают ширину таблицы равной 100% и высоту ячеек заголовка таблицы равной 40 пикселям.

table {
    width: 100%;
}
th {
    height: 40px;
}

Управление макетом таблицы

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

Вы можете сделать это с помощью CSS-свойства table-layout. Это свойство определяет алгоритм, который будет использоваться для размещения ячеек таблицы, строк и столбцов. Это свойство принимает одно из двух значений:

• auto — использует алгоритм автоматической раскладки таблицы. С помощью этого алгоритма ширина таблицы и ее ячеек настраиваются в соответствии с содержимым. Это значение установлено по умолчанию.
• fixed — Использует алгоритм фиксированной таблицы. При использовании этого алгоритма горизонтальное расположение таблицы не зависит от содержимого ячеек; это зависит только от ширины столбцов, границ и расстояния между ячейками. В плане производительности это работает быстрее

Правила в следующем примере указывают, что таблица HTML создана с использованием алгоритма фиксированной разметки и имеет фиксированную ширину 300 пикселей.

table {
    width: 300px;
    table-layout: fixed;
}

Выравнивание текста внутри ячеек таблицы

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

Горизонтальное выравнивание содержимого ячеек

Для горизонтального выравнивания текста внутри ячеек таблицы вы можете использовать свойство text-align так же, как и с другими элементами. Вы можете выравнять текст по левому краю (left), правому краю (right), центру (center) или растянуть на всю ширину (justify).

Следующие правила будут выравнивать текст внутри элементов по левому краю.

th {
    text-align: left;
}

Вертикальное выравнивание содержимого ячеек

Аналогично, вы можете выровнять содержимое внутри элементов <th> и <td> по вертикали, используя CSS-свойство vertical-align. Вертикальное выравнивание по умолчанию — middle (по середине).

Следующие правила будут выравнивать текст по вертикали снизу внутри элементов.

th {
    height: 40px;
    vertical-align: bottom;
}

Управление положением заголовка таблицы

Вы можете установить вертикальное положение заголовка таблицы с помощью CSS-свойства caption-side.

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

caption {
    caption-side: bottom;
}

Обработка пустых ячеек

В таблицах, в которых используется раздельная модель границ (по умолчанию), вы также можете управлять отображением ячеек, которые не имеют видимого содержимого, с помощью CSS-свойства empty-cells.

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

table {
    border-collapse: separate;
    empty-cells: hide;
}

Создание чередующихся строк в таблице

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

Вы можете использовать псевдокласс :nth-child() для этого эффекта.

Следующие правила будут выделять все нечетные строки в теле таблицы.

tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

Чередующиеся строки в таблицах обычно выглядят примерно так:

Создание адаптивной таблицы

Таблицы не являются адаптивными по умолчанию. Однако для поддержки мобильных устройств вы можете добавить отзывчивость вашим таблицам, включив горизонтальную прокрутку на маленьких экранах. Для этого просто оберните вашу таблицу элементом <div> и примените стиль overflow-x: auto; как показано ниже:

<div style="overflow-x: auto;"> 
    <table>
        ... table content ...
    </table>
</div>