Учебник по 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 Z-индекс 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 2D-преобразования CSS CSS 3D-преобразования CSS-переходы CSS-анимации Подсказки CSS Изображения в стиле CSS Отражение изображения CSS CSS объект-подгонка CSS-позиция объекта Маскировка CSS CSS-кнопки Разбивка на страницы CSS Несколько столбцов CSS Пользовательский интерфейс CSS CSS-переменные Размер блока CSS Медиа-запросы CSS Примеры CSS MQ CSS флексбокс

CSS Отзывчивый

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

CSS -сетка

Введение в сетку Контейнер сетки Элемент сетки

CSS SASS

Учебник по SASS

Примеры CSS

CSS-шаблоны Примеры CSS css викторина CSS-упражнения Сертификат CSS

Ссылки на CSS

Справочник по CSS Селекторы CSS CSS-функции Справочник по CSS Безопасные веб-шрифты CSS CSS анимация Единицы CSS Конвертер CSS PX-EM Цвета CSS Значения цвета CSS Значения CSS по умолчанию Поддержка CSS-браузера

Стиль таблицы CSS


Заполнение таблицы

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

Пример

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: yellow;}

Полосатые столы

Имя Фамилия Экономия
Питер Грифон 100 долларов
Лоис Грифон 150 долларов
Джо Суонсон 300 долларов

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

Пример

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

Цвет стола

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

Имя Фамилия Экономия
Питер Грифон 100 долларов
Лоис Грифон 150 долларов
Джо Суонсон 300 долларов

Пример

th {
  background-color: #04AA6D;
  color: white;
}