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>

 

Advertisement

No User Comments.

No User Comments, be the first one to write your comments?