homepage Welcome to WebmasterWorld Guest from 54.145.209.80
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Creating seperate <td> parameters
bigkahuna

10+ Year Member



 
Msg#: 1692 posted 1:37 pm on Aug 20, 2003 (gmt 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

 

MonkeeSage

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 1692 posted 2:02 pm on Aug 20, 2003 (gmt 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

coopster

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



 
Msg#: 1692 posted 2:03 pm on Aug 20, 2003 (gmt 0)

Use classes. For example:
<removed my post>MonkeeSage already answered this post :)

bigkahuna

10+ Year Member



 
Msg#: 1692 posted 2:08 pm on Aug 20, 2003 (gmt 0)

Thanks for the help!

moonbiter

10+ Year Member



 
Msg#: 1692 posted 5:23 pm on Aug 21, 2003 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved