hi,

i have a problem in dealing with tables using css. i'm still a newbie and trying to fix it for almost 2 days but can't find a solution.

i have 2 tables, lets call it table1 and table2.

table 2 is inside table1

in css, table 1 is working, but i can't format table2, because it's getting value from css table1 values.

appreciate if you can help me, thanks very much.

I'm trying to do something like this with css:

<table>
<tr>
<th bgcolor=#000000><font color=white>title 1</font></th>
<th bgcolor=#000000><font color=white>title 2</font></th>
</tr>
<tr>
<th bgcolor=white>spec 1</th>
<td bgcolor=white>value 1</td>
</tr>
<tr>
<th bgcolor="#dddddd">spec 2</th>
<td bgcolor="#dddddd">value 2</td>
</tr>
<tr>
<th bgcolor=white>spec 3</th>
<td bgcolor=white>
   <table>
   <tr>
   <th bgcolor=#ffff00><font color=black>sub title 1</font></th>
   <th bgcolor=#ffffoo><font color=black>sub title 2</font></th>
   </tr><tr>
   <th bgcolor=white>sub spec 1</th>
   <td bgcolor=white>sub value 1</td>
   </tr><tr>
   <th bgcolor="#dddddd">sub spec 2</th>
   <td bgcolor="#dddddd">value 2</td>
   </tr>
   <tr>
   <th bgcolor=white>sub spec 3</th>
   <td bgcolor=white>sub value 3</td>
   </tr></table>
</td>
</tr>
<tr>
<th bgcolor="#dddddd">spec 4</th>
<td bgcolor="#dddddd">value 4</td>
</tr></table>

Well, first off, what you gave us is the HTML of the page, not the CSS. So we can't really debug with that.

Second, you're using the <font> tag which is depreciated, you should be using styled <span> tags.

Third - do you know how CSS works? CSS cannot create or produce anything. All it can do is style HTML elements. For instance; if you want a table to be styled, then you would have CSS code:

.table1 {
width: 400px;
height: 400px;
}

And then you'd tell the CSS to style the element that has the 'table1' class, like this:

<table class="table1">

If you want to know more - http://www.w3schools.com/css/css_intro.asp

- Steve

The question is, WHY are you using TABLES at all ? If they are displaying DATA, then that's fine, that's what they are meant for. If you're using them for layout.. that is last century coding and you need to learn to create layouts without tables and using CSS.

Also, stuff like this:

<font color=black>

Is deprecated. Font styles, colors, etc, should be controlled with CSS. It seems that you don't know what CSS is, so here's a quick definition/tutorial: http://en.wikipedia.org/wiki/CSS

Hi all,

thanks for the replies. i have learnt html since... 1995, and i'm just going it for my personal interest. That was when i was still schooling. Since then, i didn't really "learn" the updated news in html world. That is why, i didn't know font has been replaced by span.

Anyway, of course, i've heard of CSS, and only now, i'm taking a plunge into css. i know, CSS has been around for quite some time. i'm not with the web designing industry, so, i don't really have time to learn this CSS thingy.

since i have a break now, i want to convert my "old junk website" to using css and php. oh, btw, the website was using html, shtml, cgi previously :P

i "sort of" know a bit of CSS, but still there is lot more for me to learn.

now, i'm asking about tables. i've tried searching on the net but i can't get any satisfying result.

question 1.
if i have table 1, 2 and 3, how do i call from CSS? i mean, what will be the syntax in CSS? i want to know the right way, so that table 2 will not inherit the values of table 1.

coz i'm seen

table#one {}
one td {}
one th {}

.td.Alt {} // sub ... what do u call it? :P

#one {}

#th {}
#td {}
#td.Alt {}
#td.Alt2 {}

one {}

.td {}
.td.alt {}
.td.alt2 {}

.th {}

so many ways of doing it in css, i'm confused. and maybe i've mixed up in the examples above. can you please point me in the right direction?
and also, in the examples above, do i call it using ID or CLASS?

As for layout, i think one of the application, osCommerce is still using table for the frame structure, right? coz i've done osCommerce once for my friend before.

and how do i know whether if some html tags has been depreciated? since font has been depreciated, but how come the browser is still recognizing it?

and lastly, since i've heard a lot about not using tables for layout, anything i should do to replace table? meaning, what are those tags i should use to replace tables for layout?

thanks a lot for your patience

Originally Posted by superkingkong

Anyway, of course, i've heard of CSS, and only now, i'm taking a plunge into css. i know, CSS has been around for quite some time. i'm not with the web designing industry, so, i don't really have time to learn this CSS thingy.

Well, just for the sake of being correct, CSS is a language, not a 'thingy'. Fortunately, it's a very simple language so you can use it easily without really having to dive into it.

Originally Posted by superkingkong

since i have a break now, i want to convert my "old junk website" to using css and php. oh, btw, the website was using html, shtml, cgi previously :P

Good for you!

Originally Posted by superkingkong

so many ways of doing it in css, i'm confused. and maybe i've mixed up in the examples above. can you please point me in the right direction?
and also, in the examples above, do i call it using ID or CLASS?

Well, it depends. If the styling starts with a #, you would call it with and id. Like so:

 #callthis {}

<table id="callthis">

But if it starts with a period, you call it with a class.

 .callthis {}

<table class="callthis">

Ok, I think we have that covered.

Originally Posted by superkingkong

question 1.
if i have table 1, 2 and 3, how do i call from CSS? i mean, what will be the syntax in CSS? i want to know the right way, so that table 2 will not inherit the values of table 1.

Well, as I just said, the way you write the CSS makes a huge difference. What I've seen, is that you've been doing this:

table#1 {}

What that does is create an id that can be called only for tables. So if I try to do this:

<div id="1">

It wouldn't work.
Another thing - I've seen you doing this:

.td {}

Now, instead of having that style applied to all <td> tags, it will apply it to anything with the "td" class. If you want a style to be called to all <td> tags regardless, you would use:

td {}

With neither a number sign or period.

So... I think you understand it now... let's say we want to do something in your case. Styling different tables with different CSS.

#table1 {}
#table2 {}

<table id="table1"></table>
<table id="rable2"></table>

So I think that now we have established that CSS is super-simple, all you need to do is know how to use it.

Answering other questions...

Originally Posted by superkingkong

As for layout, i think one of the application, osCommerce is still using table for the frame structure, right? coz i've done osCommerce once for my friend before.

Your version may be outdated.

Originally Posted by superkingkong

and how do i know whether if some html tags has been depreciated? since font has been depreciated, but how come the browser is still recognizing it?

"Deprecated" doesn't always mean "dysfunctional". It just means that there is a better alternative. Just like the span tag - there are a ton more ways to style it, in less code. Here's a link.

Originally Posted by superkingkong

and lastly, since i've heard a lot about not using tables for layout, anything i should do to replace table? meaning, what are those tags i should use to replace tables for layout?

Well, the tag of choice is the <div> tag. It's easier to style, and there's a whole new array of things that you can do with it. Tables are made for tabular data (like a list of links), like how you use them in your example. They are not made for layout, therefore we use something cleaner and more efficient.

Good link, and good link, and good link, and good link. And many more.

- Steve

table#unique {
/*some rules here*/
}

refers to:

<table id="unique">
<!--html here-->
</table>

table.common {
/*rules here*/
}

refers to:

<table class="common">
<!--html here-->
</table>

Each ID (#) attribute should only be used once on the page. An element (such as a table) may only possess one ID.

Classes (.) may be used multiple times per page. Elements may have multiple classes, in combination.

one td {}

Would just be ignored, because it attempts to refer to a <td> tag which is nested inside a <one> tag (which doesn't exist).

#td.Alt2 {}

is fine, but it probably doesn't do what you think, because it refers to any element with an ID of "td" which also has a class of "Alt2", NOT a tag of <td> with a class of "Alt2".

***EDIT***
looks like we posted at the same time

Hi,

thanks for the great explanation. at least, after this, i'll head my way for <div>

the difference between #table1 {} and table#table1 {}
is that #table1 can be called in any tags, am i right? where as table#table1 {} can only be called within a table tag?

same goes to .table1 {} and table.table1 {}?

and may i know, if i have something like below:

table td {}

if the above will affect all the tables in my site, will it overwrites all my table ID or table class tags i've defined?

Please correct my mistake:

table#table1 {}
table#table1 th {}
table#table1 td {}
table#table1 td.alt {}

table#table2 {}
table#table2 th {}
table#table2 td {}
table#table2 td.alt {}

is my CSS code correct?

<table id="table1">
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td class="alt"></td>
<td class="alt"></td>
</tr></table>

<table id="table2">
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td class="alt"></td>
<td class="alt"></td>
</tr></table>

so, is the code about correct? will the class="alt" in table2 inherit the value from table1? will the td or th of table2 takes the value from tabke1?

as wayfarer07 has mentioned, same ID cannot be used more than once in a page. but can i use different IDs in the same page? like the example above?

and lastly, if i'm going to call the above example is "class" way, is the following correct?

table.table1 {}
table.table1 th {}
table.table1 td {}
table.table1 td.alt {}

table.table2 {}
table.table2 th {}
table.table2 td {}
table.table2 td.alt {}

thanks for your patience. appreciate if very much.

Originally Posted by superkingkong

the difference between #table1 {} and table#table1 {}
is that #table1 can be called in any tags, am i right? where as table#table1 {} can only be called within a table tag?

Correct.

Originally Posted by superkingkong

same goes to .table1 {} and table.table1 {}?

Correct again.

Originally Posted by superkingkong

and may i know, if i have something like below:

table td {}

if the above will affect all the tables in my site, will it overwrites all my table ID or table class tags i've defined?

Yes, if I understand your question right. It actually depends which style statement comes first. It's rather pointless though, because the same effect could be achieved by using td{}

Originally Posted by superkingkong

Please correct my mistake:

table#table1 {}
table#table1 th {}
table#table1 td {}
table#table1 td.alt {}

table#table2 {}
table#table2 th {}
table#table2 td {}
table#table2 td.alt {}

is my CSS code correct?

<table id="table1">
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td class="alt"></td>
<td class="alt"></td>
</tr></table>

<table id="table2">
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td class="alt"></td>
<td class="alt"></td>
</tr></table>

so, is the code about correct? will the class="alt" in table2 inherit the value from table1? will the td or th of table2 takes the value from tabke1?

Both codes seem to be correct. And no, the alt class in table2 will not inherit the same class as table1, because if you write it like you just did the certain ones will only work if the class is in a td, if it is in #table1, if it is in a table.

Originally Posted by superkingkong

as wayfarer07 has mentioned, same ID cannot be used more than once in a page. but can i use different IDs in the same page? like the example above?

Yes, that will work out just fine.

Originally Posted by superkingkong

and lastly, if i'm going to call the above example is "class" way, is the following correct?

table.table1 {}
table.table1 th {}
table.table1 td {}
table.table1 td.alt {}

table.table2 {}
table.table2 th {}
table.table2 td {}
table.table2 td.alt {}

Yes.

- Steve

hi steve,

thanks for the explanation. i have a lot more understanding on table styling now

I'm still confuse a bit on the inheritance. That was the error i was encountering earlier on. Due to that i have a big big table, i can't post it here :P

my last question, if i have a general tag in CSS like:

td {
color: black;
}

and

table.table5 {}
table.table5 td {
color: white
}

and my html

<table class="table5">
<tr><td></td></tr></table>


the td tag in the table5 above will have white text or black text?
if white, when will the td {} take effect?

Well, it all depends on what comes first. Whatever comes last will rewrite the previous styling. It' sort of like internal CSS.

- Steve

Originally Posted by stevej

Well, it all depends on what comes first. Whatever comes last will rewrite the previous styling. It' sort of like internal CSS.

- Steve

oh, my understanding was, if a table has been IDed to something, say, <table id="table10">, all the td or th tags will take the value from that ID only, as defined in CSS?

table#table10 th {}
table#table10 td {} // td tag for all table10 only

td {} // general for all tables

... since i've specified table10 td {}... that means it is for all td for table10, no? CSS doesn't work that way?

if that is the case, to avoid confusion, i should do classes for table10?

table#table10 td.odd {}
table#table10 td.even {}

and call that in all table10 td tags?

since i've specified table10 td {}... that means it is for all td for table10,

Yep it is.

if that is the case, to avoid confusion, i should do classes for table10?

table#table10 td.odd {}
table#table10 td.even {}

and call that in all table10 td tags?

You can do that as well if you want to have cells different on odd and even rows.
BUT for that you would apply the class to the row

table#table10 tr.odd td {}
table#table10 tr.even td {}

then use

<table id="table10">
<tr class="even">
<td></td>
<td></td>
</tr>
<tr class="odd">
<td></td>
<td></td>
</tr>
</table>

then the rule would to all cells in the row.

Originally Posted by chrishirst

Yep it is.

You can do that as well if you want to have cells different on odd and even rows.
BUT for that you would apply the class to the row

table#table10 tr.odd td {}
table#table10 tr.even td {}

then use

<table id="table10">
<tr class="even">
<td></td>
<td></td>
</tr>
<tr class="odd">
<td></td>
<td></td>
</tr>
</table>

then the rule would to all cells in the row.

thanks a lot chris
I learnt something new today.

p/s: i enjoyed the theme park in blackpool