Transparent background for TABLE tag


Im making a pulldown menu which works fine.
The pulldown menu actually makes a table visible under the menu option.

How do I make the background of the table transparent so that the conent behind the menu options show up a bit (like faded or light view).


I’d probably have to see this is action (or a SS) to make sure I understand correctly, but off the top off my head, you could define a class for the table…

.tableMenu {
background: transparent;

You would need to use opacity, which isn’t supported by all browsers. In most browsers the opacity is inherited so the test would be partially transparent as well.

In my opinion, it’s more trouble than it’s worth.

Take for example
The menu (not a flash one) has been done beautifully with more or less transparent background. This works in IE6 and FF 1.x.

I’ll try background: transparent;
I was aware of just background-color and background-image.
Didnt know background as such existed.

background:transparent is the same as background-color:transparent. That makes the background fully transparent. To get partial transparency you need to use the opacity properties. That site only uses two of the four opacity properties.

On this PC I can’t even see the menu. It seems to drop down under the flash, which is a common problem.

You’re using a table for a menu? Why not a list, or some divides?

I thought <table> would be better as it has a lot of features. colspan, rowspan, cellpadding, cellspacing etc

Not to be harsh, but don’t. Tables are used for tabular data, not laying out or styling your design. If you want I can list the advantages and disadvantages of using tables for layout, you will see the latter outweighs the benefits, and makes perfect sense to use divide, list and span tags where appropriate.

A dropdown or flyout menu using CSS only causes issues cross browser no?

If the OP is comfortable using tables, I don’t see a problem at all.
Tables are not going anywhere anytime soon :slight_smile:


A dropdown or flyout menu using CSS only causes issues cross browser no?

No, not if it’s done correctly. ALA have a wonderful CSS drop down menu Example - [url=]Source

If the OP is comfortable using tables, I don’t see a problem at all.
Tables are not going anywhere anytime soon :slight_smile:

This is the sort of attitude that breaks websites. I’m not being nasty, but I’m pointing it out to those of us who know/want to see the ‘light’ of website development.

The first problem you run into with using tables for layout is document size and load speed. Let’s say you have a pretty complex design, and want to mark it up. Anyone sane enough to consider the end users preferences and limitations would manually slice the design, and avoid using tables where they’re not supposed to be used, for example non-tabular data.

Every part of the (X)HTML spec’s play a role, lazy and uneducated/unexperienced developers tend to choose tables, why? It’s easy and quick … For the developer.

Tabled layouts are an absolute nightmare to edit, imagine someone who’s never laid eyes on an (X)HTML document before, opening it up to find a lot of extensive markup, that for the most part is not required? Then on top of that trying to learn how to edit it?

Like I say, I’m not being nasty or picking on you, this is a healthy debate :slight_smile:

I’ll have to try it out all.
Guess <li> is very simple to edit.

Examples :

But the best so far is at !

The first 2 examples are good examples of what not to do.

The last example is a perfect example of what you can achieve if it’s done correctly, including less load time :slight_smile: The best of luck doing this properly, feel free to ask if you need any help :slight_smile:

Take this example.
Move the left image (the wild cat). Drag it over the text portion and you’ll find that while dragging it, you can view the text in the background. How is that done ?