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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

До скорого!

Другие записи этой рубрики:

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

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

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

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

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

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

*

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