Таблица зебра на CSS

Таблица зебра на CSSТаблица зебра – это таблица с чередованием цветов.
Для создания “зебры” в таблице, можно воспользоваться JS. Но, такой метод будет довольно хлопотный. Можно создать “зебру” вручную, то есть к каждому тегу tr добавлять классы. Такой способ подойдет для небольших таблиц. А что, если строчек в таблице много? То тогда без автоматизирования будет долго. А что бы не пользоваться JS, можно использовать псевдокласс CSS3 :nth-child.

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Синтаксис

элемент:nth-child(odd | even | <число> | <выражение>) {...}

Значения могут быть:

odd – Все нечетные номера элементов.

even – Все четные номера элементов.

число – Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.

выражение – Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…


Итак приступим к работе, для начала нам надо создать таблицу.

<table cellspacing="0" border="1" >
  <tr>
    <td>№</td>
    <td>Страна</td>
    <td>Площадь,км<sup>2<sup></td>
  </tr>
  <tr>
    <td>1</td>
    <td>Россия</td>
    <td>17 075 400</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Канада</td>
    <td>9 984 670</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Китай</td>
    <td>9 596 960</td>
  </tr>
  <tr>
    <td>4</td>
    <td>США</td>
    <td>9 372 610</td>
  </tr>
  <tr>
    <td>5</td>
    <td>Бразилия</td>
    <td>8 547 000</td>
  </tr>
</table>

Атрибут cellspacing определяет, сколько нужно отступить между ячейками. 0 – отменяет отступы.

Атрибут border – это границы таблицы

Добавляем стили

table tr:nth-child(odd){
   background-color: #c8c8c8;
}

Этим мы задали, что если тег tr будет по счету нечетным, то ему будет задан цвет фона #c8c8c8.

Теперь приукрасим нашу таблицу

table, tr, td  {
   color:#27271E; /* Цвет текста */
   border:1px solid #8C7676; /* Границы */
   border-collapse:collapse;    /* Убираем двойную обводку между ячейками */
}

td {
   padding:5px;    /* Внутренний отступ */
}

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock detector