Как выделить цветом строку таблицы при наведении?

Стиль строки таблицы при наведении на неё курсора мыши задаётся с помощью псевдокласса :hover, который добавляется к селектору tr. В правилах стиля добавляем свойство background для желаемого цвета фона и color для цвета текста, как показано в примере 1.

Пример 1. Использование псевдокласса :hover

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Таблица</title> <style> table { width: 100%; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные линии между ячейками */ } td, th { padding: 3px; /* Поля вокруг содержимого таблицы */ border: 1px solid #333; /* Параметры рамки */ } tr:hover { background: #65994c; /* Цвет фона при наведении */ color: #fff; /* Цвет текста при наведении */ } </style> </head> <body> <table> <tr> <td>Рубины</td><td>43</td><td>51</td><td>79</td> </tr> <tr> <td>Изумруды</td><td>28</td><td>34</td><td>48</td> </tr> <tr> <td>Сапфиры</td><td>29</td><td>57</td><td>36</td> </tr> </table> </body> </html>

В данном примере при наведении на строку у неё меняется цвет фона и текста. Результат примера продемонстрирован на рис. 1.

Выделеная строка

Рис. 1. Выделеная строка

Если у таблицы содержится заголовок, что встречается довольно часто, то строка с заголовком также будет выделяться при наведении, а это может быть нежелательным. Для выделения только нужных строк следует модифицировать таблицу, вставив элементы <thead> и <tbody> и к селектору добавив tbody (пример 2).

Пример 2. Использование псевдокласса :hover

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Таблица</title> <style> table { width: 100%; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные линии между ячейками */ } td, th { padding: 3px; /* Поля вокруг содержимого таблицы */ border: 1px solid #333; /* Параметры рамки */ } th { background: #cadadd; /* Цвет фона заголовка */ } tbody tr:hover { background: #65994c; /* Цвет фона при наведении */ color: #fff; /* Цвет текста при наведении */ } </style> </head> <body> <table> <thead> <tr> <th></th><th>2024</th><th>2025</th><th>2026</th> </tr> </thead> <tbody> <tr> <td>Рубины</td><td>43</td><td>51</td><td>79</td> </tr> <tr> <td>Изумруды</td><td>28</td><td>34</td><td>48</td> </tr> <tr> <td>Сапфиры</td><td>29</td><td>57</td><td>36</td> </tr> </tbody> </table> </body> </html>

Результат данного примера показан на рис. 2.

Таблица с заголовком и выделенной строкой