CSS - newbie NEEDS help with Data Tables & General Concepts

[DesignVHL]

Hi there,

I am currently working on my company's website. It's been up for months, but I still have to get our product specifications in there. I'd like to represent these specs in a chart/table format.

I am very new to CSS, still trying to grasp some concepts. I have played around with it a little bit. Following some tutorials. BUT, I'm more of a creative than an analytical thinker, so sometimes it takes me twice as long to understand certain "programming" concepts. I use dreamweaver, and even using their "easy to use insert panels" seems like a pain. I think I'd rather hard code it myself to be sure it works properly.

I've done a lot of research on CSS, and have read a lot of tutorials. Some contradict one another! While I THINK i understand how it works, I guess I just am not sure how to visually make it work yet.

I'd like to start off with just using CSS to stylize the data that i'm going to be using. These Product Specifications will be very similar to our Sister Company's website, located here:

Gepco Product Specs (http://www.gepco.com/products/cable/digvideo/hidefsdi.htm)

We both deal in wire & cable. So while we both sell different products-and my company is a manufacturer, they are a distributor, our specs are pretty similar. I am not sure if the tables styles were done in CSS or not, but I do know that SOME CSS was used inline.

How can I design tables similar to the ones at the bottom of the page listed above? I'm not sure how to go about coding it. Should I use the actual TABLE TAG or should i go with the <DIV> element, and just format how it will look using CSS? OR should I do the layout with CSS boxes or CSS coded "tables". I do know that for sure would prefer an external CSS that will link to my product pages, so that my table fonts, colors, and styles are all consistant. My friend said to use classes, but I can't grasp the concept of how to only apply it to the Table/spec chart. I used tables to lay the site out also, and I'd like to start to move away from it if possible, with the "boxes-css concept"....I am going to slowly be adding in CSS to replace those tables eventually, but I have another website for my company that I really need to get rolling on, it's going to take me a few months I think. I don't have time to do a full CSS site rehaul, but it's important for me to get these product specs up online ASAP!!! How can I be sure that the CSS table styles won't interfere with my current layout.

ALSO, please keep in mind that each spec/table may not be configured exactly the same way. There may be less columns or rows. Or 2 different tables on one page. I have done a few tutorials, but I am not ready to take off those training wheels just yet. I really can't wait until I become more proficient in this area, I feel that CSS can do a lot in respect to a lot of things. I think it is opening up some doors for me, I can't wait to really dive in!!

I think my biggest problem is that I don't know where to get started!!! Should I design it first in an HTML table to get it how I would like it to look, and THEN "transfer" it to CSS? I have done these spec tables in Adobe InDesign for our printed catalog that never got printed. I'd like to import these tables - with no styles and then put it how it should look if possible, so I don't have to re-do all these tables, which took me some time! I just can't seem to visualize how to make this work! I need easy explainations! LOL!

I'd really appreciate it if someone could help me to explain all this stuff to me, in a way that I will understand how to do this properly. Examples of other similar charts would help, and perhaps a process/step by step procedure.

I really appreciate any help with this, for I've been wasting too much time reading, and not enough time designing. After I finish this project, I'm going to be working on a freelance project - small website that I"m going to do in CSS to get me rollling and to learn more. I hear that CSS is the way to go these days!! Most sites i visit use it.

Anyways, thanks again for your time, and for reading this LONG post! I'm a rambler, so please bare with me! =) Also, thanks in advance for your help, it's much appreciated!!

Valerie

[ray326]

Welcome, Valerie. Let me give you the short answer first and we can elaborate as needed. That data DOES belong in a table because ... duh ... it's tabular data. So your starting point is easy; put that information in HTML tables.

Now for how it LOOKS. Do that with CSS and you'll have a page that could be a quarter to a tenth the size of that hog you used as an example. Here's a for instance. Look at the source for the spec tables and notice that EVERY SINGLE CELL contains:

<div align="center"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="1"> ... </font></b></div>

ALL of those could be reduced to a SINGLE instance of the following rule in a stylesheet.

td {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .7em;
font-weight: bold;
}

[spufi]

Click on the Doctype link in my sig. Pick a Doctype and then validate your page based on it. Right now you will try to validate against a Trans. Doctype. What you want, if possible, is going against Strict.

Right now I see CSS classes that aren't being used. It looks like though that you want pretty much everything to have a font of Arial, Helvetica, sans-serif in that order. If so, just define those fonts for the <body> tag in CSS and then you can kill all the instances of you defining the fonts that way in the rest of your code.

Based on your actual <body> tag, the CSS for it should look like this.

body {
marign:0;
padding:0;
background-color:#FFF;
color:#000;
font-family: Arial, Helvetica, sans-serif;
}

Further cleaning up the <body> tag means defining your links in CSS too.

a {
background-color:transparent;
color:#999;
text-decoration:none;
}

You then have just a <body> tag with the preloader stuff defined in it.

I also saw where you defined the color of somerthing three different colors before you used any text.

Non-breaking spaces tend to be most unneeded.

I would point out tips on cleaning up your menus, but why do it when somebody already wrote an article on it? :) Check out the "Taming List" link in my sig.

But yeah, just going through and getting rid of all of your <font> tags and defining that stuff in externally linked CSS file would save you a healthy percentage of bandwidth.

And it goes without saying, read "Designing with Web Standards." Your code will look much different and better because of it.

[ray326]

I don't think that's her site but just a site she's using as an example of one similar to what she needs to do.

[Mysteriously]

Originally posted by DesignVHL
I'd like to start off with just using CSS to stylize the data that i'm going to be using. These Product Specifications will be very similar to our Sister Company's website, located here:

Gepco Product Specs (http://www.gepco.com/products/cable/digvideo/hidefsdi.htm)

[DesignVHL]

The other site I mentioned is my sister company's site, was done by their graphic designer. Only recently, has the owner (same owner for both companies) to start utilizing both our skills for different marketing and design related projects.

I did forward a link on to the designer that did do the Gepco website. Hopefully she'll start researching CSS, I really think it's a great way to keep consistancy, and cleaner code for faster viewing.

Have not had a chance to play this weekend, but I look forward to reading even MORE resources-there are so many I've found, I don't know where to begin! I can grasp the basic concept, and I think I do know what I need to do, I just need to try it!

Thanks for the help and resources.

Valerie