Mouse-over tabel-rækker
Sat på siden 16-08-2004
Tabeller er yt, stylesheets er in, men bruger du alligevel tabeller fx til talopstillinger, så vil du nok have glæde af dette tips. Her lærer du nemlig at skifte baggrund på den tabelrække, som musen holdes over. Det gør det betydeligt lettere at læse data.
Du kan se effekten : www.tips-og-tricks.com/eksempler/highlightrow.html
Du behøver bare at indsætte denne lille stump CSS-kode i <TR>-tagsene som vist nedenfor. Du kan vælge de farver, du ønsker, naturligvis.
<TABLE border="1" cellpadding="5" style="font-family:verdana; font-size:11px;">
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#ffff99';"
onMouseOut="this.bgColor='#ffffff';">
<TD>Række 1, Celle 1</TD>
<TD>Række 1, Celle 2</TD>
<TD>Række 1, Celle 3</TD>
<TD>Række 1, Celle 4</TD>
<TD>Række 1, Celle 5</TD>
</TR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#cccccc';"
onMouseOut="this.bgColor='#ffffff';">
<TD>Række 2, Celle 1</TD>
<TD>Række 2, Celle 2</TD>
<TD>Række 2, Celle 3</TD>
<TD>Række 2, Celle 4</TD>
<TD>Række 2, Celle 5</TD>
</TR>
</TABLE>
Dette kan du også gøre med individuelle celler ved at indsætte koden inde i et <TD>-tag.
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#ffff99';"
onMouseOut="this.bgColor='#ffffff';">
<TD>Række 1, Celle 1</TD>
<TD>Række 1, Celle 2</TD>
<TD>Række 1, Celle 3</TD>
<TD>Række 1, Celle 4</TD>
<TD>Række 1, Celle 5</TD>
</TR>
<TR bgcolor="#FFFFFF" onMouseOver="this.bgColor='#cccccc';"
onMouseOut="this.bgColor='#ffffff';">
<TD>Række 2, Celle 1</TD>
<TD>Række 2, Celle 2</TD>
<TD>Række 2, Celle 3</TD>
<TD>Række 2, Celle 4</TD>
<TD>Række 2, Celle 5</TD>
</TR>
</TABLE>