Welcome to WebmasterWorld Guest from 54.196.232.162

Forum Moderators: not2easy

Message Too Old, No Replies

Creating seperate <td> parameters

     
1:37 pm on Aug 20, 2003 (gmt 0)

New User

10+ Year Member

joined:Aug 20, 2003
posts:2
votes: 0


Hi! I am new to css and would like to know how to sit up different <td> elements for alignment and text formatting. I have the following:

BODY {
font: 8pt sans-serif;
}
TABLE {
border-collapse: collapse;
}
TD {
font: 8pt sans-serif;
color: #737173;
font-weight: bold;
text-align: center;
}

I need the first "TD" to do what is listed above and another "TD" to do other things. i.e. "text-align: left"

Thanks

2:02 pm on Aug 20, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


Welcome to WebmasterWorld, bigkahuna!

With CSS there are multiple "selectors" (ways to address different HTML elements). The selectors you are using (just the element name) are element selectors, they apply to all of the named elements on the page. So TD {} applies to all <TD> elements on the page. You want a more specific selector like a class selector .td {} or an ID selector #td {}.

To use a class / class selector:

.td1 {
font: 8pt sans-serif;
color: #737173;
font-weight: bold;
text-align: center;
}
.td2 {
font: 8pt sans-serif;
color: green;
font-weight: normal;
text-align: right;
}

...
<TD class="td1">
...
<TD class="td2">

To use id / id selector:

#td1 {
font: 8pt sans-serif;
color: #737173;
font-weight: bold;
text-align: center;
}
#td2 {
font: 8pt sans-serif;
color: green;
font-weight: normal;
text-align: right;
}

...
<TD id="td1">
...
<TD id="td2">

And here is a full list of selector with examples:
[w3.org...]

Jordan

2:03 pm on Aug 20, 2003 (gmt 0)

Administrator

WebmasterWorld Administrator coopster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:July 31, 2003
posts:12533
votes: 0


Use classes. For example:
<removed my post>MonkeeSage already answered this post :)
2:08 pm on Aug 20, 2003 (gmt 0)

New User

10+ Year Member

joined:Aug 20, 2003
posts:2
votes: 0


Thanks for the help!
5:23 pm on Aug 21, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:May 1, 2002
posts:351
votes: 0


One other thing to note: You can also set a small number of CSS properties [w3.org] on table columns by styling the col [w3.org] and colgroup [w3.org] elements. In fact, MSIE allows you to specify even [msdn.microsoft.com] more [msdn.microsoft.com].

So in MSIE, the rules:

col.one {
font: 8pt sans-serif;
color: #737173;
font-weight: bold;
text-align: center;
background: #FFF;
}
col.two {
font: 8pt sans-serif;
color: green;
font-weight: normal;
text-align: right;
}

will work with the following html:


<table summary="col style example">
<col class="one" />
<col class="two" />
<tbody>
<tr>
<td>Row one</td>
<td>Row two</td>
</tr>
</tbody>
</table>

This doesn't work [mail-archive.com] at all in Mozilla though and probably won't any time soon since it isn't part of the CSS 2.1 working draft. So I wouldn't count on it.