Как сделать подсветку строки в таблице html
Обновлено: 05.07.2024
С появлением 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 правило:
li:nth-child (1) color:orange;
>
Если надо выделить все строки таблицы начиная с третьей то достаточно такой строчки:
tr:nth-child (n + 3) background-color: silver;
>
Можно выделить какой-то диапазон, например с четвертого по седьмой:
Так с помощью простых манипуляций с CSS стилями и псевдокласса nth-child можно менять оформления страницы и значительно улучшить восприятие и юзабилити сайта.
Для подсвечивания горизонтальных строк таблиц цветом необходимо добавить в css темы небольшой код.
Перейдите в Админ панель, выберите Настроить и Дополнительные стили. Или Внешний вид, Настроить, Параметры отображения, Собственный Css.
В окошко введите код:
Обязательно после того как введёте код нажмите Enter, чтобы перейти на следующую пустую строку. Если этого не сделать код не будет работать.
После Сохранить и опубликовать.
Для этого вам необходимо выбрать нужный вам цвет, скопировать полученный код и вставить в код css.
При необходимости вы можете также изменить цвет текста при наведении. В данном примере кода цвет при наведении заменяется на белый.
Если у вас в таблице тексту присвоена ссылка, то изменения цвета не происходит.
В результате этих несложных изменений мы присвоили любой таблице подсвечивание строк нужным нам цветом. На практике это будет выглядеть примерно так:
| Название | Форма выпуска |
|---|---|
| Привет | Пока |
| Привет1 | |
| Привет2 | Пока1 |
| Привет3 | Пока2 |
Вам также может понравиться
“Comments” и “Views” изменить на Комментарии и Просмотры
Вопрос поступил в комментариях к одной из записей Подскажите, в каких файлах темы “Comments” и “Views” изменить на Комментарии и
Всплывающее окно бесплатно
В этой статье я расскажу, как использовать на своём сайте премиальное модальное окно совершенно легально, но при этом на халяву.
Приводим шаблон к сео стандарту: Оставляем заголовки H1-H6 только в тексте статьи
Недавно совершенно случайно увидел рекламу шаблона Root и прочитал там: Ну, думаю надо проверить и у себя в шаблоне colormag.
Мы с Вами рассмотрели множество методов стилизации таких элементов на странице как текстовая информация, ссылки, изображения, заголовки, но всего этого пока недостаточно. В своих статьях я часто применяю такие элементы HTML как таблицы, потому что они в большинстве случаев помогают систематизировать важную информацию и сделать её подачу более простой.
В этой статье я познакомлю Вас с тонкостями стилизации HTML таблиц, и вы узнаете новые свойства CSS, предназначенные для достижения этих целей.
Язык гипертекстовой разметки HTML предоставил нам большое количество возможностей, чтобы осуществить привязку CSS стилей к десяти уникальным тегам, предназначенных для работы с таблицами, предлагаю их повторить перед дальнейшим изучением:
| Тег | Описание |
|---|---|
| Определяет содержимое таблицы. | |
| Определяет наименование таблицы. | |
| Определяет заголовочную ячейку таблицы. | |
| Определяет строку таблицы. | |
| Определяет ячейку данных таблицы. | |
| Используется для содержания заголовка группы в таблице (шапка таблицы). | |
| Используется для содержания "тела" таблицы. | |
| Используется для содержания "подвала" таблицы (футер). | |
| Определяет заданные свойства столбцов для каждого столбца в пределах тега . | |
| Определяет группу столбцов в таблице. |
Работа с отступами в таблице
В данном примере мы:
Результат нашего примера:
Рис. 144 Пример использования внутренних отступов в таблице.
Промежуток между ячейками
После рассмотренного выше примера, вы могли заметить, что у нас остался промежуток между всеми ячейками таблицы. Давайте рассмотрим, как убрать промежуток между ячейками таблицы, либо его увеличить.
Чтобы задать расстояние между границами соседних ячеек необходимо использовать свойство CSS - border-spacing.
В данном примере мы:
Обращаю Ваше внимание, что если в свойстве border-spacing указано только одно значение длины, то оно указывает интервалы, как по горизонтали, так и вертикали, а если указаны два значения длины, то первое определяет горизонтальное расстояние, а второе вертикальное. Расстояние между границами соседних ячеек допускается указывать в единицах измерения CSS (px, cm, em и др). Отрицательные значения не допускаются.
Результат нашего примера:
Рис. 145 Пример изменения промежутка между таблицами.
Отображение границ вокруг ячеек таблицы
Вы можете сказать: - так, мы убрали промежуток между ячейками, используя свойство border-spacing со значением 0 , но почему у нас теперь границы у ячеек то пересекаются?
Двойные границы образуются из-за того, что нижняя граница одной ячейки добавляется к верхней границе ячейки, которая находится под ней, аналогичная ситуация происходит по бокам ячеек и это логично с точки зрения отображения таблицы, но к счастью есть способ, сообщить браузеру, что мы не хотим видеть такое развязное поведение границ ячеек.
Для этого необходимо использовать CSS свойство border-collapse. Как не странно, но использование свойства border-collapse со значением collapse является лучшим способом как можно убрать промежуток между ячейками и при этом не получить двойных границ между ними.
Рассмотрим сравнение поведения границ при использовании свойства border-spacing со значением 0 и свойства border-collapse со значением collapse :
В данном примере мы:
Результат нашего примера:
Рис. 146 Пример отображения границ вокруг ячеек таблицы.
Свойство border-collapse имеет всего два значения для отображения границ вокруг ячеек таблицы:
| Значение | Описание |
|---|---|
| separate | Отдельно стоящие границы (свойства border-spacing и empty-cells не будут игнорироваться). Это значение по умолчанию. |
| collapse | Границы объединяются в одну, когда это возможно (свойства border-spacing и empty-cells игнорируются). |
Обратите внимание, что когда мы используем свойство border-collapse со значением collapse такие свойства как border-spacing и empty-cells игнорируются (не употребляйте их одновременно)! Стоп, а что за empty-cells?
Поведение пустых ячеек
Силами CSS можно установить, следует ли отображать границы и фон пустых ячеек в таблице или нет. За это поведение отвечает свойство empty-cells, которое по умолчанию, как вы могли заметить из предыдущих примеров, отображает пустые ячейки.
Давайте перейдем к примеру:
Понять, как действует свойство empty-cells из этого примера очень просто, если для него установлено значение hide , то пустые ячейки и фон в них будут скрыты, если установлено значение show (по умолчанию), то они будут отображаться.
Рис. 147 Пример отображения пустых ячеек таблицы.
Расположение заголовка таблицы
Давайте рассмотрим еще одно простое свойство для стилизации таблиц - caption-side, которое устанавливает расположение заголовка таблицы (над или под таблицей). По умолчанию свойство caption-side имеет значение top , которое помещает заголовок над таблицей. Для того, чтобы поместить заголовок под таблицу необходим использовать свойство со значение bottom .
Давайте рассмотрим пример использования этого свойства:
В данном примере мы создали два класса, которые управляют расположением заголовка таблицы. Первый класс (.topCaption) помещает заголовок таблицы над ней, мы применили его к первой таблице, а второй класс (.bottomCaption) помещает заголовок таблицы под ней, мы применили его ко второй таблице. Класс .topCaption имеет значение свойства caption-side по умолчанию и создан для демонстрации.
Результат нашего примера:
Рис. 148 Пример использования свойства caption-side.
Горизонтальное и вертикальное выравнивание
Чтобы установить выравнивание для содержимого в ячейках, необходимо использовать специальные ключевые слова со свойством text-align. Рассмотрим применение ключевых слов этого свойства на следующем примере.
В этом примере мы создали четыре класса, которые задают различное горизонтальное выравнивание в ячейках и применили их по порядку к строкам таблицы. Значение в ячейке соответствует значению свойства text-align, которое было применено к этой строке.
Результат нашего примера:
Рис. 149 Пример горизонтального выравнивания в таблице.
Кроме горизонтального выравнивания вы также можете определить и вертикальное выравнивание в ячейках таблицы с помощью свойства vertical-align.
Обращаю Ваше внимание, что при работе с ячейками таблицы применяются только следующие значения * этого свойства:
| Значение | Описание |
|---|---|
| baseline | Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию. |
| top | Выравнивает содержимое ячейки вертикально по верхнему краю. |
| middle | Выравнивает содержимое ячейки вертикально по середине. |
| bottom | Выравнивает содержимое ячейки вертикально по нижнему краю. |
* - Значения sub , super , text-top , text-bottom , length и % , примененные к ячейке таблицы будут вести себя как при использовании значения baseline .
Рассмотрим пример использования:
В этом примере мы создали четыре класса, которые задают различное вертикальное выравнивание в ячейках и применили их по порядку к строкам таблицы. Значение в ячейке соответствует значению свойства vertical-align, которое было применено к этой строке.
Рис. 150 Пример вертикального выравнивания в таблице.
Алгоритм размещения макета таблицы браузером
В CSS по умолчанию используется алгоритм автоматического размещения макета таблицы браузером. В этом случае ширина столбца задается самым широким неразрывным содержимым ячейки. Данный алгоритм может быть в некоторых случаях медленным, так как браузер должен прочитать все содержимое в таблице, прежде чем определить её окончательный макет.
Чтобы изменить тип размещения макета таблицы браузером с автоматического на фиксированный, необходимо использовать CSS свойство table-layout со значением fixed .
В этом случае горизонтальное размещение зависит только от ширины таблицы и ширины столбцов, а не от содержимого ячеек. Браузер начинает отображать таблицу сразу после того, как получена первая строка. Как следствие, фиксированный алгоритм, позволяет создавать макет такой таблицы быстрее, чем используя автоматический вариант. При работе с большими таблицами в целях увеличения производительности вы можете использовать фиксированный алгоритм.
Давайте рассмотрим применение этого свойства на следующем примере:
В данном примере мы:
- К одной и той же таблице применили различные алгоритмы размещения макета таблицы браузером. Для первой таблицы мы использовали автоматический алгоритм ( auto ). Обратите внимание, что при этом размер таблицы стал больше заданного значения в 50% от родительского элемента (произошло переполнение).
- Кроме того мы использовали для таблиц новое для вас свойство word-wrap , которое указывает браузеру, переносить или нет длинные слова, которые не помещаются по ширине в заданную область (разрешается ли разрывать строки внутри слов). Значение break-word указывает, что слово может быть прервано в произвольном месте, если нет допустимой точки для разрыва.
- Для второй таблицы был использован фиксированный алгоритм ( fixed ) размещения макета таблицы браузером. Как вы можете заметить размер таблицы соответствует заданным нами значениям ширины в процентах, а числа прерваны в произвольных местах, чтобы не произошло переполнение. Если бы мы не использовали свойство word-wrap , то ширина второй таблицы бы не изменилась, но числа переполнили бы ячейки (вышли из ячеек).
Стилизация строк и столбцов таблицы
Давайте повторим ранее рассмотренные методы и познакомимся с новыми способами стилизации строк и столбцов в таблицах. Перейдем к примерам.
В данном примере мы:
- Указали, что наша таблица занимает 100% от родительского элемента, промежутки между ячеек отсутствуют.
- С использованием псевдокласса :nth-child задали, что все четные строки имеют сплошную границу 3 пикселя красного цвета.
- С использованием псевдокласса :nth-child задали, что каждая четвёртая ячейка данных таблицы (тег ) внутри строки, начиная со второй ячейки таблицы, будет выделена цветом (4n – каждый четвертый элемент выделяется, 2 – с какого элемента начинать).
Результат нашего примера:
Рис. 152 Пример использования псевдокласса :nth-child с таблицами.
Перейдем к следующему примеру, в котором рассмотрим варианты стилизации строк таблицы.
В этом примере мы:
Результат нашего примера:
Рис. 153 Пример стилизации строк в таблицах
Следующий пример рассматривает применение скругления углов к ячейкам таблицы (свойство border-radius).
В этом примере мы:
Результат нашего примера:
Рис. 154 Пример скругления углов ячейки.
Следующий пример затрагивает использование HTML элементов и и их стилизации.
В этом примере мы:
- Устанавливаем, что наша таблица занимает 100% от родительского элемента, ячейки таблицы занимают 25% от родительского элемента и имеют сплошную границу 1 пиксель зеленого цвета. Промежуток между ячейками мы убрали, используя свойство border-collapse со значением collapse .
- К сожалению, единственное, что пока можно сделать с элементом , используя css, это задать цвет заднего фона и определить через HTML, сколько он занимает колонок таблицы. В этом примере мы создали группу из трех колонок, третья из них при этом занимает 2 столбца (атрибут span элемента со значением "2" ).
- Используем псевдокласс :first-child, который выбирает первый дочерний элемент своего родителя ( ) и задаем ему задний фон.
- Используем псевдокласс :nth-of-type(2) в котором указан элемент, который является заданным дочерним элементом своего родительского элемента (второй элемент ) и задаем ему задний фон.
- По аналогии с псевдоклассом :first-child, который выбирает первый дочерний элемент, используем псевдокласс :last-child и выбираем последний дочерний элемент своего родителя ( ), благодаря которому мы стилизуем третью и четвертую колонку.
Результат нашего примера:
Рис. 155 Пример подсветки колонок таблицы.
Ну и заключительный пример, который довольно сложен для понимания и требует продвинутых знаний в CSS, так как затрагивает будущие темы, планируемые к подробному изучению в рамках этого курса.
В предыдущем примере мы поняли, что к HTML элементу можно применить только одно CSS свойство – цвет заднего фона (background-color), но при этом задать цвет заднего фона при наведении (псевдокласс :hover) на этот элемент напрямую нельзя. В этом примере мы рассмотрим, как подсветить столбец таблицы, используя только CSS.
В этом примере мы:
- Устанавливаем, что наша таблица занимает 100% от родительского элемента, ячейки таблицы занимают 25% от родительского элемента и имеют сплошную границу 1 пиксель зеленого цвета, высота заголовочных и ячеек данных составляет 45px . Промежуток между ячейками мы убрали, используя свойство border-collapse со значением collapse .
- Для элемента установили при наведении (псевдокласс :hover) изменение цвета заднего фона c белого на lime (подсвечивается вся строка). Но мы, добавили псевдокласс отрицания :not(:first-child), который сообщает браузеру: - ты строки то подсвечивай, но только не первую дочернюю своего родителя (первая строка таблицы, состоящая из заголовочных элементов ).
- Кроме того мы установили свойство position для таблицы, которое определяет, что она у нас является элементом с относительным позиционированием ( relative ). Это означает, что при смещении элемент сдвигается относительно его текущей позиции. Это нам необходимо, чтобы мы могли позиционировать блок, который будет появляться при наведении на любой элемент .
- И так, используя псевдоэлемент ::after добавляем содержимое после каждого элемента при наведении. Псевдоэлемент ::after обязательно используется вместе со свойством content, благодаря которому мы вставляем блочный элемент, который имеет задний фон цвета forestgreen и имеет абсолютное позиционирование.
- Абсолютное позиционирование здесь необходимо для смещения элемента относительно заданного края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию - static , иначе отсчёт будет вестись относительно, указанного края окна браузера, по этой причине мы установили для таблицы относительное позиционирование ( relative ).
- Установили для нашего сгенерированного блока свойство top, которое указывает направление смещения позиционированного элемента от верхнего края и свойство bottom, которое указывает направление смещения позиционированного элемента от нижнего края. Для обоих свойств указали значение 0 , таким образом, блок будет полностью занимать элемент от низа и верха таблицы, ширину этого блока задали 25% это значение соответствует значению ширины самой ячейки.
- И заключительное свойство, которое мы установили для этого блока: z-index со значением "-1" оно определяет порядок расположения позиционированных элементов по оси Z. Это свойство необходимо, чтобы текст находился впереди этого блока, а не за ним, если не задать значение меньше нуля, то блок будет закрывать текст.
Результат нашего примера:
Рис. 156 Пример подсветки колонок и строк таблицы при наведении.
Если Вам на этом этапе изучения не понятен процесс позиционирование элементов, то не расстраивайтесь это сложная для понимания тема, которую мы к тому же не рассматривали, но обязательно рассмотрим в следующей статье учебника "Позиционирование элементов в CSS".
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
Решил поделиться простеньким решением по подсветке строк в таблице. Идея в том, что при наведении курсором на ячейку таблицы, будет подсвечиваться текущая строка, в которой находится данная ячейка. Такое решение облегчает жизнь пользователей при просмотре таблиц на сайте, занимающих большую площадь на странице либо не имеющих четких границ ячеек.
Для реализации данного решения буду использовать javascript библиотеку jQuery, как наиболее простую и распространенную. Логика работы будет следующей, мы будем отслеживать событие hover на строках таблицы и при его срабатывании присваивать данной строке класс, в котором у нас будет задан цвет подложки. Сразу зададим класс:
Единственный момент, на который я хочу обратить особое внимание, что в моем решении будет исключена первая строка таблицы путем использования селектора not(':first'), так как я предполагаю, что это строка является заголовочной и я не хочу, чтобы к ней применялась подсветка. Данный селектор можно или убрать или модифицировать под себя, например, когда в таблице несколько заголовочных строк. Не забываем, что у нас должна быть подключена библиотека jQuery.
Все, после размещения кода и обновления страницы наслаждаемся его работой. Тут даже не буду размещать картинку, а сразу размещу код, чтобы были видна работа данного скрипта.
Никого ни к чему не призываю, но хочу напомнить, что сайты надо делать удобными для пользователей. И даже такая мелочь существенно улучшит удобство пользование сайтом. Помните об удобстве посетителей :)
Читайте также: