Evidenziare la riga di una tabella

E' possibile utilizzare uno stile CSS che può evidenziare una riga al passaggio del mouse. E' più semplice del previsto, vediamo come funziona. Si inserisce un colore di sfondo per la tabella, dopodiché si specifica un altro colore che cambierà al passaggio del mouse.

Inseriamo i due codice di stile CSS tr e tr:hover (ci mettiamo anche table tanto da giocare un pò).


<style type="text/css">

        table {
            border: 1px solid;
        }
     
        tr {
            background-color: #efefef;
        }
     
        tr:hover {
            background-color: #dedede;
        }

    </style>


Come si vede si definiscono due tipi di colore che servono per fare l'effetto.  (Il codice CSS va applicato sulla pagina!) Applicato a questa tabella:

<table cellpadding=" 5px" style="width: 400px;">
   <tr><td> 1 </td><td> 2 </td><td> 3 </td></tr>
   <tr><td> 1 </td><td> 2 </td><td> 3 </td></tr>
   <tr><td> 1 </td><td> 2 </td><td> 3 </td></tr>
</table>

Diventa questa tabella qua:

1 2 3
1 2 3
1 2 3


Funziona, direi bene. E' comodo soprattutto per le tabelle più complicate e piene di dati. Fatene buon uso!

Nessun commento:

Posta un commento

Ti ringrazio per ogni commento, appunto, modifica o richiesta di chiarimento. Mantenendo sempre un tono civile. Ogni commento che non rispetta tali regole, sarà eliminato, sopratutto se fatto in maniera anonima. TI ricordo che cerchiamo nuovi collaboratori o appunti, per implementare il materiale presente sul sito.

Related Posts Plugin for WordPress, Blogger...