CSS Стиль таблицы
Заполнение таблицы
Чтобы управлять пространством между границей и содержимым таблицы, используйте свойство padding для элементов <td> и <th>:
| Фамилия | Имя | Сбережения |
|---|---|---|
| Щипунов | Андрей | $100 |
| Щипунова | Татьяна | $150 |
| Щипунова | Кристина | $300 |
Горизонтальные разделители
| Фамилия | Имя | Сбережения |
|---|---|---|
| Щипунов | Андрей | $100 |
| Щипунова | Татьяна | $150 |
| Щипунова | Кристина | $300 |
Добавьте свойство border-bottom к <th> и <td> для горизонтальных разделителей:
Таблица при наведении
Используйте :hover в <tr>, чтобы выделить строки таблицы при наведении курсора мыши:
| Фамилия | Имя | Сбережения |
|---|---|---|
| Щипунов | Андрей | $100 |
| Щипунова | Татьяна | $150 |
| Щипунова | Кристина | $300 |
Полосатая таблица
| Фамилия | Имя | Сбережения |
|---|---|---|
| Щипунов | Андрей | $100 |
| Щипунова | Татьяна | $150 |
| Щипунов | Кристина | $300 |
Для таблиц в полоску "зебра" используйте селектор nth-child() и добавьте background-color ко всем четным (или нечетным) строкам таблицы:
Цветная таблица
Приведенный ниже пример определяет цвет фона и цвет текста элементов <th> элементов:
| Фамилия | Имя | Сбережения |
|---|---|---|
| Щипунов | Андрей | $100 |
| Щипунова | Татьяна | $150 |
| Щипунов | Кристина | $300 |