Меню

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

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

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

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

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

Я поставил себе следующую задачу: не изменяя HTML-файл: задать отдельные стилевые классы для четных и нечетных строк таблиц с классом stripy .

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

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

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

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

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

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

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

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

Internet Explorer

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

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

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

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

Gecko

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

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

Оставалось в 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, необходимо следующее:

  • во-первых, он должен быть валидным ХML-документом (как в приведенном выше примере), так как для его загрузки используется объект XMLHttpRequest ;
  • во-вторых, ему следует находиться в одной директории с moz-behaviors.xml и bindings.xml ;
  • и, в-третьих, XBL-привязка должна быть оформлена подобным образом:

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

Читайте также:  Алфавит цифры таблица шифр

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

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

Opera

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

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

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

В приведенном примере необходимая функция вызывается напрямую (благодаря проверке if (window.opera) . это происходит только в Opera), а можно привязать этот вызов к событию onload страницы, мне удалось добиться этого следующим образом:

Оба варианта будут работать в версиях Opera, поддерживающих свойство className объекта HTMLElement для элемента tr , т.е. начиная с версии 7.5. Таблицы с классом stripy успешно становились «полосатыми» и в 9-й версии браузера, однако уже в сборке 8500 Opera утрачивает свою «уникальную способность» – указанный прием больше не работает. Так что, казалось, уже закрытый вопрос, для Opera остается пока открытым.

Источник



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

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

Источник

Строки таблицы

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

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

Рис. 1. Таблица со строками, выделенными с помощью линий

Линии между строк устанавливаются достаточно просто, для этого следует добавить стилевое свойство border-bottom к селектору TD . Если вокруг таблицы содержится рамка, то нижняя граница получится удвоенной толщины. В этом случае можно убрать нижнюю линию у последней строки или скрыть нижнюю границу у таблицы (пример 1).

Пример 1. Разделение строк таблицы линиями

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

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

Рис. 2. Таблица со строками, выделенными с помощью цвета и линий

Цвет фона нечетных строк определяется путем изменения цвета всей таблицы. Но поскольку для выборочных строк (для которых добавлен параметр class=»even» ) устанавливается индивидуальный цвет, то он «перекрывает» цвет фона таблицы. За счет этого и получается чередование цветных строк.

Пример 2. Выделение строк таблицы цветом

В данном примере двойной линии внизу таблицы не возникает в результате применения свойства border-collapse со значением collapse к селектору TABLE . Этот параметр отслеживает появление двойных линий в местах соприкосновения ячеек и заменяет их одинарными линиями. Заметим, что в разных браузерах могут возникнуть разночтения по поводу цвета оставляемых линий в том случае, если цвет границы вокруг таблицы не совпадает с цветом линий под строками.

Источник

Применение цвета к чередующимся строкам или столбцам

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

Таблица с выбранным цветом заливки для чередующихся строк

Вот как это сделать:

Выделите диапазон ячеек, которые нужно отформатировать.

На вкладке Главная выберите команду Форматировать как таблицу.

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

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

Окно

Совет: Если вы хотите сохранить стиль с чередованием, но убрать функциональность таблицы, выберите команду Преобразовать в диапазон. В этом случае при добавлении строк и столбцов к ним не будет автоматически применяться форматирование с цветными полосами, но его можно применять вручную с помощью команды Формат по образцу.

Применение полос к строкам или столбцам с помощью условного форматирования

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

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

Вот как это сделать:

На листе выполните одно из указанных ниже действий.

Чтобы применить затенение к определенному диапазону ячеек, выберите ячейки, которые необходимо отформатировать.

Чтобы применить затенение ко всему листу, нажмите кнопку Выделить все.

Кнопка

На вкладке Главная нажмите кнопку Условное форматирование и выберите команду Создать правило.

Кнопка

В списке Выберите тип правила выберите пункт Использовать формулу для определения форматируемых ячеек.

Чтобы применить цвет к чередующимся строкам, в поле Форматировать значения, для которых следующая формула является истинной введите формулу =ОСТАТ(СТРОКА();2)=0.

Чтобы применить цвет к чередующимся столбцам, введите формулу =ОСТАТ(СТОЛБЕЦ();2)=0.

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

Нажмите кнопку Формат.

В окне Формат ячеек откройте вкладку Заливка.

Выберите цвет и нажмите кнопку ОК.

Выбранный цвет показан в поле Образец. Нажмите кнопку ОК или выберите другой цвет.

Вот как можно изменить правило условного форматирования: щелкните одну из ячеек, к которым оно применяется, на вкладке Главная последовательно выберите команды Условное форматирование > Управление правилами, нажмите кнопку Изменить правило и внесите необходимые изменения.

Чтобы удалить условное форматирование из ячеек, выделите их и на вкладке Главная последовательно выберите команды Очистить > Очистить форматы.

параметр очистки формата

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

Источник

Как создать полосатую таблицу в Microsoft Word

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

Вставка таблицы в Word

Во-первых, вам нужно добавить таблицу. Перейдите на вкладку «Вставка» и нажмите кнопку «Таблица».

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

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

Можно выбрать желаемое количество столбцов и строк.

Если предлагаемый интерактивный вариант вам не подходит (например, недостаточно строк или столбцов), то нажмите кнопку «Вставить таблицу» — вы сможете указать любое количество строк и столбцов.

Как сделать строки таблицы с чередующимися цветом в Word

Сразу после вставки таблицы откроется вкладка «Конструктор». Эту же вкладку можно открыть если выбрать таблицу и нажать кнопку «Конструктор». Разверните пункт «Стили таблиц», чтобы увидеть подготовленные варианты:

Вас остаётся только выбрать наиболее понравившийся шаблон и заполнить таблицу:

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

Не нужно вручную устанавливать цвета каждой строки или столбца в таблице — всё это можно сделать полностью автоматически с помощью стилей.

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

Вы можете влиять на стили таблиц ставя или убирая галочки в разделе «Параметры стилей таблиц»:

Как сделать столбцы таблицы с чередующимися цветом в Word

Если нужно сделать полосатые столбцы в таблице, чтобы каждый чётный имел один цвет, а каждый нечётный имел другой цвет, то это делается аналогично с помощью стилей таблиц — поставьте галочку в «Параметрах стилей таблиц» напротив «Чередующиеся столбцы» чтобы увидеть подходящие заготовленные стили:

Источник

Adblock
detector