Стилізація рядків таблиці
Досить часто для наочності даних приставлених в таблиці потрібно стилізувати рядка, таким чином, щоб кожні парні або непарні рядки або колонки мали свій колір фону або тексту. Цей метод раніше не підтримувався в старих браузерах, і для кросбраузерності доводилося це справа виконувати за допомогою скриптів. Сьогодні ж ці правила перестають бути з тих, що підтримуються деякими браузерами, і в переважній більшості браузерів працюють.
Стилі для стік прописуються в такому вигляді:

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

В результаті чого ми можемо досягти такого ось виду:

Month
’94
’95
’96
’97
’98
’99
’00
’01
’02
Jan 14 13 14 13 14 11 11 11 11
Feb 13 15 12 15 15 12 14 13 13
Mar 16 15 14 17 16 15 14 15 15
Apr 17 16 17 17 17 15 15 16 16
May 21 20 20 21 22 20 21 20 19
Jun 24 23 25 24 25 23 25 23 24
Jul 29 28 26 26 27 26 25 26 25
Aug 29 28 27 28 28 27 26 28 26
Sep 24 23 23 26 24 24 24 22 21
Oct 20 22 20 22 20 19 20 22
Nov 18 17 16 17 16 15 14 15
Dec 15 13 13 14 13 10 13 11

Насправді правило дозволяє не тільки задавати параметри для парних/непарних полів, але і допускаються довільні інтервали. Наприклад, для довгих списків ви могли б задавати такі інтервали:

li:nth-child(5n+3) {font-weight: bold; }

Стилізація колонок таблиці
Ми знаємо, як можна стилізувати рядки таблиці, тепер давайте подивимося, як можна стилізувати колонки таблиці, таким же чином, як і в прикладі зазначеному вище. Для стилізації колонок таблиці нам необхідно всередині таблиці, перед тим як йдуть теги tr td вказати теги col:

Month’94’95’96…

Зробимо першу колонку таблиці жовтим кольором, потім, всі наступні кожні другі колонки сірим кольором.

col:first-child {background: #FF0; }
col:nth-child(2n+3) {background: #CCC; }

Month
’94
’95
’96
’97
’98
’99
’00
’01
’02
Jan 14 13 14 13 14 11 11 11 11
Feb 13 15 12 15 15 12 14 13 13
Mar 16 15 14 17 16 15 14 15 15
Apr 17 16 17 17 17 15 15 16 16
May 21 20 20 21 22 20 21 20 19
Jun 24 23 25 24 25 23 25 23 24
Jul 29 28 26 26 27 26 25 26 25
Aug 29 28 27 28 28 27 26 28 26
Sep 24 23 23 26 24 24 24 22 21
Oct 20 22 20 22 20 19 20 22
Nov 18 17 16 17 16 15 14 15
Dec 15 13 13 14 13 10 13 11

Додав: htmaker, 06.08.2016 р.
(Ще не оцінили)

Завантаження…

Діліться з друзями:

См. також:


Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO

Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript

Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека

Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript

Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript

Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript

Список вибору на JQuery
Рубрика: Html, CSS, Javascript

Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript

Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript

СТАТТІ ПО ТЕМІБІЛЬШЕ ВІД АВТОРА