Cool CSS table

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>

Source

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";