CSS Таблицы

Внешний вид таблицы HTML может быть значительно улучшена с помощью CSS:

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

Чтобы задать границы таблицы в CSS, используйте свойство border.

Пример ниже определяет черными границами для элемнтов <table>, <th>, и <td>:

Обратите внимание, что таблица в примере выше имеет двойную границу. Это потому, что обе таблицы и элименты <th>, и <td> имеют отдельные границы.

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

Свойство border-collapse задает, будут ли границы таблиц свернуты в одну границу:

Если вы хотите установить границы только вокруг таблицы, укажите свойство border для <table>:

Ширина и высота таблицы

Ширина и высота таблицы определяются свойством width и height.

В примере ниже задается ширина таблицы 100 пиклелей, а высота 50 пиклелей:

Горизонтальное выравнивание таблицы

Свойство text-align задает горизонтальное выравнивание (слева, справа, или по центру) контента в тегах <th> или <td>.

По умолчанию содержание элемента <th> выравниваниет по центру и содержание элемента <td> выравниваниет по левому краю.

В следующем примере выравнивает текст слева в элементе <th>:

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

Свойство vertical-align задает вертикальное выравнивание в (верхней, нижней или по центру) контент в <th> или <td>.

По умолчанию вертикальное выравнивание содержимого в таблице, будет по центру (для обоих элементов <th> и <td>).

Следующий пример задает вертикальное выравнивание текста в нижней части для элемента <td>):

Отступы в таблице

Чтобы контролировать пространство между границей и содержимым в таблице, используйте свойство padding в элементе <th> и <td>:

Горизонтальные разделители таблицы

Добавить свойство border-bottom в <th> и <td> для горизонтальных разделителей:

Таблица при наведении

Используйте селектор :hover в <tr> для выделения строк таблицы при наведении:

Полосатая таблица

Для полосатой таблицы, использовать селектор nth-child() и добавить background-color на всех четных (или нечетных) строк таблицы:

Цвет заголовка таблицы

Пример ниже указывает цвет фона и цвет текста элемента <th>:

Отзывчивая таблица

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

Добавьте контейнер элемент <div> в overflow-x:auto внутри элемента <table>, чтобы сделать его отзывчивым:

Еще примеры

Установить шикарную таблицу
Пример демонстрирует, как создать шикарную таблицу.

Установить заголовок таблицы
Пример демонстрирует, как расположить заголовок таблицы.

Свойства CSS таблицы