How do you make a HTML table partially transparent?

If I have a HTML table like the one below:

<table bgcolor="#151515" height="100" width="200">
<tr>
<td>
Hello
</td>
<开发者_如何学Go;/tr>
</table>

How can I make it partially transparent? Is there a way of doing it without CSS? If not what is the CSS way?

You can try this in your html file:

<table class='table1'>
<tr><td>...

And this in your css file:

.table1 {
background: rgba(255,255,255,0.5);
}

This sets the rgba RED GREEN BLUE ALPHA values, 255,255,255 = white, 0,0,0 = black, and the 0.5 value at the end (ALPHA) is between 0 and 1, where 1 is opaque and 0 is transparent. I hope this helps.

In your case, #151515 (HEX CODE) translates to (21, 21, 21, 0.5) (RGBA) where A is equal to 50% transparent.

You can set the opacity or transparency of the background in CSS, as follows

  /* for IE */
   filter:alpha(opacity=60);
   /* CSS3 standard */
   opacity:0.6;

The above makes it 60% clear. Hope this helps.

With CSS you set the opacity to a value between 0 and 1. However, that will make any element inside your table transparent.

A better solution (unfortunately) is to make a tiling background png with slight transparency. That way you can fade the background without fading the content.

Replying to old post but this is still relevant as I just referenced it =)

Too... you can use fireworks or (presumably) photoshop to create an all black .png image (just a black box). Set your desired transparency with the toolbar and set said photo as your table background image. It defaults to repeat itself so will fill your table. You will have a transparent table that you can see your -body bg img/color- through and anything you put into the table will be unaffected by the transparency.

Jon

The way to change the background color and opacity is adding this attribute to your css.

background-color: rgba(100,200, 0, 0.5); (not background)

If you want to change the background+text content opacity, you can use:

opacity:0.6;