CSS conversion and inline overriding

[AffiliateDreamer]

Ok so my HTML is like this:

<table border="0" bgcolor="#ffffff" cellpadding="2" cellspacing="3" width="100%">
<tr>
<td bgcolor="#cccccc">Section Heading</td>
</tr>
<tr>
<td align="left">Section Sub Heading</td>
</tr>
<tr>
<td>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td><a href="">title</a><a href=""><img src=""></a></td>
<td>description</td>
</tr>
</table>
</td>
</tr>
</table>

So this is what I want to do:

I want to be able to override this html with inline CSS and customize the layout etc.

Should I wrap this entire section with <div class="table1"></div>?

Elements I want to change:

1. heading/sub heading: font face, color, size
2. parent table: background color, border
3. hyperlink color
4. image styles like border

I would really appreciate help on this!

[doodlebee]

You don't really need to use inline styling. You can if you want to - but you're making more work for yourself. If you want to convert this table to CSS, do this with the HTML:

<table id="table1">
<tr>
<td >Section Heading</td>
</tr>
<tr>
<td>Section Sub Heading</td>
</tr>
<tr>
<td>
<table>
<tr>
<td><a href="">title</a><a href=""><img src=""></a></td>
<td>description</td>
</tr>
</table>
</td>
</tr>
</table>

And your CSS:

table#table1 {
set your desired properties here
}

table#table1 table {
properties for nested table here
}

and so on. It's all just a matter of setting the classes and ID's and calling them in correctly. HTH!

[AffiliateDreamer]

I see ok thanks!

Actually what I am doing is to have a default style for in my .css file, then I will override the default with inline style on some pages etc., that is why I am doing inline.

so is there any real advantage of converting my html to table-less CSS design (in terms of potential layout customizations?)

[doodlebee]

Well, if it *is* a table, then stick with tables. That's what they're for - tabular data. However, if you're converting a table-based layout to CSS - there are lots of advantages. Your style is separated from content, thus making your content more accessible (both to people *and* search engines) - your files will be smaller and it'll be much easier to code and change the looks with simple, quick edits.

There's lots more, but converting from a table-based layout to CSS is always an excellent idea :)

[AffiliateDreamer]

if I am changing many tables at once, is it possible to combine the CSS.

For example, say I have tables with the following ID's: ID=tableuser ID=tableaddress

and my CSS is:

table#tableuser
{
background: ##ffffff
}

now if I want both my tables to have the same settings, can this be combined?

[Robin_reala]

Like this then?

table#tableuser, table#tableaddress
{
background-color: #fff;
}