Стилизация таблицы-зебры при помощи псевдоклассов

/ 👁 4871

Бывает, что часть контента на нашем сайте нужно оформить в виде таблицы, которая будет содержать определенную информацию. Как в таком случае лучше всего стилизовать эту таблицу? Думаю, довольно часто Вам встречались таблицы в виде «зебры». Это те таблицы, у которых строки через одну окрашены в определенный цвет. Плюсом таких таблиц является их читабельность. Сегодня я расскажу Вам, как достаточно просто можно стилизовать таблицу таким образом при помощи псевдоклассов.
дополнительные материалы к урокам

демо версия урока

1. Первым делом нам нужно создать html-файл и в нем ту самую таблицу, которую мы будем стилизовать. Давайте этим и займемся.

Я создам html5 документ, сразу подключу к нему таблицу стилей, которую мы создадим в следующем шаге и создам в теле документа таблицу.

<!doctype html>
<html>
<head>
<meta charset="windows-1251">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<table width="600" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

 

Вот так сейчас будет выглядеть наша таблица, если мы откроем html файл в браузере:

html документ с таблицей

2. Теперь самое время создать файл таблицы стилей «style.css» и начать стилизовать нашу таблицу.

Создайте этот файл и сохраните его в том же каталоге, что и html файл. Если будете сохранять в другом каталоге, то не забудьте исправить путь к файлу при его подключении в html.

Стилизуем таблицу-зебру

Для стилизации мы будем пользоваться псевдоклассом «:nth-child».

Самым простым способом стилизовать четные и нечетные строки в таблице является использование ключевых слов «odd» (нечетные элементы из набора) и «even» (четные элементы из набора).

Делается это очень просто. В Вашем файле таблицы стилей пропишите следующее:

tr:nth-child(odd) {background-color:#CCC;}
tr:nth-child(even) {background-color:#FFC;}

 

Фоновый цвет Вы можете выбрать любой. Кроме фонового цвета Вы можете задавать и другие правила, например, толщину шрифта, его тип и т. д.

В итоге, если Вы обновите страницу в браузере, то увидите следующее:

стилизация таблицы-зебры при помощи псевдоклассов

Как Вы можете видеть, все нечетные строки окрасились в серый цвет, а все четные в светло-желтый.

3. Но это лишь один из самых простых способов использования псевдокласса «:nth-child».

На самом же деле, с его помощью мы можем выбирать элементы одной группы самыми разнообразными способами.

Что, например, если я захочу, помимо всего прочего, закрасить все строки первой и последней ячеек в определенный цвет, но при этом мои две ячейки посередине должны так и остаться в виде «зебры».

Это сделать также достаточно просто.

Первым делом мне нужно выбрать элемент ячейки, далее применить к нему псевдокласс с соответствующими параметрами в скобках.

Вот таким образом:

tr td:nth-child(3n+1){background-color:#069;}

 

Давайте поясним этот код.

«3n» обозначает, что мы выбираем каждый третий ряд. А «+1» обозначает, что выборка будет начинаться с первого ряда. Таким образом будет выбран самый первый ряд и третий после него.

В нашем случае, у нас в таблице имеется только 4 ряда, поэтому в синий цвет окрасятся как раз первый и последний ряды.

стилизуем первый и последний ряд таблицы

Если бы в нашей таблице было бы больше рядов, то в выборку попали бы первый ряд и далее каждый третий.

Если бы мы прописали тот же самый код, но без «+1»:

tr td:nth-child(3n){background-color:#069;}

 

Тогда выборка была бы совсем другой. У нас бы просто выбирался каждый третий ряд и результат был бы вот таким:

выборка элементов при помощи псевдоклассов

Думаю, что теперь такой принцип выборки при помощи псевдокласса «:nth-child» стал для Вас более понятен.

Вы можете менять параметры в скобках и, таким образом, выбирать элементы так, как Вам нужно. Здесь нужно только немного практики.

Однако, этот способ достаточно удобен, так как Вам не нужно присваивать классы каждой строке или столбцу в таблице.

Так что практикуйте и пользуйтесь на здоровье!

На этом у меня сегодня все.

Жду Ваших отзывов! Не забывайте делиться уроком с друзьями при помощи кнопок социальных сетей, которые Вы найдете ниже.

Подписывайтесь на обновление блога и будьте в курсе самых интересных и полезных статей и уроков!

С Вами была Анна Котельникова.

Успехов и до новых встреч!

Tags: ,

Leave a Reply