Разукрашиваем таблицу

В CSS3 появились удобные средства для улучшения стилевых таблиц печати и разбиения контента на столбцы.

  • :nth-of-type [p:nth-of-type(2n+l){color: red;}] - Поиск всех элементов определенного типа.
  • :first-child [р: first-child{ color: blue;}] - Поиск первого дочернего элемента.
  • :nth-child [p:nth-child(2n+l){color: red;}] - Поиск заданного дочернего элемента в прямом направлении (от начала к концу).
  • :last-child [p:last-child{color:blue;}] - Поиск последнего дочернего элемента.
  • :nth-last-child [p:nth-last-child(2){color: red;}] - Поиск заданного дочернего элемента в обратном направлении.
  • :first-of-type [p:first-of-type{color:blue;}] - Поиск первого элемента заданного типа.
  • :last-of-type [р:last-of-type{color:blue;}] - Поиск последнего элемента заданного типа.

Поддержка столбцов

  • [#content{ column-count: 2; column-gap: 20рх; column-rule: lpx solid #ddccb5; }] - Разбиение области контента на несколько столбцов.
  • :after [span.weight:after { content: "lbs"; color: #bbb; }] - Используется с content для вставки контента после заданного элемента.
  • [media="only all and (max-width: 480)"] - Применение стилей в зависимости от параметров устройства.

Создадим простую таблицу без стилей. Она будет выглядеть так.

Название Цена Количество Итого
Кружка $10.00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00

Зебра (:nth-of-type)

Эффект зебры (чередование цвета строк) полезен тем, что упрощает просмотр данных по строкам. Раньше в строку таблицы приходилось включать дополнительные классы (например, odd и even для нечетных и четных строк соответственно). При помощи новых селекторов мы можем добиться желаемого эффекта без изменения разметки.

Селектор nth-of-type находит каждый элемент конкретного типа, определяемый формулой или ключевыми словами. Чтобы каждая вторая строка таблицы была окрашена в другой цвет, проще всего найти все чётные строки таблицы и назначить им другой цвет фона. То же самое делается с нечетными строками. В CSS3 имеются ключевые слова even и odd, предназначенные именно для таких ситуаций. Фактически этот селектор означает: «Найти каждую чётную строку таблицы и задать ее цвет. Затем найти каждую нечётную строку таблицы и задать её цвет».

table{
    border-collapse: collapse; 
    width: 600px;
}

th, td{
    border: none;  
}

th{
    background-color: #000; 
    color: #fff;
}

tr:nth-of-type(even){
    background-color:  #F3F3F3;
}
tr:nth-of-type(odd){ 
    background-color:#ddd;
}
Название Цена Количество Итого
Кружка $10.00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00

Выравнивание текста столбцов (:nth-child)

По умолчанию текст во всех столбцах таблицы выравнивается по левому краю. Мы выровняем по правому краю все столбцы, кроме первого, чтобы цена и количество единиц товара лучше читались. Для этого мы воспользуемся селектором nth-child.

Селектор nth-child ищет дочерние элементы заданного элемента; по аналогии с nth-of-type, он может использовать ключевые слова или формулу. Формула определяется в виде an + b, где а — множитель, n — счетчик, начинающийся с 0, b — смещение. Принцип использования формул проще понять в контексте; давайте применим его в таблице.

Для выбора всех строк таблицы можно воспользоваться селектором вида:

table tr:nth-child(n)

В этом примере не указан ни множитель, ни смещение.

Все строки таблицы, кроме первой (строка с заголовками столбцов), выбираются при помощи селектора со смещением:

table tr:nth-child(n+2)

Счетчик равен 0, но со смещением 2, отсчёт начинается не от начала таблицы, а со второй строки.

Для выбора каждой второй строки таблицы используется множитель 2:

table tr:nth-child(2n)

Каждая третья строка выбирается при помощи множителя 3n.

Если прибавить к множителю смещение, то поиск будет начинаться не от начала таблицы, а с одной из следующих строк. Следующий селектор находит каждую вторую строку, начиная с четвертой:

table tr :nth-child(2n+4)

Итак, для выравнивания всех столбцов, кроме первого, используется следующая запись:

td:nth-child(n+2), th:nth-child(n+2){ 
    text-align:  right;
}
Название Цена Количество Итого
Кружка $10.00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00

Последняя строка (:last-child)

Хотите, чтобы нижняя строка выделялась жирным шрифтом? Воспользуемся селектором last-child, который находит последний дочерний элемент группы.


tr:last-child{
    font-weight:  bolder;
}

Выделим также последний столбец таблицы, чтобы суммы строк тоже выделялись на общем фоне:


td:last-child{
    font-weight:  bolder;
}

Наконец, при помощи селектора last-child можно увеличить размер шрифта общей суммы в правом нижнем углу таблицы. Мы находим последний столбец последней строки и изменяем его оформление.


tr:last-child td:last-child{ 
    font-size:24px;
}
Название Цена Количество Итого
Кружка $10.00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00

Поиск в обратном направлении (:nth-last-child)

Если стоимость доставки снижена под действием скидки, то соответствующая строка таблицы должна выделяться цветом. Для быстрого поиска этой строки удобно использовать селектор nth-last-child. Вы уже видели, как селектор nth-child и формула аn+b используются для выбора конкретных дочерних элементов. Селектор nth-last-child работает практически так же, если не считать того, что он перебирает дочерние элементы в обратном порядке, начиная с последнего. Это позволяет легко найти предпоследний элемент группы.

Селектор определяет конкретный дочерний элемент — второй с конца.


tr:nth-last-child(2){ 
    color: green;
}

В оформление таблицы осталось внести последний штрих. Ранее мы выровняли по правому краю все столбцы, кроме первого. Для строк с опи саниями и ценами товаров такое выравнивание естественно, но последние три строки выглядят немного странно. Для них лучше использовать выравнивание по правому краю. Для решения этой задачи мы используем селектор nth-last-child с отрицательным множителем и положительным смещением.


tr:nth-last-child(-n+3) td{
    text-align: right;
}

Такая формула реализует интервальный выбор. В ней используется смещение 3, а с селектором nth-last-child выбирается каждый элемент до заданного смещения. Если бы вместо него использовался селектор nth-child, то строки выбирались бы от начала таблицы.

Название Цена Количество Итого
Кружка $10.00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00
Реклама