CSS Стиль таблиці
Відступи в таблиці - padding
Щоб контролувати відстань між межею та змістом таблиці, використовуйте властивість padding на елементах <td> та <th>:
| First Name | Last Name | Savings |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Горизонтальні роздільники
| Ім’я | Прізвище | Доходи |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Додайте властивість border-bottom до <th> та <td> для горизонтальних роздільників:
Виділення рядків таблиці при наведенні
Використовуйте селектор :hover на <tr> щоб виділити рядки таблиці при наведенні курсору:
| Ім’я | Прізвище | Доходи |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Смугаста таблиця
| Ім’я | Прізвище | Доходи |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
Для таблиць зі смугами зебри використовуйте селектор nth-child() та додайте background-color (колір фону) до всіх парних (або непарних) рядків таблиці:
Колір таблиці
В наведеному нижче прикладі вказані колір фону та колір тексту для елементів <th>:
| Ім’я | Прізвище | Доходи |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
