Выделение строк таблицы

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

(то есть, при наведение курсора мыши).

Выделение строк таблицы попеременно разными цветами


В общем случае выделить строки таблицы можно при формировании html-кода страницы средствами php — «на лету». Для этого нужно, чтобы каждый второй тег

имел отдельный класс:

В css-коде свойство класса background-color будет иметь определенное значение, благодаря чему произойдет визуальное выделение каждой второй строки.

Итак, для улучшения качества юзабилити сайта с помощью ниже приведенного php-кода со счетчиком организуем попеременное выделение строк таблицы, выводимой на страницу из любой базы данных:

Обратите внимание на конструкцию

Именно она для последующего выделения каждому второму тегу открытия строки присваивается класс gr

Далее — дело техники. В таблицу стилей добавляем код

Так легко «раскрасить» попеременно все строки таблицы в желаемый цвет.

Подсветка таблицы (выделение строк таблицы при наведенном курсоре)

Теперь перейдем ко второму вопросу, а именно: как подсветить таблицу, а точнее выделить ее строки при наведении на них курсора? Решение очень простое. Чистый CSS:

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

Теперь вы можете без проблем выделить (сделать попеременную подсветку строк) свою html-таблицу, используя небольшой кусок php-кода, а также с помощью css-стиля улучшить пользовательские характеристики своего сайта

Учитесь основам css и php — это совсем несложно, но поможет вам справиться со многими задачами, связанными с автоматизацией. Кроме того, может прямо сейчас ознакомиться с тем, как импортировать данные SQLite в MySql через Excel — это вполне доступно даже неопытному пользователю.

До скорого!

6 Replies to “Выделение строк таблицы”

    • Спасибо, Михаил, за добрые слова. Искренне рад. Заходите еще.

  1. Pingback: Вывод двумерного массива в виде таблицы

  2. Pingback: Вывод из PHP двумерного массива в виде HTML таблицы

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.