ЮРІЙ ЧЕРНІЄВСЬКИЙ

ПЕРСОНАЛЬНИЙ САЙТ

Оформлення таблиці за допомогою псевдокласів

Задати стиль для таблиці і всіх її рядків можна за допомогою стандартних способів оформлення, можна також за потреби призначити кожній клітинці окремий клас. Але як бути, якщо потрібно, наприклад, виділити окрему клітинку і  щоб при цьому не призначати для кожної клітинки окремий class? Для цього можна скористатися комбінацією селекторів і псевдокласів.

В даному уроці наведені 15 варіантів відбору елементів таблиці за допомогою структурних псевдокласів. Насправді варіантів може бути більше, але ми сьогодні розглянемо основні, які розкривають нам таємницю застосування псевдокласів.

Клітинки

1. Перша клітинка першого рядка таблиці

th:first-child {background: #ff8000}

Перша клітинка першого рядка таблиці
Перша клітинка першого рядка таблиці

2. Перша клітинка останнього рядка таблиці

tr:last-child td:first-child {background: #ff8000}

Перша клітинка останнього рядка таблиці
Перша клітинка останнього рядка таблиці

3. Остання клітинка останнього рядка таблиці

tr:last-child td:last-child {background: #ff8000}

Остання клітинка останнього рядка таблиці
Остання клітинка останнього рядка таблиці

4. Остання клітинка першого рядка таблиці

th:last-child {background: #ff8000}

Остання клітинка першого рядка таблиці
Остання клітинка першого рядка таблиці

5. Третя клітинка третього рядка тіла таблиці (<tbody>)1

tr:nth-child(3) td:nth-child(3) {background: #ff8000}

Третя клітинка третього рядка таблиці тіла таблиці (<tbody>)
Третя клітинка третього рядка таблиці тіла таблиці (<tbody>)

6. Четверта клітинка третього рядка тіла таблиці (<tbody>)

tr:nth-child(3) td:nth-child(4) {background: #ff8000}

Четверта клітинка третього рядка тіла таблиці (<tbody>)
Четверта клітинка третього рядка тіла таблиці (<tbody>)

Стовпчики

7. Перший стовпчик таблиці

th:first-child, td:first-child {background: #ff8000}

Перший стовпчик таблиці
Перший стовпчик таблиці

8. Третій стовпчик таблиці

td:nth-child(3), th:nth-child(3) {background: #ff8000}

Третій стовпчик таблиці
Третій стовпчик таблиці

9. Останній стовпчик таблиці

th:last-child, td:last-child {background: #ff8000}

Останній стовпчик таблиці
Останній стовпчик таблиці

Рядки

10. Перший рядок таблиці

th {background: #ff8000}

Перший рядок таблиці
Перший рядок таблиці

11. Другий рядок таблиці після верхнього колонтитулу тіла таблиці (<tbody>)

tr:nth-child(2){background:#ff8000}

Другий рядок таблиці після верхнього колонтитулу тіла таблиці (<tbody>)
Другий рядок таблиці після верхнього колонтитулу тіла таблиці (<tbody>)

12. Третій рядок тіла таблиці (<tbody>)

tr:nth-child(3){background:#ff8000}

Третій рядок тіла таблиці (<tbody>)
Третій рядок тіла таблиці (<tbody>)

13. Таблиця-зебра (кожний парний рядок) тіла таблиці (<tbody>)

tr:nth-child(even) {background: #ff8000}

Таблиця-зебра (кожний парний рядок) тіла таблиці (<tbody>)
Таблиця-зебра (кожний парний рядок) тіла таблиці (<tbody>)

14. Таблиця-зебра (кожний непарний рядок) тіла таблиці (<tbody>)

tr:nth-child(odd) {background: #ff8000}

Таблиця-зебра (кожний непарний рядок) тіла таблиці (<tbody>)
Таблиця-зебра (кожний непарний рядок) тіла таблиці (<tbody>)

15. Останній рядок тіла таблиці (<tbody>)

tr:last-child {background: #ff8000}

Останній рядок тіла таблиці (<tbody>)
Останній рядок тіла таблиці (<tbody>)

Обговорення даної публікації на форумі.


  1. У випадку, коли таблиця не розбита на групи змісту <caption>, <thead>, <tbody> та <tfoot> нумерація відбувається у звичайному порядку.