css class question

OK, I think I understand everything you both said… =)
I wish I understood this stuff the way you guys do, I run a help website/forum for people with motorcycles so I’m good with that stuff but this confuses me, lol.

I’m trying hard to learn how to better implement CSS in my site. I feel that running through the W3schools, HTML Dog and similar sites help, but more than anything “real world” experience and trial and error have been my best educators (while having great people like you as a safety net).

I want to use CSS to style my tables, I grabbed some sample code from the W3schools site and expanded upon that, but is this the smartest way to do what I want?

/* begin style for overall table header */
.table_header {
	background: #e6e6e6;
	font-size: 1.4em;
	color: #900b0c;
	font-weight:bold;
	text-align:center;
}

tr td.table_header {
	padding: 15px 0;
}
/* end style for overall table header */

/* begin styling for table with vertical stripes */
.vert_table {
	border-collapse:collapse;
	margin-left:auto;
	margin-right:auto;
}

.vert_table td, .vert_table th {
	border:1px solid #5b5b5b;
	padding: 2px 5px;
}

.vert_table th {
	background: #900b0c url('images/tabletread.jpg');
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
	color:#ffffff;
}

.vert_table tr td {
	background-color:#eeeeee;
}

.vert_table tr td.alt {
	background-color:#dddddd;
}
/* end styling for table with vertical stripes */

/* begin styling for table with horizontal stripes */
.horiz_table {
	border-collapse:collapse;
	text-align:center;
	vertical-align:middle;
	margin-left:auto;
	margin-right:auto;
}

.horiz_table td, .horiz_table th {
	border:1px solid #5b5b5b;
	padding: 2px 5px;
}

.horiz_table th {
	background: #900b0c url('images/tabletread.jpg');
	font-weight:bold;
	color:#ffffff;
}

.horiz_table tr td {
	background-color:#eeeeee;
}

.horiz_table tr.alt td {
	background-color:#dddddd;
}
/* end styling for table with horizontal stripes */

/* begin styling for PC3 maps table */
.pc3 {
	font-size:0.8em;
	border-collapse:collapse;
	text-align:center;
	vertical-align:middle;
	margin-left:auto;
	margin-right:auto;
}

.pc3 td, .pc3 th {
	border:1px solid #5b5b5b;
	padding: 3px 2px;
}

.pc3 th {
	background: #900b0c url('images/tabletread.jpg');
	font-weight:bold;
	color:#ffffff;
}

.pc3 tr td {
	background-color:#eeeeee;
}

.pc3 tr.alt td {
	background-color:#dddddd;
}
/* end styling for PC3 maps table */

To break this down, the first header is this “overall header” that we discussed in this post. The next table is supposed to be a vertically striped table, the one after that is a horizontal striped table (striped for ease of reading). The last table (pc3) is a specific one I setup to shrink the text because it was so big it wouldn’t fit otherwise.

Am I going about this in the wrong manner? Is there a better way to establish the same effect? I realize that there must be a better way to do this, but I also know that I need to finish this thing at some point…

Thanks very much to both of you for taking the time. As someone who has run “help” type websites for almost 10 years I can really understand and appreciate your time spent helping me.

Thanks very much for the design blog link, that site was an excellent read and actually helped me make some changes I really wanted to address. I had been wanting to move my search box to my header and setup my logo in the header better than I had it previously. Both were done with some guidance by that site and some fancy googlin’. =)

About the validator, thanks for the reminder because I keep forgetting that thing is there and I should be using it… When I input my CSS I didn’t see it making recommendations, am I missing that part?

Also, in regards to the tables CSS I posted above, can you tell me if my current format is the best way for me to accomplish my goal, or is there a superior or shorter way? I guess I’m mostly confused by the fact that my existing code worked for most of my tables, but I needed you to help me make the change to my class (.table_header). This is compounded by the fact that I have 2 tables and the .table_header has resulted in different font sizes in both – even though I specified a font size in the CSS.

Examples:

http://tech.bareasschoppers.com/power-commander-pc3-maps/

http://tech.bareasschoppers.com/engine/alternate-oil-filters-vtx/

If you look at the very top table headers (.table_header) the fonts are different sizes. I know it’s because my .pc3 class (first link) calls for a smaller font, and I’m guessing that the .table_header is then enlarging this already smaller font…

Thanks again to you both for getting involved.

Annedorko, thanks so much for all the help and advice. I found the pull down on the CSS page, I must have been blind because I sure looked for it the first time and I didn’t find it…

My questions/concerns about my table-related CSS are basically because I want to set this up one time and have it work for me throughout. I prefer to have a good foundation to work from.

/* begin styling for table with vertical stripes */
.vert_table {
	border-collapse:collapse;
	margin-left:auto;
	margin-right:auto;}
.vert_table td, .vert_table th {
	border:1px solid #5b5b5b;
	padding: 2px 5px;}
.vert_table th {
	background: #900b0c url('images/tabletread.jpg');
	font-weight:bold;
	text-align:center;
	vertical-align:middle;
	color:#ffffff;}
.vert_table tr td {
	background-color:#eeeeee;}
.vert_table tr td.alt {
	background-color:#dddddd;}
/* end styling for table with vertical stripes */

This is my CSS for a table with vertical stripes. Something like this:
http://tech.bareasschoppers.com/engine/alternate-oil-filters-vtx/
I got the building blocks for this from this page on W3schools:
http://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy
Based on the problem I had that started this thread and our discussion, would it be smarter for me to change these classes to have the td, th, tr, etc at the beginning?

I have the same question regarding my horizontal striped table:

/* begin styling for table with horizontal stripes */
.horiz_table {
	border-collapse:collapse;
	text-align:center;
	vertical-align:middle;
	margin-left:auto;
	margin-right:auto;}
.horiz_table td, .horiz_table th {
	border:1px solid #5b5b5b;
	padding: 2px 5px;}
.horiz_table th {
	background: #900b0c url('images/tabletread.jpg');
	font-weight:bold;
	color:#ffffff;}
.horiz_table tr td {
	background-color:#eeeeee;}
.horiz_table tr.alt td {
	background-color:#dddddd;}
/* end styling for table with horizontal stripes */

Something like this:
http://tech.bareasschoppers.com/power-commander-pc3-maps/

I’m basically wondering most of this because of the issue I had with my header CSS:

.table_header { /* style for overall table header */
	background: #e6e6e6;
	font-size: 1.4em;
	color: #900b0c;
	font-weight:bold;
	text-align:center;}
tr td.table_header {
	padding: 15px 0;}

Which you were kind enough to help me resolve.

Lastly, I made this special table class because I needed the font to be smaller:

.pc3 {
	font-size:0.8em;
	border-collapse:collapse;
	text-align:center;
	vertical-align:middle;
	margin-left:auto;
	margin-right:auto;}
.pc3 td, .pc3 th {
	border:1px solid #5b5b5b;
	padding: 3px 2px;}
.pc3 th {
	background: #900b0c url('images/tabletread.jpg');
	font-weight:bold;
	color:#ffffff;}
.pc3 tr td {
	background-color:#eeeeee;}
.pc3 tr.alt td {
	background-color:#dddddd;}

For this .pc3 class can’t I just use my existing horizontal table class (which is pretty much the same) and only use this .pc3 class to tweak my text?

I know that I can test all this stuff out, so I’m not trying to seem like a freeloader – but my trial and error ends up with code like we discussed above… Sometimes it works, sometimes it doesn’t and sometimes it doesn’t conform to CSS standards.

Thanks again to those who have helped, I’ve really learned a LOT from this discussion so far.