Lange Tabellenzeilen sind nicht immer angenehm zu lesen, und auch das dezente Abwechseln von Hintergrundfarben hilft nicht viel. In diesem Beispiel zeigen wir einen einfachen MouseOver oder Hover Effekt, der die aktuelle Tabellenzeile unter dem Mauszeiger farbig hervorhebt. Das Beispiel nutzt hier Javascript (obwohl es auch nur mit CSS möglich wäre) – ist daher etwas flexibler und kann bestimmte Zeilen daher auch leicht mit anderen Farben hervorheben, wie wir im zweiten Beispiel zeigen.
Hover Beispiel: Die aktuelle Zeile färbt sich grün
Name |
Stadt |
Florian |
Hamburg |
Martin |
Aachen |
Nico |
Kassel |
Der Code für Tabelle und CSS:
<style type="text/css">
table.hover{ border:1px solid #42536f;width:100%; }
table.hover td{ border-bottom:1px solid #CCC;height:23px;padding:5px;font-size:15px; }
.trgruen { background-color:#E3EBBE; }
.trweiss { background-color:#FFFFFF; }
.trgrau { background-color:#E1E1E1; }
</style>
<table border="0" cellpadding="0" cellspacing="0" class="hover">
<tr class="trgrau">
<td style="width:50%;"><b>Name</b></td>
<td style="width:10%;"><b>Stadt</b></td>
</tr>
<tr class="trweiss" onmouseover="this.className='trgruen';" onmouseout="this.className='trweiss';">
<td>Florian</td>
<td>Hamburg</td>
</tr>
<tr class="trweiss" onmouseover="this.className='trgruen';" onmouseout="this.className='trweiss';">
<td>Martin</td>
<td>Aachen</td>
</tr>
<tr class="trweiss" onmouseover="this.className='trgruen';" onmouseout="this.className='trweiss';">
<td>Nico</td>
<td>Kassel</td>
</tr>
</table>
onmouseover mit mehreren Farben
In diesem Beispiel gibt es unterschiedliche Farben bei Mausberührung: So lässt sich in der Tabelle schnell zwischen männlich und weiblich unterscheiden – eine andere Möglichkeit wäre, bei einer Kontenliste die positiven und negativen Konto-Einträge in der Tabelle bei Maus-Berührung per onmouseover hervorzuheben.
Name |
Stadt |
Florian |
Hamburg |
Martin |
Aachen |
Julia |
Berlin |
Nico |
Kassel |
Miriam |
Dresden |
Tobias |
München |
Der Code für Tabelle und CSS:
<style type="text/css">
table.hover{ border:1px solid #42536f;width:100%; }
table.hover td{ border-bottom:1px solid #CCC;height:23px;padding:5px;font-size:15px; }
.trrosa { background-color:#FFE1F3; }
.trblau { background-color:#E1E6FF; }
.trweiss { background-color:#FFFFFF; }
.trgrau { background-color:#E1E1E1; }
</style>
<table border="0" cellpadding="0" cellspacing="0" class="hover">
<tr class="trgrau">
<td style="width:50%;"><b>Name</b></td>
<td style="width:10%;"><b>Stadt</b></td>
</tr>
<tr class="trweiss" onmouseover="this.className='trblau';" onmouseout="this.className='trweiss';">
<td>Florian</td>
<td>Hamburg</td>
</tr>
<tr class="trweiss" onmouseover="this.className='trblau';" onmouseout="this.className='trweiss';">
<td>Martin</td>
<td>Aachen</td>
</tr>
<tr class="trweiss" onmouseover="this.className='trrosa';" onmouseout="this.className='trweiss';">
<td>Julia</td>
<td>Berlin</td>
</tr>
<tr class="trweiss" onmouseover="this.className='trblau';" onmouseout="this.className='trweiss';">
<td>Nico</td>
<td>Kassel</td>
</tr>
<tr class="trweiss" onmouseover="this.className='trrosa';" onmouseout="this.className='trweiss';">
<td>Miriam</td>
<td>Dresden</td>
</tr>
<tr class="trweiss" onmouseover="this.className='trblau';" onmouseout="this.className='trweiss';">
<td>Tobias</td>
<td>München</td>
</tr>
</table>