Using multiple CSS styles in ONE HTML table?

Hey, is it possible to use MULTIPLE CSS styles on a single HTML table, because usually you can only just have one style.

What I'm trying to do is create a template that will self expand according to the content that I will be feeding it via PHP, and the borders around the template require pictures because I'm doing it all fansy-like, and having a drop shadow around it. I'm using CSS styles to apply these images because of its repeatable function that allows the images to be repeated as the table expands bigger than the actual image.

The reason why I'm asking this is because I dont want to create 4 tables within themselves and have each one a style applied to them (one for each side). I hope you can get what I'm saying.

You can apply style elements to the td tag as well as the table.

Yea, applying styles directly to the <table> or <td> tags should work.

in the Class attribute place your class names in order with a space between them. For example, Class="cssClass1 cssClass2".

Tacoman667 said:

in the Class attribute place your class names in order with a space between them. For example, Class="cssClass1 cssClass2".

Click to expand...

Hmm, I tried that and it seems that it doesn't work. It applies only the style that is defined LAST in the list....

Would anyone suggest an easier way to apply pictures around borders that would automatically expand as more info would be inserted?

The way multiple classes is meant to be used is like this:

.style1 = Make something bold
.style2 = Make something blue

class="style1 style2" = Make something bold and blue

When you use multiple classes it basically just applies one on top of the other. For example:

.style1 {
font-weight: bold;
}

.style2 {
color: blue;
}

class="style1 style2" {
font-weight: bold;
color: blue;
}

I think the reason you're seeing only the last thing in the list is you're defining the same thing in two classes, like this:

.style1 {
color: red;
}

.style2 {
color: blue;
}

class="style1 style2" {
color: red;
color: blue;
}

First the object is colored red, then blue. So you only see the last in the list...blue.

--Illah

^ That may not be true in every case. I know for a fact my IE 6.something only picks up the last class name in multi-class chain. No such problem in FF but IE flakes out.

Yep, IE6 hates web designers. MS is also way too cool to properly reneder W3 compliant CSS. /nod

IE 7 works great for CSS. IE6 was a dud for both CSS and Javascript.

IE7 is a HUGE improvement, but still does things a little off from what FireFox does, I've found. Mainly aesthetic things, like handling header tags and properties... minor stuff like that. All easily fixable through CSS tweeks.