Formatting text within TABLE tags using CSS

Forum Moderators: not2easy

Message Too Old, No Replies

Formatting text within TABLE tags using CSS

What CSS property affect TABLE text?

lexipixel

7:38 pm on Mar 16, 2004 (gmt 0)

I am having trouble getting an external style sheet, ('myfirst.css') to format text within table cells, (the CSS link works, other properties are working, just text in tables is coming up with default browser settings).

For example-

If I wanted all text within this table to be "22pt Arial, red" how would I do so with CSS?

...thanks for any help.

Birdman

7:53 pm on Mar 16, 2004 (gmt 0)

Hello,

I can't really explain why(someone will, I,m sure) inheritance doesn't work well with tables but the way I get around it is to define the styles inline. Also note that some browsers will not understand color names, so try to use hex or rgb.

bruhaha

5:02 pm on Mar 17, 2004 (gmt 0)

Yes, there are inheritance problems. You cannot apply these styles to the table element, nor even to the row. Instead you must apply them at the cell level. E.g.,

td {
font: normal 22pt Arial;
color: #f00;
}

(Note: This will not usually require the use of inline styles.)

edisraf321

5:29 pm on Mar 17, 2004 (gmt 0)

Tables do inherit styles.

Change your Doctype to get your browser in standards mode.

i.e.


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Read this to learn more: [alistapart.com...]

-Chris

lexipixel

6:53 pm on Mar 17, 2004 (gmt 0)

Thanks, as usual I knew I could count on a fast answer here.

I didn't want to open the thread with too complex an issue, but actually I am more interested in the TABLE "font inheritance" issue at a deeper level.

I've been playing around with the Perl module text2html.pl, (http://sourceforge.net/projects/perl-text2html), and am interested in how they've implemented HTML4.01/CSS2 in tables... just wondering how much of it I can skimp on... I don't feel like reliving the browser wars --- was hoping something was bullet proof before I commit to coding for it.

At least this is fun and allows me to use normal typography settings.

I tried some tests, (with and without the w3!DOCTYPE line)... it looks like it works either way (IE5.5).. don't feel like testing every flavor.

Oh, well... here's some code for anyone that wants to play more.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS2 / HTML4.01 TABLE TAG TEST</TITLE>
<STYLE TYPE="text/css">
body { font-family: "Arial"; foreground-color: Green; size: 11pt }
table { font-family: "Courier New"; color: font-style: body; Navy; font-size: 22pt }
table.test2 { font-family: "Courier New"; color: Red; font-size: 40pt }
td.test2 { font-family: "Courier New"; color: Red; font-size: 40pt }
table.test3 { font-family: "Courier New"; color: Navy; font-size: 60pt }
td.test3 { font-family: "Courier New"; color: Navy; font-size: 60pt }
tr.test3 { font-family: "Courier New"; color: Navy; font-size: 60pt }
</STYLE>
<BODY>
<B>Test:</B> see if BODY style is inherited or overwritten by TABLE style<BR>
<TABLE cellpadding=10 border=1 width=200>
<TR><TD valign="top">Test</TD></TR>
</TABLE>
<B>Test:</B> see if TABLE "test2" style is properly interpreted<BR>
<TABLE class="test2" cellpadding=10 border=1 width=200>
<TR><TD valign="top">Test</TD></TR>
</TABLE>
<B>Test:</B> see if TABLE "test3" style is properly interpreted<BR>
<TABLE class="test3" cellpadding=10 border=1 width=200>
<TR><TD valign="top">Test</TD></TR>
</TABLE>
<B>Test:</B> check TD if style is properly interpreted<BR>
<TABLE cellpadding=10 border=1 width=200>
<TR>
<TD valign="top">Test</TD>
<TD class="test2" valign="top">Test</TD>
<TD class="test3" valign="top">Test</TD>
</TR>
</TABLE>
<B>Test:</B> check TR style takes precedence over TD style<BR>
<TABLE cellpadding=10 border=1 width=200>
<TR class="test3">
<TD valign="top">Test</TD>
<TD class="test2" valign="top">Test</TD>
<TD class="test3" valign="top">Test</TD>
</TR>
</TABLE>
<B>Test:</B> See if BODY style is preserved through document.<BR>
<BR>
</BODY>
</HTML>