Стиль рядка таблиці при наведенні на неї курсору миші задається за допомогою псевдокласу :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.
Мал. 2. Таблиця із заголовком та виділеним рядком