САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Инструкции CSS Цвета CSS Слои Фона CSS Границы CSS Поля CSS Отступы CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиция CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация CSS3 трансформация CSS3 Анимация CSS3 Подсказки CSS3 Стиль изображения CSS3 Объект-подгонка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Бокс размеры CSS3 Гибкий бокс CSS3 Медиа запросы CSS3 Медиа примеры

CSS3 Адаптивный дизайн

Введение Область просмотра Вид сетки Медиа запросы Изображения Видео Фреймворк Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS Таблицы



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

Компания Контакты Страна
Alfreds Futterkiste Мария Андерс Германия
Berglunds snabbköp Кристина Берглунд Швеция
Centro comercial Moctezuma Франсиско Чанг Мексика
Ernst Handel Роланд Мендель Австрия
Island Trading Хелен Беннетт Великобритания
Königlich Essen Филипп Крамер Германия
Laughing Bacchus Winecellars Йоши Таннфмури Канада
Magazzini Alimentari Riuniti Иоанн Ровелли Италия

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

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

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

Пример

table, th, td {
   border: 1px solid black;
}
Редактор кода »

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


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

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

Пример

table {
   border-collapse: collapse;
}

table, th, td {
   border: 1px solid black;
}
Редактор кода »

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

Пример

table {
    border: 1px solid black;
}
Редактор кода »

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

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

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

Пример

table {
   width: 100%;
}

th {
   height: 50px;
}
Редактор кода »

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

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

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

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

Пример

th {
   text-align: left;
}
Редактор кода »

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

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

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

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

Пример

td {
   height: 50px;
   vertical-align: bottom;
}
Редактор кода »

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

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

Пример

th, td {
   padding: 15px;
   text-align: left;
}
Редактор кода »

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

Имя Фамилия Сбережение
Андрей Щипунов $100
Сергей Щипунов $150
Леонид Щипунов $300

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

Пример

th, td {
   border-bottom: 1px solid #ddd;
}
Редактор кода »

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

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

Имя Фамилия Сбережение
Андрей Щипунов $100
Сергей Щипунов $150
Леонид Щипунов $300

Пример

tr:hover {background-color: #f5f5f5}
Редактор кода »

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

Имя Фамилия Сбережение
Андрей Щипунов $100
Сергей Щипунов $150
Леонид Щипунов $300

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

Пример

tr:nth-child(even) {background-color: #f2f2f2}
Редактор кода »

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

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

Имя Фамилия Сбережение
Андрей Щипунов $100
Сергей Щипунов $150
Леонид Щипунов $300

Пример

th {
   background-color: #4CAF50;
   color: white;
}
Редактор кода »

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

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

Имя Фамилия Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки
Андрей Щипунов 50 50 50 50 50 50 50 50 50 50 50 50
Сергей Щипунов 94 94 94 94 94 94 94 94 94 94 94 94
Леонид Щипунов 67 67 67 67 67 67 67 67 67 67 67 67

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

Пример

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

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

</div>
Редактор кода »

Еще примеры

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

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



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

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