Tables and CSS

toyt78 · Jun 21, 2005

I have a lot of tables and was wondering how I could use CSS with them?

Code:

<style>
#content {
font-size: 7pt;
font-color: blue;
font-family: Arial, Helvetica, sans-serif;
}
</style>

<table class="content">
<tr>
<td>data</td><td>datahere</td><td>moredata</td><td>datanext</td><td>dataagain</td>
</tr>
<tr>
<td>data</td><td>datahere</td><td>moredata</td><td>datanext</td><td>dataagain</td>
</tr>
</table>

<table class="content">
<tr>
<td>data</td><td>datahere</td><td>moredata</td><td>datanext</td><td>dataagain</td>
</tr>
</table>
etc..

Would it be easier to use div and if so how does it work? I have alot of tables and tds so was wondering the best way to get the CSS to work efficiently? Please advise.

joshbates15 · Jun 21, 2005

first off, i believe that #content means that you would need to refer to it as <table id="content"> instead of <table class="content">.
i digress... you might try doing something like this:

Code:

<html>
<head>
<style>
#content td
{
	font-size: 17pt;
	color: blue;
	font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<table id="content">
 <tr>
  <td>datahere</td>
  <td>datahere</td>
  <td>datahere</td>
  <td>datahere</td>
 </tr>
</table>
</body>
</html>

sirlojik · Jun 21, 2005

toyt78 is correct in his approach. The only thing to know is that you need to specify the css class or value for each table cell u want to update. The table cells do not inherit their parent(css class) by default. This has to be specified explicity for each cell u create. TRY the code below and tell me if am on parallel paths with u.

Code:

<table>
 <tr>
  [red]<td class="content">datahere</td>[/red]
 </tr>
</table>

---------------------------
WORD OR VOTE TO THE WISE IS ENUFF...;)

Foamcow · Jun 21, 2005

I don't believe that is strictly true.

There is no "correct" approach as such. But I would say that it is far more efficient to assign a table an ID or class than to specify a class for each cell.

If done like so:

Code:

table.content {
   style rules
}

or like so to be more specific and avoid possible failure of the cascade

Code:

table.content td {
   style rules
}

You could even just declare a class for any element and apply it to the table, the contained cells will inherit the styles (providing there is no other more specific style rule declared).

Code:

.content {
   style rules
}

Of course if this is a table style used only once on the page you could assign and ID. The style will cascade through to the table cells.

I think you may be getting confused with the way IE fails to apply body styles to tables on a page. This makes it necessary to apply your default font styles etc to table elements as well as declaring them for the body of the page.

By all means correct me if I am wrong. I've not encountered this difficulty and I just tested in IE6 and Firefox, both seemed to behave as I expected.

I might add that I was using a valid XHTML 1.0 doctype.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

toyt78 · Jun 21, 2005

Thanks!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Tables and CSS

toyt78

Technical User

joshbates15

Technical User

sirlojik

Programmer

Foamcow

Programmer

toyt78

Technical User

Similar threads

Part and Inventory Search

Sponsor