Am I using too many <div>s?

[reddevil]

Hi,
I have a basic site. Every page is within one big table and I am using CSS for styling purposes only (font, background etc), not for positioning.

There is a section of my page where I would like about 20 rows to have a different background colour and different font colour. At the moment, I have a <DIV> inserted between every <td> tag and I think I should be doing it a better way?

Example:

<tr>

<td>
<div id="colourblue>
text goes here
</div>
</td>

<td>
<div id="colourblue>
text goes here
</div>
</td>

</tr>

I would appreciate any guidance to help me make my code better.

Thanks,

[SuzyUK]

Am I using too many <div>s?

yep ;)

firstly when using CSS "id" in mulitple places it should be a "class". ID is a unique (only one occurence) identifier on each page..

You could use it more for a whole column e.g. navgation section or top row e.g. header section

...in your example you maybe don't even need divs at all just apply a CSS class directly onto the <td> element.. e.g.

<tr>
<td class="colourblue">text goes here</td>
<td class="colourblue">text goes here</td>
</tr>

or

There is a section of my page where I would like about 20 rows...

You could make this a seperate table (nested in the first one maybe ) and give this table a different ID then you wouldn't even need to "class" ify each different row at all just the entire table via it's unique ID..

Suzy

[reddevil]

SuzyUK,
Many thanks for your quick and helpful reply.

I think I understand the 'class' tips, but does that mean that I just replace all my div id's with classes? I suppose that would mean the amount of html would stay much the same as I still have to label each and every <td> tag?

For nested tables....that seems like a good idea, although I heard that maybe Netscape has a problem with positioning nested tables?

I have the same 'nested table' layout on a few of my pages - is it possible to name the 'nested table' as a table-class of the 'main table' and put the formatting in my CSS sheet?

Thanks for your input Suzy.

[stever]

One of the nicest "tricks" in working with CSS is that you can use logical shortcuts.

What about giving the parent container a special ID if all particular cells within it have to be a certain way?

#widget td (or p or any other tag)
{
style
}

and then if you have a few which need to be another way you can give those ones an individual class, such as

#widget td.anotherstyle
{
style
}