Css таблица разноцветные строки. Выбор элементов определенного типа по их индексу

Здравствуйте уважаемые читатели! При просомтре таблиц с большим количеством строк и столбцов бывает сложно отследить какие данные относятся к конкретной строке. Поэтому чтобы улучшить восприятие информации пользователями сайта и повысить юзабилити, можно использовать чередование фонового цвета в строках таблицы, либо в кнопках навигационного меню.

С появлением CSS3 эффекта чередования фонового цвета можно добиться исключительно средствами CSS, не изменяя HTML-разметки документа. Для этого используется псевдокласс nth-child , который позволяет выбрать все четные или нечетные элементы, используя значения odd — нечетные или even — четные элементы, либо числовое выражение an+b , где a и b целые числа, а n счетчик, который принимает значения 0, 1, 2... и так далее. Перейдем от теории к практике.

Допустим у Вас на сайте есть какая-то большая таблица. Например таблица футбольного чемпионата:

М	Команда	И	В	Н	П	Заб	Проп	О
1	Зенит	30	20	7	3	58	17	67
2	ЦСКА	30	19	3	8	67	27	60
3	Краснодар	30	17	9	4	52	27	60
4	Динамо	30	14	8	8	53	36	50
5	Рубин	30	13	9	8	39	33	48
6	Спартак	30	12	8	10	42	42	44
7	Локомотив	30	11	10	9	31	25	43
8	Мордовия	30	11	5	14	22	43	38
9	Терек	30	10	7	13	30	30	37
10	Кубань	30	8	12	10	32	36	36
11	Амкар	30	8	8	14	25	42	32
12	Уфа	30	7	10	13	26	39	31
13	Урал	30	9	3	18	31	44	30
14	Ростов	30	7	8	15	27	51	29
15	Торпедо	30	6	11	13	28	45	29
16	Арсенал Тула	30	7	4	19	20	46	25

HTML-код таблицы с минимальным оформлением:

table {
border-collapse: collapse;
margin: 0px auto;
}
th, td {
border: solid 1px #000;
padding: 5px;
}

М	Команда	И	В	Н	П	Заб	Проп	О
1	Зенит	30	20	7	3	58	17	67
2	ЦСКА	30	19	3	8	67	27	60
3	Краснодар	30	17	9	4	52	27	60
4	Динамо	30	14	8	8	53	36	50
5	Рубин	30	13	9	8	39	33	48
6	Спартак	30	12	8	10	42	42	44
7	Локомотив	30	11	10	9	31	25	43
8	Мордовия	30	11	5	14	22	43	38
9	Терек	30	10	7	13	30	30	37
10	Кубань	30	8	12	10	32	36	36
11	Амкар	30	8	8	14	25	42	32
12	Уфа	30	7	10	13	26	39	31
13	Урал	30	9	3	18	31	44	30
14	Ростов	30	7	8	15	27	51	29
15	Торпедо	30	6	11	13	28	45	29
16	Арсенал Тула	30	7	4	19	20	46	25

Таблица имеет много строк и столбцов и при однородном фоне ее тяжело просматривать. Для улучшения восприятия здесь как раз поможет чередование фонового цвета у четных и нечетных строк . Для этого добавляем следующий CSS-код:

tbody tr:nth-child (odd) {
background-color: #C9E4F6;/* фон нечетных строк */
}
tbody tr:nth-child (even) {
background-color: #B4DAF2;/* фон четных строк */
}

Результат:

М	Команда	И	В	Н	П	Заб	Проп	О
1	Зенит	30	20	7	3	58	17	67
2	ЦСКА	30	19	3	8	67	27	60
3	Краснодар	30	17	9	4	52	27	60
4	Динамо	30	14	8	8	53	36	50
5	Рубин	30	13	9	8	39	33	48
6	Спартак	30	12	8	10	42	42	44
7	Локомотив	30	11	10	9	31	25	43
8	Мордовия	30	11	5	14	22	43	38
9	Терек	30	10	7	13	30	30	37
10	Кубань	30	8	12	10	32	36	36
11	Амкар	30	8	8	14	25	42	32
12	Уфа	30	7	10	13	26	39	31
13	Урал	30	9	3	18	31	44	30
14	Ростов	30	7	8	15	27	51	29
15	Торпедо	30	6	11	13	28	45	29
16	Арсенал Тула	30	7	4	19	20	46	25

Можно сделать акцент на столбцы оформив вертикальную зебру . Для этого используется все тот же псевдокласс nth-child и применяем его к элементам td . А при наведении на строку выделять ее цветом с помощью псевдокласса hover:

td:nth-child (odd) {
background-color: #C9E4F6;/* фон нечетных столбцов */
}
td:nth-child (even) {
background-color: #B4DAF2;/* фон четных столбцов */
}
tr:hover td{
background: #B4FFF2;/* фон строки при наведении */
}

Результат:

М	Команда	И	В	Н	П	Заб	Проп	О
1	Зенит	30	20	7	3	58	17	67
2	ЦСКА	30	19	3	8	67	27	60
3	Краснодар	30	17	9	4	52	27	60
4	Динамо	30	14	8	8	53	36	50
5	Рубин	30	13	9	8	39	33	48
6	Спартак	30	12	8	10	42	42	44
7	Локомотив	30	11	10	9	31	25	43
8	Мордовия	30	11	5	14	22	43	38
9	Терек	30	10	7	13	30	30	37
10	Кубань	30	8	12	10	32	36	36
11	Амкар	30	8	8	14	25	42	32
12	Уфа	30	7	10	13	26	39	31
13	Урал	30	9	3	18	31	44	30
14	Ростов	30	7	8	15	27	51	29
15	Торпедо	30	6	11	13	28	45	29
16	Арсенал Тула	30	7	4	19	20	46	25

Тоже самое можно сделать и для списков. В статье мы сделали несколько вариантов горизонтального меню. Вот одно из них:

Это меню можно немного оживить с помощью чередования фонового цвета у соседних пунктов. Для этого нужно всего лишь добавить одну строчку кода:

ul#menu li:nth-child (odd) {
background-color: #01638D;/* фон нечетных пунктов меню */
}

Результат:

Полный код меню:

#menu, #menu li {
margin: 0;
padding: 0;
}
#menu {
text-align: center;
background: #03658e;
}
#menu li{
display:inline-block;
text-align: center;
width: 20%;
}
#menu a {
display: block;
padding: 5px 15px;
color: #fff;
font-size:150%;
text-decoration: none;
}
#menu a:hover {
background: #8AB8CC;
}
#menu li:nth-child (odd) {
background: #278CB7;/* фон нечетных пунктов меню */
}

Псевдокласса nth-child позволяет применять различные свойства не только к четным или нечетным элементам, но и к конкретным элементам. Так, например, если необходимо изменить цвет шрифта только в первом пункте списка, то поможет следующее CSS правило:

li:nth-child (1){
color:orange;
}

Если надо выделить все строки таблицы начиная с третьей то достаточно такой строчки:

tr:nth-child (n + 3){
background-color: silver;
}

Можно выделить какой-то диапазон, например с четвертого по седьмой:

tr:nth-child (n+4):nth-child (-n+7){
font-size: 20px;
}

Так с помощью простых манипуляций с CSS стилями и псевдокласса nth-child можно менять оформления страницы и значительно улучшить восприятие и юзабилити сайта.

Пробуйте и предлагайте свои варианты. На этом все, до новых встреч!

В этой главе:

Табличные данные - информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется элемент

, представляющий из себя контейнер с содержимым таблицы. Контент таблицы описывается построчно, каждая строка начинается с открывающего тега и заканчивается закрывающим тегом .

Внутри элемента

располагаются ячейки таблицы, представленные элементами или

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

Рамка таблицы

По умолчанию таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border . Но стоит обратить внимание на то, что если добавить рамку только к элементу

, то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов и

Table, th, td { border: 1px solid black; }

Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing , которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.

Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing, то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse . Оно может принимать два значения:

separate: является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
collapse: соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.

Название документа table, td, th { border: 4px outset blue; border-spacing: 5px; } .first { border-collapse: collapse; } ИмяФамилия

Гомер	Симпсон
Мардж	Симпсон

ИмяФамилия

Гомер	Симпсон
Мардж	Симпсон

Размер таблицы

После добавления рамок к ячейкам таблицы стало заметно, что содержимое ячеек слишком близко расположено к краям. Для добавления свободного пространства между краями ячеек и их содержимым можно воспользоваться свойством padding :

Th, td { padding: 7px; }

Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height , задавая нужные размеры или самой таблице или ячейкам:

Table { width: 70%; } th { height: 50px; }

Выравнивание текста

По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.

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

Речь пойдет о «полосатых» HTML-таблицах, т.е. о таблицах с чередующимися строками разных стилей. В частности, для улучшения восприятия данных, эти строки могут быть разноцветными. Ниже пример такой таблицы:

Я поставил себе следующую задачу: не изменяя HTML-файл:

Ланцетники	30 видов	Хордовый скелет
Хрящевые рыбы	600 видов	Хрящевый скелет
Костные рыбы	20 000 видов	Костный скелет
Земноводные	3 000 видов	Ажурный скелет
Пресмыкающиеся	6 000 видов	Сплошной скелет
Птицы	8 000 видов	Сплошной скелет
Млекопитающие	4 000 видов	Сплошной скелет

задать отдельные стилевые классы для четных и нечетных строк таблиц с классом stripy .

Стандартный путь

В сети по запросу «полосатые таблицы» или «таблица зебра» ("striped tables", "zebra tables"), легко обнаружить нужные материалы по теме. Как правило, предлагаемые решения - различные вариации одной идеи: используя JavaScript и DOM, находим в HTML-документе требуемые таблицы (класс stripy) и добавляем необходимые классы (к примеру, oddrows и evenrows) их строкам, в зависимости от того, четная это строка или нет. Это может быть реализовано таким образом:

< tabs.length; e++) if (tabs[e].className == tabClass) { var rows = tabs[e].getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) // строки нумеруются с 0 rows[i].className += ((i % 2) == 0 ? " oddrows" : " evenrows"); } }

Привязав вызов данной функции к событию onload страницы, мы добьемся нужного результата.

Пожалуй, на сегодняшний день это оптимальное решение, однако оно не оставляет HTML-код нетронутым. Мне же было интересно решить проблему исключительно средствами CSS, или, по крайней мере, возложить на CSS задачу по изысканию этих средств.

Идеальное решение

Можно ли решить задачу «чистым» CSS? Можно, если браузер поддерживает CSS3. Изучив спецификации, мы находим там новый псевдо-класс :nth-child() , несомненно появившийся под влиянием сабжа, и благодаря которому необходимые стили задаются очень просто:

/* нечетная строка таблицы класса stripy */ .stripy tr:nth-child(2n+1){ ... } /* четная строка таблицы класса stripy */ .stripy tr:nth-child(2n){ ... }

Увы, современные браузеры в абсолютном большинстве пока не поддерживают это. А что же CSS2? Здесь, к сожалению, подходящих инструментов совсем немного. Частично решить проблему можно с помощью селектора :

Stripy tr { ... } /* 1-я строка */ .stripy tr + tr { ... } /* 2-я строка */ .stripy tr + tr + tr { ... } /* 3-я строка */ .stripy tr + tr + tr + tr { ... } /* 4-я строка */ .stripy tr + tr + tr + tr + tr { ... } /* 5-я строка */

однако данный метод подходит только для таблиц с относительно небольшим и заранее известным числом строк, кроме того, его никак нельзя назвать удобным. Что же остается? Остается использовать дополнительные возможности каждого отдельного браузера. Я попытался найти решение для Windows версий Internet Explorer, Mozilla и Opera.

Internet Explorer

С этим браузером трудностей не возникло. Воспользовавшись способностью IE задавать значения CSS-свойствам динамически с помощью expression() , задачу чередующихся разноцветных строк, к примеру, легко решить следующим способом:

Stripy tr{ background: expression(this.rowIndex % 2 == 0 ? "#ffe" : "#efe"); }

Для определения этим методом не одного свойства, а целого стиля для соответствующих табличных строк (добавить классы oddrows и evenrows), код придется усложнить, или воспользоваться технологией DHTML Behaviors :

Stripy tr{ behavior: url(stripy.htc); } /* нечетная строка */ /* четная строка */

В приведенном примере реализовывается задуманное: добавляются необходимые классы строкам, в зависимости от того, четная это строка или нет. Такое поведение тега tr описано в файле stripy.htc:

stripy.htc //

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

Gecko

Расширение, подобное DHTML Behaviors воплощено и в браузерах с движком Gecko. Веб-разработчикам позволено, как определять новые элементы на странице, так и переопределять внешний вид, содержимое и поведение стандартных. Для этого используется XBL (XML Binding Language). Данная технология обладает бóльшими возможностями по сравнению с разработкой от Microsoft и, казалось, что с решением поставленной задачи трудностей не возникнет, но не тут-то было.

В CSS XBL-привязка задается подобно behavior с помощью свойства -moz-binding:

Stripy tr{ -moz-binding: url(stripy.xml); }

Оставалось в XBL-файле stripy.xml описать поведение нужных тегов, однако, несмотря на все свои усилия, мне не удалось «привязать» ни тег tr , ни другие табличные теги. Причиной этой неприятности оказался Bugzilla Bug 83830 : Binding TD cells (with XBL) doesn"t work, at all . Как бы это не было обидно, но по всему выходило, что на XBL не стоит рассчитывать. К счастью, решение все же было найдено!

Помощь пришла от известного веб-гуру Дина Эдвардса (Dean Edwards), создавшего XBL-обертку , позволяющую Gecko-браузерам использовать технологию Microsoft DHTML Behaviors, а это значит, для решения задачи можно задействовать тот же файл stripy.htc , что и для IE!

Для этого нам понадобится два XBL-файла: moz-behaviors.xml (непосредственно обертка, взять можно на сайте Дина Эдвардса, весит меньше 7K) и bindings.xml (вспомогательный, промежуточный файл «между» CSS и moz-behaviors.xml , код ниже по тексту). Теперь, чтобы.htc -файл заработал и в Mozilla, необходимо следующее:

.stripy tr{ -moz-binding: url(bindings.xml#stripy.htc); }

В общем случае все отлично работает, но изменить поведение тега tr все равно не удастся из-за упомянутого выше бага, но умнице Эдвардсу удалось решить и эту проблему. Для нашего случая СSS-код следует дополнить:

/* необходимое дополнение для успешной привязки табличных тегов */ .stripy{ -moz-binding: url(bindings.xml#table); } /* HTC behavior при помощи XBL-привязки */ .stripy tr{ -moz-binding: url(bindings.xml#stripy.htc); } /* нечетная строка */ .stripy .oddrows{ background:#ffe; ... } /* четная строка */ .stripy .evenrows{ background:#efe; ... }

Содержимое файла bindings.xml должно быть следующим:

bindings.xml

Теперь все отлично работает. Таблицы с классом stripy станут «зебрами» в браузерах на движке Gecko, начиная с версии 1.0.

Opera

К сожалению, этот представитель семейства веб-проводников не располагает механизмами расширения сравнимыми с конкурентами. Да, в 9-й версии появились виджеты , но с их помощью невозможно как-либо повлиять на работу браузера. Что делать? Opera не оставила выбора, кроме как воспользоваться запрещенным приемом. Начиная с 7-й версии, браузер (как впрочем, и IE, начиная с версии 5) обладал интересной «особенностью» - возможностью выполнять скрипты прямо из CSS. Для этого используется любое CSS-свойство, позволяющее в качестве значения указывать путь к файлу. Вот пример такой техники:

Body{ background-image: url("javascript: alert("Hi");"); }

Opera запускает сценарий только для существующих HTML-элементов и только один раз. Почему бы этим не воспользоваться и не позаимствовать скрипт, упоминавшийся выше? Я так и сделал, хотя стоит признаться, с данным приемом возникали определенные сложности и не все сценарии были «послушными»:

Function makeStripy(tabClass) { var tabs = document.getElementsByTagName("table"); for (var e = 0; e < tabs.length; e++) if (tabs[e].className == tabClass) { var rows = tabs[e].getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) rows[i].className += ((i % 2) == 0 ? " oddrows" : " evenrows"); } } if (window.opera) makeStripy("stripy");

Этот скрипт успешно выполниться в Opera и через CSS:

Stripy tr{ background-image: url("javascript:function makeStripy(tabClass){var tabs=document.getElementsByTagName("table");for (var e=0;e