CSS Стиль таблицы
Заполнение таблицы
Чтобы управлять пространством между границей и содержимым таблицы, используйте в CSS свойство padding
для элементов <td> и <th>:
Фамилия | Имя | Сбережения |
---|---|---|
Щипунов | Андрей | $100 |
Щипунова | Татьяна | $150 |
Щипунова | Кристина | $300 |
th, td
{
padding: 15px;
text-align: left;
}
Попробуйте сами »
Горизонтальные разделители таблицы
Фамилия | Имя | Сбережения |
---|---|---|
Щипунов | Андрей | $100 |
Щипунова | Татьяна | $150 |
Щипунова | Кристина | $300 |
Добавьте CSS свойство border-bottom
к элементам <th> и <td> для горизонтальных разделителей:
th, td {
border-bottom: 1px solid #ddd;
}
Попробуйте сами »
Таблица при наведении курсора
Используйте в CSS селектор :hover
к элементу <tr>, чтобы выделить строки таблицы при наведении курсора мыши:
Фамилия | Имя | Сбережения |
---|---|---|
Щипунов | Андрей | $100 |
Щипунова | Татьяна | $150 |
Щипунова | Кристина | $300 |
tr:hover {background-color: coral;}
Попробуйте сами »
Полосатая таблица
Фамилия | Имя | Сбережения |
---|---|---|
Щипунов | Андрей | $100 |
Щипунова | Татьяна | $150 |
Щипунов | Кристина | $300 |
Для таблиц в полоску "зебра" используйте в CSS селектор nth-child()
и добавьте background-color
ко всем четным (или нечетным) строкам таблицы:
tr:nth-child(even) {background-color: #f2f2f2;}
Попробуйте сами »
Фон и цвет таблицы
Приведенный ниже пример в CSS свойство background-color
и color
определяет цвет фона и цвет текста элементов <th> элементов:
Фамилия | Имя | Сбережения |
---|---|---|
Щипунов | Андрей | $100 |
Щипунова | Татьяна | $150 |
Щипунов | Кристина | $300 |
th {
background-color: #04AA6D;
color: white;
}
Попробуйте сами »