Css таблица разноцветные строки. Как изменить цвет ячейки

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

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

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

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

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

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

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

Результат:

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

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

Результат:

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

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

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 можно менять оформления страницы и значительно улучшить восприятие и юзабилити сайта.

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

Не кажется ли вам, что черно-белая таблица выглядит скучновато? Вот и мы так думаем! Поэтому в этом уроке мы поговорим о том, как изменить цвет таблицы в HTML. Существует три возможности добавления цвета, для каждой из которых присутствует свое свойство.

Ранее, чтобы изменить цвет, применялась более сжатая форма описания рамки. Выглядела она вот так:

Border: 1px solid lightgray

И за цвет здесь отвечала последняя часть – lightrgay .

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

Давайте посмотрим, как выглядит код в CSS , в котором задан цвет для ячейки.

Td { background-color: цвет-фона; }

Разумеется, изменять цвета можно и у table , и у td , и у th . Давайте попробуем придать нашей таблице умножения более солидный вид.

Добавим стили для ячеек-заголовков с тегом th , а также для ячеек по диагонали, в которых расположены квадраты чисел:

Таблица умножения table { border: solid 1px blue; border-collapse: collapse; } td, th { border: solid 1px blue; padding: 10px; } th { background-color: #eeeeee; }

Результат в браузере:

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

Напомним ещё раз, как выглядит задание цвета рамки для ячейки:

Td { border: 1px solid blue; }

Итак, мы с вами научились менять цвета ячеек, а также ячеек-заголовков, используя возможности CSS. Если мы указываем стили для таких тегов, как th или td , то должны понимать, что применимы стили будут и к остальным тегам.

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

RowGreen { background-color:green; }

А чтобы изменить цвет с помощью этого класса определённые строки нужно сделать следующее:

table { border: solid 1px blue; border-collapse: collapse; } td, th { border: solid 1px blue; padding: 10px; } .rowGreen { background-color: lightgreen; }

И результат в браузере:

Для того, чтобы изменить цвет текста в таблице используется свойство color . Применять его можно к самым разным элементам: к table, tr, th, td. В зависимости от этого цвет в выбранном элементе будет изменён. Например, для всей таблицы зададим зелёный цвет шрифта:

Table { color: green; ... }

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

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

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

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

В сети по запросу «полосатые таблицы» или «таблица зебра» ("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() , несомненно появившийся под влиянием сабжа, и благодаря которому необходимые стили задаются очень просто:

Увы, современные браузеры в абсолютном большинстве пока не поддерживают это. А что же 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.

С этим браузером трудностей не возникло. Воспользовавшись способностью 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:

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

Расширение, подобное 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, необходимо следующее:

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

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

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

К сожалению, этот представитель семейства веб-проводников не располагает механизмами расширения сравнимыми с конкурентами. Да, в 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