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!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Style sheet in a table

Status
Not open for further replies.
jdmartin74

jdmartin74

Programmer
Sep 13, 2002
45
US
I'm hoping this is an easy question, but I'm not sure what I'm trying is possible or not. No matter how much reading I do, I can't find the answer.

I have a table, as follows:

<table class='report'>
<tr>
<th>Column heading 1</th>
<th>Column heading 1</th>
<th>Column heading 1</th>
</tr>
<tr>
<td>data etc...</td>
<td>data etc...</td>
<td>data etc...</td>
</tr>
</table>

The style sheet is:

th.report {font-family: Verdana; font-size:8pt; font-weight:bold; color: #555555; background:#DDDDDD }

My problem is that the style for the <th> tags is not picked up. If I change my code to <th class='report'> it works fine, but I don't really want to have to put the 'class' call in each cell. Shouldn't the fact that the table is in the class filter down?

I would appreciate any help!

Thanks

Jonathan.
 
Sort by date Sort by votes
Your style sheet sets a class ONLY for a th element. But your HTML sets the class at the table element level. Seems confused to me. I'm suprised it works at all. Then again, I get confused easily on a Monday!

Would this work:

Code: 
table.report th, table.report td {
    <style here>
}


 
Upvote 0 Downvote
Works perfectly. Thanks very much. My understanding has just clicked into place.

Thanks again.

J.
 
Upvote 0 Downvote
Just to clarify...

your style sheet sets the style for th.report

that means it sets up a class of th, so you can only use this in th tags.

when you wrote <table class="report"> this didn't do anything because you didn't specify a table.report so there was no style information.

if you don't want to type the class="report" then what you need to do is to put the style into the default th tag, i.e.

th { blah; blah; blah; }

this will set your default th tag to have the specified styles.
Hope that makes it clearer...
 
Upvote 0 Downvote
I think I'm finally getting to understand these!

One final thing. I have:

<table border='0' cellpadding='2' cellspacing='1'>

...can these 3 properties be specified in a style sheet for the table?
 
Upvote 0 Downvote
Though you can add padding and margin attributes to your stylesheet. Some browsers don't like this.
Also different browsers treat the "box model" differently, so adding padding and margins to table cells can make them appear differently in different browsers.
Some will put the padding on the inside of the "box" others on the outside.

Borders can be added to any element within the table, but again, they look different to the "standard" and frankly horrible looking faux 3d HTML effort rendered by browsers.

If you applay a border to a table element it goes around the table, not around the cells. You will need to apply the border to the cells too in order to emulate the behaviour of HTML table borders.

Code: 
table {
   /* to put a 1px black border around the table, but not the cells */
   border: 1px solid black; 
}

td {
    padding: 5px;
    margin: 5px;
}

 
Upvote 0 Downvote
Thanks. This is all coming together now.

Everything is working fine, however, the cellspacing is required in the HTML, not the CSS. On reading about this, border-spacing is not supported in IE (at the very least).

Other than that, I'm pleased with what I have got. Thanks for everyone's help.

For anyone interested, my code is:
Code: 
<html>
<head>
<style>
table.report
{
	border-collapse: seperate;
    	border-spacing: 1px 1px;
}

table.report td, th
{
	font-family: Verdana;
	font-size:8pt;
	color: #555555;
	text-align:left;
	padding: 2px 10px 2px 10px;
	background:#EEEEEE;
    	border: 0px solid;
    	
}

table.report th
{
	font-weight:bold;
	background:#DDDDDD;
}
</style>
</head>
<body>
<table class='report' cellspacing='1'>
	<tr>
	<th>Heading 1</th>
	<th>Heading 2</th>
	<th>Heading x3</th>
	</tr>
	<tr>
	<td>data 1</td>
	<td>data 2</td>
	<td>data 3</td>
	</tr>
</table>

</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
825
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
789
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
238
Alt255
Alt255
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top