Posted under » CSS on 8 August 2011
The css may look like this
#saintist { width:100%; border-collapse:collapse; } #saintist td, #saintist th { border:1px solid #20257F; padding:3px 7px 2px 7px; } #saintist th { text-align:left; padding-top:5px; padding-bottom:4px; background-color:#20257F; color:#ffffff; } #saintist tr.alt td { background-color:#EFF8FF; } #saintist tr.gay td { background-color:#DEDEDE; }
The HTML may look like this
<table id="saintist"> <tr><th>Name</th><th>Title</th> </tr><tr class="gay"> <td>Mr. Nikon Georg</td><td>Camera Man</td> </tr><tr class="alt"> <td>Mrs. Ave Anna V.</td><td>Researcher</td> </tr><tr class="gay"> <td>Mrs. L. Yakult Fernanda</td><td>Cashier</td> </tr><tr class="alt"> <td>Mr. Sherman Sharkey Arthur</td><td>Cashier</td> </tr><tr class="gay"> <td>Mr. Yahoo Hong Sain</td><td>Security Officer</td> </tr><tr class="alt"> <td>Ms. Kuchi Durga</td><td>Research Officer</td> </tr><tr class="gay"> <td>Mr. Toblerone Tobias</td><td>Software Architect</td> </tr> </table>
However, at times I prefer using floated divs. instead of tables. But the look is the same. Alternate background-color. My preferred method is the odd and even count in the while loop. In php you can do this.
$heh .= "table head"; if($count % 2) { $heh .= "<div id=kuning>"; } $heh .= "table row"; if($count % 2) { $heh .= "</div>"; } $heh .= "table end";