Two tables styles defined with one selector

[traiann]

Can I apply the table selector to just one table in a HTML page?

Let's say I defined the general look and feel of a table like this:

table {
border-collapse:collapse;
background:#EFF4FB url(bkgr.gif) repeat-x;
border-left:1px solid #686868;
border-right:1px solid #686868;
color: #333;
}

The actual HTML code contains 2 nested tables like
<table>
<tr>
<td>
....
<table>
<tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>
....
</tr>
</td>
</table>

Can I apply the table selector just to the nested table?

Thanks

[Marshall]

traiann, welcome to WebmasterWorld.

Yes you can, but not the way you have it. As your CSS is now, it would apply to all tables. What you need is to assign a class:

table.nested {
border-collapse:collapse;
background:#EFF4FB url(bkgr.gif) repeat-x;
border-left:1px solid #686868;
border-right:1px solid #686868;
color: #333;
}

The actual HTML code contains 2 nested tables like
<table>
<tr>
<td>
....
<table class="nested">
<tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>
....
</tr>
</td>
</table>

Marshall

[Old_Honky]

or if you don't want to use a class just use

table table
{
border-collapse:collapse;
background:#EFF4FB url(bkgr.gif) repeat-x;
border-left:1px solid #686868;
border-right:1px solid #686868;
color: #333;
}

Then the selectors will be applied to all nested tables.

[traiann]

Thanks.

The way I did it is
table#listing {
border-collapse:collapse;
background:#EFF4FB url(bkgr.gif) repeat-x;
border-left:1px solid #686868;
border-right:1px solid #686868;
color: #333;
}

and then I added the listing id to the nested table:
<table id="listing">
....