PDA

View Full Version : Transparency on every other table row



dddolls
Aug 14th, 2009, 03:59 AM
Hello, I'm trying to make a table that has 50% white background on every other row but I'm not sure if it's possible in html. Would I have to restructure the whole table if I was to do it in CSS? If so, what would be the code? Right now I have the tables like this:

<table border="1" cellspacing="1" cellpadding="1" style="border-collapse: collapse" bordercolor="#ddd">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td bgcolor="#FFFFFF">&nbsp;</td>
</tr>
</table>

I want to change the white rows to a 50% transparent white. Thanks in advance.

jessnoonyes
Aug 14th, 2009, 08:53 AM
What you could do is create an image of a small white square that's 50% transparent and save it as "whiteTransparent.png". Then for every other <tr> add a class to it like so:

<tr class="background">
<td>this will have the white background</td>
</tr>

<tr>
<td>This will not have the white background</td>
</tr>

In your CSS:
tr.background td { background: url(images/whiteTransparent.png) repeat; }

I'll attach an image you can use

dddolls
Aug 14th, 2009, 09:53 AM
Thanks so much, it's perfect.