Заполнение таблицы
Чтобы управлять пространством между границей и содержимым таблицы, используйте в 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;
}
Попробуйте сами »