Стиль таблицы 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;
}