Zmiana koloru tła w tabeli po najechaniu kursorem

Aby ułatwić odczytywanie danych z tabel, można zastosować funkcję obsługi zdarzeń JavaScript. Funkcja ta działać będzie w następujący sposób: po najechaniu kursorem na dany wiersz tabeli tło całego wiersza będzie zmieniać kolor, a po zdjęciu kursora z wiersza kolor powróci do pierwotnego stanu.

<table style="text-align: center;">
    <tr>
        <th>Komórka 1</th>   
        <th colspan="2">Komórka 2, 3</th>
    </tr>
    <tr onMouseOver="this.style.background='#48C4FF'" onMouseOut="this.style.background='#FFFFFF'">
        <td>Komórka 4</td>   
        <td>Komórka 5</td>   
        <td>Komórka 6</td>
    </tr>
    <tr onMouseOver="this.style.background='#48C4FF'" onMouseOut="this.style.background='#FFFFFF'">
        <td>Komórka 7</td>   
        <td>Komórka 8</td>   
        <td>Komórka 9</td>
    </tr>
    <tr onMouseOver="this.style.background='#48C4FF'" onMouseOut="this.style.background='#FFFFFF'">
        <td>Komórka 10</td>   
        <td>Komórka 11</td>   
        <td>Komórka 12</td>
    </tr>
    <tr onMouseOver="this.style.background='#48C4FF'" onMouseOut="this.style.background='#FFFFFF'">
        <td>Komórka 13</td>   
        <td>Komórka 14</td>   
        <td>Komórka 15</td>
    </tr>
</table>

Przykład:

Najedź kursorem na wiersz poniższej tabeli, aby zobaczyć działanie funkcji. Aktualizacja: dziś ten sam efekt uzyskasz bez JavaScriptu. Wystarczy CSS z pseudoklasą :hover, np. tr:hover { background: #48C4FF; }. Wariant ze zdarzeniami onMouseOver/onMouseOut zostawiam jako ilustrację obsługi zdarzeń w JS.

CSS, Front-end, HTML, JavaScript