PDA

View Full Version : CSS Table


up4dw
10-09-2008, 05:57 AM
I have spent a bit of time making a css style sheet for a table I want to use throughout my site. Problem is I can only use the table once per page. If I try to use it again the formating wont work. :confused:


@charset "utf-8";
/* CSS Document */
table#options {
border: 3px solid #CCCCCC;
width: 660px;
}
table#options td {
padding: 5px;
border: solid #000 1px;
}
.data {
color: #000000;
text-align: left;
background-color: #;
}
.toprow {
font-weight: bold;

text-align: center;
background-image:url(../images/textures/horizontal%20strip.jpg);
color:#FFFFFF

}
.leftcol {

text-align: left;

background-color: #;
}


Here is the html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="../assets/style_sheets/tables-1.css" rel="stylesheet" type="text/css" />
</head>
<table width="532" cellspacing="2" id="options">
<tr class="toprow">
<td width="76">Item </td>
<td width="463">Optional Accessories</td>
<td width="86">Price </td>
</tr>
<tr>
<td class="leftcol">Test</td>
<td class="data">Test</td>
<td class="data">$125</td>
</tr>
<tr>
<td class="leftcol">&nbsp;</td>
<td class="data">&nbsp;</td>
<td class="data">&nbsp;</td>
</tr>
<tr>
<td class="leftcol">&nbsp;</td>
<td class="data">&nbsp;</td>
<td class="data">&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table width="532" cellspacing="2" id="options2">
<tr class="toprow">
<td width="76">Item </td>
<td width="463">Optional Accessories</td>
<td width="86">Price </td>
</tr>
<tr>
<td class="leftcol">Test</td>
<td class="data">Test</td>
<td class="data">$125</td>
</tr>
<tr>
<td class="leftcol">&nbsp;</td>
<td class="data">&nbsp;</td>
<td class="data">&nbsp;</td>
</tr>
<tr>
<td class="leftcol">&nbsp;</td>
<td class="data">&nbsp;</td>
<td class="data">&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

edbr
10-09-2008, 06:12 AM
makw table#options a class ie .options. then when you use a table its <table class="options"> etc etc
a div id ( #) can only be used once

up4dw
10-09-2008, 02:54 PM
Thank you edber.


Are tables still the best way to display data in this situation or can the same thin be done better using css in place of tables?

here is what they look like.
http://www.hardydiesel.com/diesel-generators/isuzu-powered-7-kw-diesel-generator.html

domedia
10-09-2008, 03:00 PM
Use CSS and tables. Without HTML there's nothing to style ;-)

up4dw
10-10-2008, 03:31 AM
Use CSS and tables. Without HTML there's nothing to style ;-)

Sounds cool can you show an example?

domedia
10-10-2008, 01:44 PM
Just like you had in your example above.
But put the styles in a separate file, a stylesheet, and call it from the haeder of all your pages.

up4dw
10-10-2008, 03:50 PM
It is in a seperate styl sheet. I am not sure how to call it from the header.

edbr
10-11-2008, 01:09 AM
<link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/stylesheet_name.css" />

domedia
10-11-2008, 06:38 PM
You should be able to assign a stylesheet to a page from design view as well. This should be covered in the help files.

up4dw
10-13-2008, 04:45 PM
Got it thanks for the help. I am starting to get a grip on the CSS thing. It is simpler than I had thought. Intimidating at first but actually intuitive now that I am almost up to speed.

One more question. Do most people contain all CSS for a site in one style sheet?


Loren

Corrosive
10-13-2008, 04:58 PM
Do most people contain all CSS for a site in one style sheet?

Try to. There's no real reason not to that I have found yet. I read an article somewhere about splitting your tags, classes and IDs into different stylesheets but I can't really see the point.

domedia
10-13-2008, 05:33 PM
classes and ID's in separate files makes no sense :)

I often end up with anywhere from 2-5. Often use application specific files in addition to an overall general one.

Corrosive
10-13-2008, 05:59 PM
classes and ID's in separate files makes no sense :)



I know. There were a lot of people leaving comments and having a dig at the writer for having no reason other than 'it looks tidy'.

up4dw
10-13-2008, 07:44 PM
<link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/stylesheet_name.css" />

Would it be ok to put the css file in an assets folder or will it perform better
in the root?

<link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/assets/stylesheet_name.css" />

domedia
10-13-2008, 07:46 PM
Would it be ok to put the css file in an assets folder or will it perform better
in the root? Makes no difference. :)

domedia
10-13-2008, 07:47 PM
I know. There were a lot of people leaving comments and having a dig at the writer for having no reason other than 'it looks tidy'. I have to admit it's the first time I've heard about anyone even mentioning it.

Corrosive
10-13-2008, 09:17 PM
I have to admit it's the first time I've heard about anyone even mentioning it.

I'll see if I can find it again...

domedia
10-13-2008, 09:33 PM
I'll see if I can find it again... No need, it's complete bollocks, noone should do it like that. It does not improve productivity or anything. It makes as much sense as writing every second CSS rule in a second stylesheet :)

edbr
10-14-2008, 01:09 AM
might have been me. i separate if i have a lot of classes on a site, I will use one for shared general layout, also separate for an item like a menu or gallery the reason is just for me , i find it easier to find and edit . no other reason

domedia
10-14-2008, 03:29 AM
Now don't get me wrong. That approach makes *alot* of sense.
Sometimes I will have a reset CSS (I like the one from E Meyer the best) to make sure all browser have the same starting point, and then one for the overall layout and others for specific pages/apps. But it's very different from saying whatever is a class goes here and whatever is an ID goes here :)