Welcome to WebmasterWorld Guest from 54.167.175.107

Forum Moderators: not2easy

Creating seperate <td> parameters

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

10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

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



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

10+ Year Member



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

10+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month