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

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

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

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


В общем случае задача сведена к тому, чтобы при формировании html-кода страницы средствами php “на лету”, каждый второй тег

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

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

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

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

Именно она выполняет необходимое. Каждому второму тегу открытия строки присваивается класс gr

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

который “раскрасит” попеременно все строки таблицы в желаемый цвет.

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

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

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

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

До скорого!

2 thoughts on “Выделение строк таблицы

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

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

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

*

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