Чередование фонового цвета списка 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Зенит302073581767
2ЦСКА301938672760
3Краснодар301794522760
4Динамо301488533650
5Рубин301398393348
6Спартак3012810424244
7Локомотив3011109312543
8Мордовия3011514224338
9Терек3010713303037
10Кубань3081210323636
11Амкар308814254232
12Уфа3071013263931
13Урал309318314430
14Ростов307815275129
15Торпедо3061113284529
16Арсенал Тула307419204625

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

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

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

Цвет можно задать как наименованием цвета, так и шестнадцатеричным значением кода цвета со знаком #.

Пример:

HTML-код:


Отображение в браузере:


1 2
3 4
Графический фон таблицы html страницы

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

Пример:

HTML-код:


11111 22222 33333 44444

Отображение в браузере:


11111 22222
33333 44444
Выравнивание данных в таблице html страницы

Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.

Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево.

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

Если вы ограничиваете расстояние между содержимым ячейки и ее кромками при помощи атрибута CELLPADDING, то это сказывается на результате выравнивания. Например, при CELLPADDING=3 и ALIGN="top", данные будут размещены на расстоянии трех пикселей от верхней границы ячейки.

Пример:

создает строку, а тег

HTML-код:


1111
2222		 22222 Нижняя ячейка Нижняя ячейка

Отображение в браузере:


1111
2222 		22222
Нижняя ячейка Нижняя ячейка
Изменение размеров таблицы html страницы

Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%"). Например, задав значение ширины в 600 пикселей, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора.

То же самой можно делать и с высотой таблицы при помощи атрибута HEIGHT.

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

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

информирует браузер о завершении таблицы.

Любая таблица состоит из столбцов и строк.

Тег

ячейку в строке. Соответственно сколько ячеек включено в строку, столько будет и столбцов в таблице.

Тег также создает ячейку. Его отличие от тега

в том, что ячейка созданная тегом является ячейкой - заголовком: ее содержимое располагается по центру, а если это текст, то браузер отображает его жирным шрифтом.

Содержимое ячейки, созданной тегом

по умолчанию располагается в ее левой чаcти.

Тег создает заголовок таблицы, он располагается внутри тега

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


Заголовок таблицы





1-я ячейка 2-ой строки
2-я ячейка 2-ой строки





1-я ячейка 1-ой строки 2-я ячейка 1-ой строки

Выравнивание таблицы. Выравнивание содержимого ячеек

Для выравнивания таблицы используется атрибут align тега

.

При помощи атрибут align Вы можете разместить таблицу в левой или правой (align= "left" и align= "right" ) части окна браузера (родительского элемента ) или по его центру (align= "center" ).

Выравнивание содержимого строк (тег

) и ячеек (тег , создающий строку таблицы не имеет атрибутов hieght и width . Высота строки соответствует высоте ячеек, расположенных в ней. А ширина строки равна ширине таблицы.

Значения высоты и ширины задаются в пикселях или в процентах относительно свободного пространства. Для задания значений:

Указывается целое положительное число. В этом случае размер будет задан в пикселях;

Указывается целое положительное число с символом %.

Если содержимое таблицы или ячейки превышает заданные размеры - они будут проигнорированы браузером, а новые размеры автоматически подобраны в соответствии с размерами содержимого.

) по горизонтали также осуществляется при помощи атрибута align , а по вертикали при помощи атрибута valign :

Атрибут align принимает значения left , right , center и justify , которые задают выравнивание содержимого строк и ячеек по их левому, правому краю, по центру и по ширине соответственно;

Атрибут valign , принимающий значения top , bottom и middle , задает выравнивание содержимого строк и ячеек по их верхнему, нижнему краю и по середине соответственно.

Атрибут align служит также для выравнивания заголовка (тег ) по горизонтали и определения его расположения - над таблицей или под ней.

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

Высота и ширина таблицы и ячеек

По умолчанию размеры (высота и ширина ) и таблицы, и ячеек меняются в зависимости от размеров их содержимого.

Но высоту и ширину как таблицы, так и отдельных ее ячеек можно задать явно - при помощи атрибутов hieght и width соответственно.

Тег














Как видно из примера: указывая ширину одной из ячеек столбца, Вы тем самым задаете ширину всего столбца; и, указывая высоту одной из ячеек строки, Вы задаете высоту всей строки.

Границы таблицы и ячеек

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

Атрибут border тега

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

Толщина границы (или рамки ) задается в пикселях. В качестве значения атрибута border указывается целое положительное число. Если атрибут border указан без значения, толщина рамки составит 1 пиксель.

Толщина границы задается только для таблицы. Толщина рамки вокруг ячеек всегда составляет 1 пиксель (либо отсутствует ).

По умолчанию граница отображается с эффектом трехмерности и имеет черный цвет.

Атрибут bordercolor задает цвет границы и устраняет эффект трехмерности. Атрибут может использоваться для задания цвета границы таблицы (тег

), строки (тег ) или ячейки (тег
).

Атрибут bordercolor поддерживается не всеми браузерами и поэтому не рекомендуется его использовать. Для задания цвета границы лучше воспользоваться стилями (это уже в CSS ).










Атрибут border не указан. Поэтому границы отсутствуют.











Толщина границы таблицы составляет 3 пикселя. Ячейки имеют границы толщиной 1 пиксель!

Частичное отображение границ

Граница таблицы и рамка вокруг ячеек могут быть отображены частично.

Атрибут frame тега

указывает, где рисовать границу таблицы. Атрибут rules указывает, как отобразить границы ячеек.












Установлены горизонтальные границы таблицы
И отображены границы между колонками

Отступы внутри и снаружи ячеек

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

Внутренние отступы - от границ ячеек до их содержимого, задаются атрибутом cellpadding тега

.

Внешние отступы - расстояние между границами соседних ячеек и расстояние от границ ячеек до границы таблицы, задаются атрибутом cellspacing тега

.

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










Расстояние от содержимого ячеек до их границ составляет 10 пикселей
Расстояние между ячейками и от ячеек до границы таблицы составляет 25 пикселей

Объединение ячеек

При оформлении и форматировании таблиц в HTML нередко требуется объединить рядом расположенные ячейки. И если такая необходимость возникла, то Вам следует воспользоваться атрибутами colspan и rowspan тега

.

Атрибут colspan указывает количество ячеек, которые будут объединены по горизонтали, а атрибут rowspan устанавливает количество ячеек, объединяемых по вертикали.

Оба атрибута имеют смысл, если таблица состоит из нескольких строк.










1 2
3 4

1 2
3 4
Фон таблицы. Фон ячеек таблицы

В HTML есть возможность задать общий фон как для всей таблицы, так и фон для отдельно выделенной ячейки.

Атрибут background тега

задает изображение, которое будет фоновым рисунком таблицы. В качестве значения атрибута указывается адрес файла с изображением - абсолютный или относительный путь к файлу ().

Атрибут bgcolor тега

задает цвет фона таблицы. Цвет можно задать двумя способами ()

При помощи этих же атрибутов задают фоновый рисунок и цвет фона для любой ячейки таблицы (тег

).










Темно-розовый - цвет фона таблицы.
Фоновый рисунок отдельной ячейки - небо!

Напомним также о существовании атрибута cols тега

, который указывает браузеру количество столбцов в таблице.

Использование атрибута cols позволяет браузеру быстрее отобразить содержимое таблицы.

Редактирование таблицы

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

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

Один из этих тегов располагают сразу после тега

. Допустим это тег .

При помощи атрибута span тега указывают количество колонок, к которым будут применены атрибуты align , valign или width (выравнивание содержимого ячеек колонок по горизонтали, вертикали или задание ширины колонок ).

Если атрибут span в теге отсутствует, то будут изменены характеристики одной - первой колонки таблицы. При втором использовании тега задаются свойства для следующих (следующей - если атрибут span отсутствует ) колонок таблицы и т.д.











1 2 3 4 5

1 2 3 4 5

Ко второй группе тегов относятся также практически идентичные между собой теги , и .

Любой из них можно применить для изменения некоторых свойств одной или нескольких строк таблицы: это опять же выравнивание содержимого ячеек в строках по горизонтали и по вертикали - при помощи атрибутов align и valign соответственно; и задание фонового цвета ячеек при помощи атрибута bgcolor .

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

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

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

Тег допускается использовать несколько раз внутри тега

.











1 2
3 4
5 6
7 8
9 10
1 2
3 4
5 6
7 8
9 10

Стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.


Теги, используемые для построения таблицы в html

table - обязательный тег, открывающий и закрывающий таблицу
caption - необязательный тег, обозначающий заголовок таблицы
th - необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr - обязательный тег, с которого открывается и закрывается строка
td - обязательный тег, обозначающий открытие и закрытие ячейки в строке

Пример кода простой таблицы



Таблица html


Название таблицы

Стобец 1


Стобец 2




Текст в первой ячейке
Текст во второй ячейке



В браузере отобразится

Назначение таблиц в html Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ , ширину , границу и другие параметры , что придаст ей красивый внешний вид. Таблица - Ваш первый шаг к понимаю web-дизайна ! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) - было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой...Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка) У тега table есть следующие атрибуты:

width - ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor - цвет фона ячеек таблицы
background - заливает фон таблицы рисунком
border - рамка и границы в таблице. Толщина указывается в пикселях
cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.

Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th ) и зададим параметр атрибуту border (граница) , width (ширина таблицы, строки или ячейки) и bgcolor (цвет ячейки)



Таблица html







В результате в браузере будет выведена таблица следующего вида

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

Void - рамки нет,
above - только верхняя рамка,
below - только нижняя рамка,
hsides - только верхняя и нижняя рамки,
vsides - только левая и правая рамки,
lhs - только левая рамка,
rhs - только правая рамка,
box - все четыре части рамки.

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

None - между ячейками нет границ,
groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows - границы только между строками,
cols - границы только между стобцами,
all - отображать все границы.

Рассмотрим пример кода



Таблица html


Стобец 1
Стобец 2









Результат

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

align - выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing - расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример



Таблица html


Стобец 1
Стобец 2

Текст в первой ячейке первого столбца
Текст во второй ячейке второго столбца







В браузере отобразится выравненная по центру таблица следующего вида

Строки tr и ячейки td в таблицах HTML Снова напомню о том, что таблицы формируются построчно (tr). В строках (tr) уже находятся ячейки (td). Если задавать параметр для строки (tr), то он будет действителен для всех ячеек (td) в этой строке, если для конкретной ячейки, то только для неё. В примерах выше я указывал цвет для строки, этот параметр распространялся соответственно для всех ячеек.





Для тегов tr и td есть следующие

align - выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign - выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor - задает цвет строки
width - ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height - высота ячейки (все ячейки в строке примут данный параметр)

Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:



Таблица html


Стобец 1
Стобец 2

Текст в первой ячейке первого столбца
Текст во второй ячейке второго столбца

Стобец 1
Стобец 2







Результат

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

Спасибо за внимание! Надеюсь материал был полезен!

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

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

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


Стобец 1
Стобец 2

Текст в первой ячейке первого столбца
Текст во второй ячейке второго столбца
Ланцетники 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