HTML Стилізація таблиць
Використовуйте CSS, щоб ваші таблиці мали кращий (стилізований) вигляд.
HTML-таблиця – Смуги зебри
Якщо ви додасте колір фону в кожен другий рядок таблиці, ви отримаєте красивий ефект смуг зебри.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Щоб стилізувати будь-який інший елемент рядка таблиці, використовуйте селектор :nth-child(even), як показано нижче:
Примітка: Якщо ви використовуєте (odd) (непарний) замість (even) (парний), стилізація буде застосована до рядків 1,3, 5 і т.д. замість 2,4,6 і т.д.
HTML Таблиця - Вертикальні смуги зебри
Щоб зробити вертикальні смуги зебри, налаштуйте стиль для кожного другого стовпця, а не для кожного другого рядка.
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
Встановіть :nth-child(even) для елементів даних таблиці наступним чином:
Примітка: Розташуйте селектор :nth-child() як на th, так і на td елементах, якщо ви хочете, щоб стиль застосовувався як до заголовків, так і до звичайних чарунок таблиці.
Комбінуйте вертикальні та горизонтальні смуги зебри
Ви можете комбінувати стилі з двох наведених вище прикладів, і у вас будуть смуги в кожному другому рядку і в кожному другому стовпці.
Якщо ви використовуєте прозорий колір, ви отримаєте ефект перекриття.
Використовуйте колір rgba(), щоб вказати прозорість кольору:
Приклад
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
Спробуйте самі »
Горизонтальні роздільники
| Ім’я | Прізвище | Зарплата |
|---|---|---|
| Peter | Griffin | $1000 |
| Lois | Griffin | $1500 |
| Joe | Swanson | $3000 |
Якщо ви вкажете межі лише знизу кожного рядка таблиці, у вас буде таблиця з горизонтальними роздільниками.
Додайте властивість border-bottom до всіх елементів tr, щоб отримати горизонтальні роздільники:
Таблиця при наведенні
Використовуйте селектор :hover на tr, щоб виділити рядки таблиці при наведенні вказівника миші:
| Ім’я | Прізвище | Зарплата |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
