Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2004
    Location
    Chicago
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS - newbie NEEDS help with Data Tables & General Concepts

    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 information in there. I'd like to represent specs in a chart/table format.

    I am very new to CSS, still trying to grasp some concepts. 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 those 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:

    http://www.gepco.com/products/cable...eo/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, 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 i 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 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

  • #2
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    404 on that link... please post the whole URL and not an abbreviated one.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #3
    New Coder
    Join Date
    Jan 2004
    Location
    Chicago
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Link to Site

    Yeesh, sorry about that! I don't know what happened, I thought I copied the whole thing!

    Here ya go!


    Gepco Product Specification Chart

  • #4
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, short answer: use <table>.

    Long answer: The reason you've heard '<table> is bad and CSS is good' is because of semantics. <table> is used to mark up tabular data &mdash; that makes sense, right? But so many people use it to create a layout. This doesn't make sense. XML (and derived technologies including XHTMl) and HTML are markup languages, data with 'tags' to describe the type of data and structure. Use <table> to create a layout, and you're calling a layout a table when it isn't.

    So, how should you create a layout? We use a tag that doesn't mean anything, it's 'Semantically empty'. There are two main tags like this, <div> and <span>. We use <div>, the reason is complicated and it relies on several models that you'll understand later but not yet, just trust me that using <span> won't work .

    Okay. So we structure our document using <div>. Now what? We want it to look pretty, so we use CSS.

    But, back to the question. Remember, <table> is for tabular data. What you've got at the bottom there looks like tabular data to me. I see no reason why <table> can't be used.

    Next point: keeping your CSS for the tables seperate. I reccommend using the CSS rule @import to get styles from a seperate file, as older browsers which would have trouble with the CSS (it's better just to hide it from them completely, trust me.). Save your table rules in a seperate file and @import to them, if you want to keep the CSS seperate.

    Now, give the table(s) an id, and use the CSS id selector to reach them:
    Code:
    #idofelement { 
      /* rules for table styles */
    }
    This will ensure that it won't intefer with your current layout.
    Last edited by me'; 01-16-2004 at 05:45 PM.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #5
    New Coder
    Join Date
    Jan 2004
    Location
    Chicago
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks But...

    Thanks for the reply. I do understand the concept of the <DIV> tag, and a coding buddy of mine said not to use the SPAN tag as well, so that's validated! =)

    Ok, so I'm going to use the HTML Table tag for the product specs, but how should I go about using CSS to create a standard style. I'd like to be able to highlight certain rows and also, I would like to be able to use thin, clean lines. Can I use CSS to do this? Or do I need to do the table inside a table trick? Can I apply the CSS styles just to the <table> Chart....which as of right now, is going to be nested inside another table.

    My site, unfortunately is in a table layout. I am so busy with my "jack of all trades" marketing and Design position, that I've lost touch a little bit on the web design technology. I know CSS has been around a while, and I think I was still trying to grasp the concepts of Javascript!

    Any suggestions on how to do these tables in CSS, without messing up my current layout using the Table tag? Hope I am making sense here. I just don't want to style my current tables like my product spec tables. Just want to have the CSS styles apply ONLY to the nested data tables I'll be creating.

    Thanks again for all your help!

    Valerie

  • #6
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply. I do understand the concept of the <DIV> tag
    Sorry, I explain to the lowest common denominator

    As for highlighting rows, etc., I'm sure it can be done, and CSS can style the entire table for you without worrying about nesting them, or anything else. If you want interactivity (highlighting rows based on user mouse clicks, etc.), then I'm afraid you'll have to jump into Javascript.

    Your first task should be to strip all the superfluous markup in that table tag, get it down to it's bare elements, and then you can start styling .

    Any suggestions on how to do these tables in CSS, without messing up my current layout using the Table tag? Hope I am making sense here. I just don't want to style my current tables like my product spec tables. Just want to have the CSS styles apply ONLY to the nested data tables I'll be creating.
    Sorry to quote myself, I wasn't clear enough the first time around:
    Now, give the table(s) an id, and use the CSS id selector to reach them:

    #idofelement {
    /* rules for table styles */
    }

    This will ensure that it won't intefer with your current layout.
    Last edited by me'; 01-16-2004 at 05:55 PM.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #7
    New Coder
    Join Date
    Jan 2004
    Location
    Chicago
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Whoops, missed your last point, but..

    Ok i missed your last point for some reason, I think it was hiding! =)

    Anyways, now I'm really confuesed. My coding buddy said not to use ID's but to use Classes...the IDs and Classes are still confuesing to me. I'm still reading some contradictory CSS resources in relation to how to use IDs vs CLASSES. As mentioned, I'm more left brained, and I need things really detailed and explained in a way that I can better understand. Sorry about that! Just takes me longer to learn some concepts.

    When you say import, do you just mean write a doc like tablestyle.css and have it be external, and then link it w/ the <LINK> tag??? This is what I was planning to do, but I just don't know what to write in the HTML table coding to specify that it be ONLY for these spec tables.

    I hope I am making sense here, and I'm really sorry if I'm being a pain!

    Thanks again for your time.

    valerie

  • #8
    New Coder
    Join Date
    Jan 2004
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    id is used for something that is unique and thus used only once on a page, ie <div id="menu">. class is used for things that appear more than once, ie <div class="entry"> on a blog type site. <span> tags have their uses. A <div> tag is used for a block level code. A <span> tag is used for inline code. Not that I really use <span> tags.

  • #9
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Whoops, missed your last point, but..

    Originally posted by DesignVHL
    Ok i missed your last point for some reason, I think it was hiding! =)
    I edited my post and added that point after rereading your post

    Anyways, now I'm really confuesed. My coding buddy said not to use ID's but to use Classes...the IDs and Classes are still confuesing to me. I'm still reading some contradictory CSS resources in relation to how to use IDs vs CLASSES. As mentioned, I'm more left brained, and I need things really detailed and explained in a way that I can better understand. Sorry about that! Just takes me longer to learn some concepts.
    id and class are used to identify individual elements. The only difference is subtle Javascript function calls (which really won't matter), and the fact that id can only be used on one element, whereas class can be used on many, as spufi said.

    When you say import, do you just mean write a doc like tablestyle.css and have it be external, and then link it w/ the <LINK> tag??? This is what I was planning to do, but I just don't know what to write in the HTML table coding to specify that it be ONLY for these spec tables.
    There are three ways to "include" an external style sheet. The first way is the link tag:
    Code:
    <link rel="stylesheet" href="styles.css" type="text/css" />
    , the second, only supported by cutting edge browsers (but technically better XML):
    Code:
    <?xml-stylesheet type="text/css" href="styles.css" ?>
    , and finally, using CSS itself:
    Code:
    <style type="text/css">
      @import (styles.css)
    </style>
    All of these have the same effect, the browser support varies. Generally, you'll want to use @import, because older browsers that would choke on the CSS won't see it, and will just display the content, unstyled (one huge advantage of the seperation of style and content).

    To make sure only the spec table gets the rules, use the CSS id selector:
    Code:
    #idoftable { /*rules here*/ }
    This trusts that you've given your spec table the id 'idoftable', like this:
    Code:
    <table id="idoftable">
      table content here...
    </table>
    Then the CSS rules will only apply to the element with the id 'idoftable', which happens to be your spec table!

    Note: if you have more than one element you need to apply a similar set of rules to, you have two major options:
    1. Wrap the elements in a <div>, give that an ID and use a combination of CSS selectors:
      Code:
      #idofdiv table { /*table rules*/ }
      This obviously won't work if the elements that need the rules applying to are spread out through the document.
    2. Give all the elements a class (eg, <table class="spectable">), and use the class selector in your CSS:
      Code:
      .classofelements { /*rules here*/ }
      Again, this assumes you've given the elements you need the rules applying to the class 'classofelements'.


    I hope I am making sense here, and I'm really sorry if I'm being a pain!
    No problem! Hope I can help.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •