Controlling the behavior of table cellspacing in CSS

Question

Is there something we can do like table[cellspacing=x] that allows us to control the td margin with the variable x?

I ask this because in my setup, I am using a reset stylesheet that has a definition:

table {
   border-collapse:separate;
   border-spacing:2px;
   ...
}

This works fine until the we encounter a line in the html as such:

<table cellspacing=5>

...

Basically, I want to be able to define the behavior for cellspacing in my reset stylesheet...

Is this possible with CSS?

---

Update:

Well, actually, let me be more clear about my problem:

I am working with a templated system that uses a reset style on the bottom.

Any random user can come along and create HTML content on top of that, possibly containing a table something like this:

<table cellspacing=7>

I want to override the default styling behavior of all browsers with my own styling behavior, when it comes to handling the cellspacing attribute of the table element.

The number passed to the cellspacing attribute will be unknown to me, as the system is dynamic.

I need to be able to control the behavior of cellspacing using CSS in the reset stylesheet to accomplish this, or else whatever some end-user types in for cellspacing in their hypothetical table will be overridden by this line in my reset stylesheet:

table {
   border-collapse:separate;
   border-spacing:2px;
   ...
}

So, I need a statement that will work with whatever value the end-user passes to the cellspacing attribute.

I'd imagine this statement looks something like:

table[cellspacing=x] > td {
   ...
}

Such that I can use the variable x in the body of this CSS definition.

You see, I can't just use a static value like 3, or 5, or 10 for cellspacing because the value the user puts in will be unknown to me when I am making my reset stylesheet. They can put in whatever they want, but it will always use the same reset stylesheet.

Is this possible?

Answer 1

You can do:

table[cellspacing="5"] {
    border-spacing: 30px;
}

See: http://jsfiddle.net/k2Qpt/

This uses the attribute selector.