Cascading Style Sheets (CSS)
Alternate table rows - Cange background Color
I was thinking about Appel's iTunes when making this tutorial.
A wonderful way to provide structure and easy to eye scan all the information.
Click here for a working example of this CSS tutorial.
First the CSS code:
The alternate colors are created in the table tr.odd and table tr.even.
<style type="text/css">
<!--
table {
border: 2px solid #000000;
border-collapse: collapse;
margin-left:auto;
margin-right:auto;
text-align:center;
color:#FFFFFF;
}
table tr.odd {
background-color:#0066FF;
}
table tr.even {
background-color:#0033CC;
}
table tr:hover {
background-color:#66CCFF
}
table td:hover {
background-color:#0099FF
}
-->
</style>
The XHTML code:
<table width="700" border="1" cellpadding="5" id="table1">
<tr>
<td colspan="3" bgcolor="#006699"><h1>Some Great Beatles Albums</h1></td>
</tr>
<tr class="odd">
<td><img src="White_Album.gif" alt="White Album" width="90" height="90" border="0" /></td>
<td>White Album</td>
<td>1968</td>
</tr>
<tr class="even">
<td><img src="Abbey_Road.gif" alt="Abbey Road" width="90" height="90" border="0" /></td>
<td>Abbey Road</td>
<td>1969</td>
</tr>
<tr class="odd">
<td><img src="Magical_Mystery_Tour.gif" alt="Magical Mystery Tour" width="90" height="90" border="0" /></td>
<td>Magical Mystery Tour</td>
<td>1967</td>
</tr>
<tr class="even">
<td><img src="Hey_Jude.gif" alt="Hey Jude" width="90" height="90" border="0" /></td>
<td>Hey Jude</td>
<td>1970</td>
</tr>
<tr class="odd">
<td><img src="Sgt_Pepper.gif" alt="Sgt. Pepper's Lonely Hearts Club Band" width="90" height="90" border="0" /></td>
<td>Sgt. Pepper's Lonely Hearts Club Band</td>
<td>1967</td>
</tr>
<tr class="even">
<td><img src="With_The_Beatles.gif" alt="With The Beatles" width="90" height="90" border="0" /></td>
<td>With The Beatles</td>
<td>1963</td>
</tr>
<tr class="odd">
<td><img src="Please_Please_Me.gif" alt="Please Please Me" width="90" height="90" border="0" /></td>
<td>Please Please Me</td>
<td>1963</td>
</tr>
<tr class="even">
<td><img src="Yellow_Submarine.gif" alt="Yellow Submarine" width="90" height="90" border="0" /></td>
<td>Yellow Submarine</td>
<td>1969</td>
</tr>
<tr class="odd">
<td><img src="Revolver.gif" alt="Revolver" width="90" height="90" border="0" /></td>
<td>Revolver</td>
<td>1966</td>
</tr>
</table>
No User Comments.
No User Comments, be the first one to write your comments?
