Оформление таблицы с помощью псевдоклассов

С помощью стандартных способов оформления можно задать стиль для таблицы и всех её строк. Но как быть, если требуется, например, выделить отдельную ячейку? Чтобы не задавать для ячейки class, можно воспользоваться комбинацией селекторов и псевдоклассов.

В данном уроке приведены различные варианты отбора элементов таблицы с помощью структурных псевдоклассов.

<table>
<tr><th>Company</th><th>Q1</th><th>Q2</th><th>Q3</th><th>Q4</th></tr>
<tr><td>Microsoft</td><td>20.3</td><td>30.5</td><td>23.5</td><td>40.3</td></tr>
<tr><td>Google</td><td>50.2</td><td>40.63</td><td>45.23</td><td>39.3</td></tr>
<tr><td>Apple</td><td>25.4</td><td>30.2</td><td>33.3</td><td>36.7</td></tr>
</table>

1. Первая срока таблицы

th {background: #C9E3FE}

2. Последняя строка таблицы

tr:last-child {background: #C9E3FE}

3. Третья строка таблицы

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

4. Таблица-зебра (каждая четная строка)

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

5. Таблица-зебра (каждая нечетная строка)

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

6. Первая ячейка первой строки таблицы

th:first-child {background: #C9E3FE}

7. Последняя ячейка первой строки таблицы

th:last-child {background: #C9E3FE}

8. Первая ячейка последней строки таблицы

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

9. Последняя ячейка последней строки таблицы

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

10. Третья ячейка третьей строки таблицы

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

11. Первый столбец таблицы

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

12. Третий столбец таблицы

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

13. Последний столбец таблицы

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