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

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

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

Month
’94
’95
’96
’97
’98
’99
’00
’01
’02
Jan141314131411111111
Feb131512151512141313
Mar161514171615141515
Apr171617171715151616
May212020212220212019
Jun242325242523252324
Jul292826262726252625
Aug292827282827262826
Sep242323262424242221
Oct2022202220192022
Nov1817161716151415
Dec1513131413101311

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

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
Jan141314131411111111
Feb131512151512141313
Mar161514171615141515
Apr171617171715151616
May212020212220212019
Jun242325242523252324
Jul292826262726252625
Aug292827282827262826
Sep242323262424242221
Oct2022202220192022
Nov1817161716151415
Dec1513131413101311

Додав: 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