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

pseudo-class

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

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

Разметка HTML

<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}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

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

tr:last-child {background: #C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

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

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

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

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

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

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

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

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

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

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

th:first-child {background: #C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

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

th:last-child {background: #C9E3FE}

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

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

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

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

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

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

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

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

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

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

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

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

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

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

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

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7

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

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

Company Q1 Q2 Q3 Q4
Microsoft 20.3 30.5 23.5 40.3
Google 50.2 40.63 45.23 39.3
Apple 25.4 30.2 33.3 36.7
  • Создание Сайтов

    Очень хорошая шпаргалка. Часто приходится ломать голову с таблицами.

    • Спасибо, пользуйтесь.

      • Создание Сайтов

        Кстати, заметил, что сам код таблицы тут не написан. Это тоже важный элемент.

        • Спасибо за комментарий, добавила.

          • Создание Сайтов

            Немного не то. Наверное я неправильно пояснил. Сами стили таблицы. Там еще в скайпе я писал. Никто не отвечает.

          • Так это уже давно разобрано в статье http://html5book.ru/css3-tables/#top_table

          • Создание Сайтов

            Значит запамятовал. Ссылка на этот пост тут будет как раз кстати.

  • Создание Сайтов

    Если есть возможность, напишите пост по формам поиска по сайту, может есть какие-то оригинальные варианты.

    • Хорошо, напишу. Для уточнения — вас интересуют способы оформления или еще что-то?

      • Создание Сайтов

        Да, именно оформление стилями.

  • )) Благодарю за внимательность!