CSS-таблицы

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

Посмотреть пример

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

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

В примере ниже элементам <table>, <th> и <td> задается черная граница:

Пример

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

Посмотреть демо

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

Объединение границ в таблице

Свойство border-collapse определяет, нужно ли объединять двойную границу в одну:

Пример

table {
    border-collapse: collapse;
}

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

Посмотреть демо

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

Пример

table {
    border: 1px solid black;
}

Посмотреть демо

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

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

В приведенном ниже примере ширина таблицы выставлена на 100%, а высота элементов <th> на 50px:

Пример

table {
    width: 100%;
}

th {
    height: 50px;
}

Посмотреть демо

Выравнивание по горизонтали

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

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

В приведенном ниже примере оформления таблицы CSS к содержимому элементов <th> применяется выравнивание по левому краю:

Пример

th {
    text-align: left;
}

Посмотреть демо

Выравнивание по вертикали

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

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

В приведенном ниже примере к содержимому элементов <td> применяется вертикальное выравнивание по нижней границе:

Пример

td {
    height: 50px;
    vertical-align: bottom;
}

Посмотреть демо

Поля таблицы

Для регулирования расстояния между границей элемента и его содержимым воспользуйтесь свойством padding (для элементов <td> и <th>):

Пример

th, td {
    padding: 15px;
    text-align: left;
}

Посмотреть демо

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

Можно использовать свойство border-bottom в элементах <th> и <td>, чтобы отделить строки CSS таблицы друг от друга горизонтальным разделителем:

Пример

th, td {
    border-bottom: 1px solid #ddd;
}

Посмотреть демо

Таблица с hover-эффектом

Воспользуйтесь селектором :hover в элементе <tr>, чтобы подсветить ячейки при наведении на них курсора мыши.

Пример

tr:hover {background-color: #f5f5f5}

Посмотреть демо

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

Чтобы получить CSS таблицы со строками разного цвета, используйте селектор nth-child(), и задайте всем четным и нечетным строкам разный цвет.

Пример

tr:nth-child(even) {background-color: #f2f2f2}

Посмотреть демо

Цвет таблицы

В приведенном ниже примере показано, как задавать цвет фона и текста для элементов <th>:

Пример

th {
    background-color: #4CAF50;
    color: white;
}

Посмотреть демо

Адаптивная таблица

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

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

Пример

<div style="overflow-x:auto;">

<table>
... содержимое таблицы ...
</table>

</div>

Посмотреть демо

Больше примеров


Создаем причудливую таблицу

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

Выставляем расположение подписи таблицы

В данном примере показано, как можно расположить подпись к таблице при помощи CSS.

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

СвойстваОписание
borderПозволяет одним выражением установить сразу все границы
border-collapseПозволяет объединять двойные границы в одну
border-spacingПозволяет указать расстояние между смежными ячейками
caption-sideОтвечает за положение подписи к таблице
empty-cellsПозволяет показать или скрыть границы для пустых ячеек в таблице
table-layoutПозволяет использовать в таблице шаблонный алгоритм

Перевод статьи “CSS Tables” был подготовлен дружной командой проекта Сайтостроение от А до Я.

15 февраля 2017 в 16:26
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок