Coloring Alternate Table Row Using CSS

Как сделать чередующийся фон для строк таблиц с помощью CSS

Вы можете использовать селектор CSS3 :nth-child , чтобы сделать чередование фона для строк таблицы. Визуально это помогает пользователю ориентироваться в таблице. Псевдокласс :nth-child(N) принимает аргумент N , который может быть ключевым словом, числом или числовым выражением в форме xn+y , где x и y — целые числа (например, 1n , 2n , 3n , 2n+1 , 3n-2 , …). Посмотрим следующий пример, чтобы увидеть, как это работает:

     table < margin: 30px; border-collapse: collapse; >table tr < border-bottom: 1px solid #666; >table tr:nth-child(2n) < background: #f2f2f2; >table th, table td  
 
Row
 
First Name
 
Last Name
 
Email
 
 
1
 
John
 
Carter
 
johncarter@mail.com
 
 
2
 
Peter
 
Parker
 
peterparker@mail.com
 
 
3
 
John
 
Rambo
 
johnrambo@mail.com
 
 
4
 
Harry
 
Potter
 
harrypotter@mail.com
 
 
  

Читайте также

Похожие примеры:

Источник

Как сделать полосатую таблицу на HTML, CSS, JS, PHP

Сборник методов как сделать HTML таблицу «полосатой» или, как её еще называют «таблица с зеброй».

Полосатая таблица на CSS

В CSS можно применить псевдокласс :nth-child он используется для добавления стиля к элементам на основе нумерации.

 
Last Name
 
Username
 
  
 
1
 
Mark
 
Otto
 
@mdo
 
 
2
 
Jacob
 
Thornton
 
@fat
 
 
3
 
Larry
 
the Bird
 
@twitter
 
 
4
 
Jake
 
Propper
 
@vso
 
 
 

/* Нечетные строки */ #table tbody tr:nth-child(odd) < background: #fff; >/* Четные строки */ #table tbody tr:nth-child(even)

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

/* Строки 1,4,7. */ #table tbody tr:nth-child(3n+1) < background: #f2fff5; >/* Строки 2,5,8. */ #table tbody tr:nth-child(3n+2) < background: #ffeaea; >/* Строки 3,6,9. */ #table tbody tr:nth-child(3n+3)

Полосатая таблица на JS

Скрипт перебирает строки таблицы и добавляет им классы odd и even .

var table = document.getElementById('table'); var table_body = table.getElementsByTagName('tbody'); for (var h = 0; h < table_body.length; h++) < var table_tr = table_body[h].getElementsByTagName('tr'); for (var i = 0; i < table_tr.length; i++) < if (i%2) < table_tr[i].className = 'even'; >else < table_tr[i].className = 'odd'; >> >

/* Нечетные строки */ #table .odd < background: #fff; >/* Четные строки */ #table .even

Полосатая таблица на jQuery

Добавлением класса к строкам таблицы:

$('#table tbody tr:odd').addClass('odd'); $('#table tbody tr:even').addClass('even');

Или добавление CSS стилей:

$('#table tbody tr:odd').css('background', '#F7F7F7'); $('#table tbody tr:even').css('background', '#fff');

Вывод классов с помощью PHP

В скрипте используется префиксный инкремент ++$i для подсчёта строк и арифметический оператор % – деление по модулю.
Выражение $i%2 вернет « 1 » если число в переменной нечётное и « 0 » если чётное.

  "> "> "> "> 
Last Name
 
Username
 
  
1
 
Mark
 
Otto
 
@mdo
 
 
2
 
Jacob
 
Thornton
 
@fat
 
 
3
 
Larry
 
the Bird
 
@twitter
 
 
4
 
Jake
 
Propper
 
@vso
 
 
 
 /* Нечетные строки */ #table .odd < background: #fff; >/* Четные строки */ #table .even 

Источник

Чередование фонового цвета строк таблицы, пунктов списка и других html-элементов с помощью CSS и псевдокласса nth-child

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

С появлением 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-код таблицы с минимальным оформлением:

М	Команда	И	В	Н	П	Заб	Проп	О
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-код:

М	Команда	И	В	Н	П	Заб	Проп	О
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 :

М	Команда	И	В	Н	П	Заб	Проп	О
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 мы сделали несколько вариантов горизонтального меню. Вот одно из них:

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

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

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

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

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

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

     table, td, th < border: 4px outset blue; border-spacing: 5px; >.first  
Имя
Фамилия
 
Гомер
Симпсон
 
Мардж
Симпсон
 
 
 
Имя
Фамилия
 
Гомер
Симпсон
 
Мардж
Симпсон
 
   

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

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

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

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

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

CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align :

• top: текст выравнивается по верхней границе ячейки
• middle: выравнивает текст по центру (значение по умолчанию)
• bottom: текст выравнивается по нижней границе ячейки

     table, td, th < border: 1px solid black; border-collapse: collapse; >table < width: 70% >td < text-align: right; >th < height: 50px; >.test1 < vertical-align: top; >.test2  
Имя
Фамилия
 
Гомер
Симпсон
 
Мардж
Симпсон
 
   

Чередование фонового цвета строк таблицы

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

     table < width: 70%; border-collapse: collapse; >td, th < border: 1px solid #98bf21; padding: 3px 7px 2px 7px; >th < text-align: left; padding: 5px; background-color: #A7C942; color: #fff; >.alt td  
Имя
Фамилия
Положение
 
Гомер
Симпсон
отец
 
Мардж
Симпсон
мать
 
Барт
Симпсон
сын
 
Лиза
Симпсон
дочь
 
   

Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса :nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):

Изменение фона строки при наведении курсора

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

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

Выравнивание таблицы по центру

Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin , задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе — за автоматическое выравнивание по центру:

Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу:

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник