1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

tables and divs

Discussion in 'HTML, Graphics & Programming' started by xirokx, 18 Jun 2006.

  1. xirokx

    Mobster

    Joined: 2 Oct 2004

    Posts: 4,383

    Location: N.W London

    Hi,

    I am learning coding starting of with html coding over at w3c.com and then will go on to xhtml and css...

    I am at the stage of learning about html coding for tables...however I remember ppl on this forum saying I should use Divs instead...

    Please can someone kindly explain the difference? and advise when I would use a table and when I would use Divs?

    Thanks in advance...

    Cheers!!
     
  2. Beansprout

    Man of Honour

    Joined: 31 Jan 2004

    Posts: 16,319

    Location: Plymouth

    Thank Augmented for this link - Bring on the tables! :)

    In short, use tables to display tabular content like, for example football results. But don't ever use them to define the layout of a site. That's done by Cascading Style Sheets, which apply styles to markup (like <div>'s, which define sections of content and <h1>'s, which define page headings, and so on) :)
     
  3. xirokx

    Mobster

    Joined: 2 Oct 2004

    Posts: 4,383

    Location: N.W London

    so when creating a new website for the layout use CSS??

    a div is a CSS tag? is that right?

    so for all pages within my site use CSS to define the layout? is that right?

    I'm getting soooooo confused between divs and tables you wont believe...

    I have seen examples of websites where ppl have used tables for their layout...this is not using tables properly right?
     
  4. Beansprout

    Man of Honour

    Joined: 31 Jan 2004

    Posts: 16,319

    Location: Plymouth

    I would link you to www.w3schools.com but it appears to be down at the moment :(

    Keep checking back though, since when it comes up it's a very good site for a total beginner to read :)

    Nope :D

    "HTML" is what webpages are marked up in. So you have some content, like a paragraph, and you 'mark' it as a paragraph by enclosing it in the HTML tags for a paragraph - '<p>' to signal the start, and '</p>' to signal the end.

    Now, this doesn't do much to the style. That's where Style Sheets (CSS) come in. They say "this element should have a blue-coloured font, and be positioned 10 pixels from the left", and so on - ie, they style the elements. Like so, if you wanted paragraphs to have a blue font:

    Code:
    p {
    color: blue;
    }
    
    CSS files accompany HTML files by linking to them from the HTML document, for example:

    Code:
    <link rel="stylesheet" type="text/css" media="screen" href="http://www.twobeds.com/wp-content/themes/k2/style.css" />
    
    That says "this link is a stylesheet for displaying on a screen, and it tells you how this webpage should look" (close enough, anyway.)

    Bedtime for me, but read W3schools when it comes up - it rocks for the basics :)
     
  5. toosepin

    Hitman

    Joined: 9 Jun 2006

    Posts: 954

    Location: Manchester

    ^^ That pretty much sums it up.

    Tip: Always validate your markup and styles.
     
  6. xirokx

    Mobster

    Joined: 2 Oct 2004

    Posts: 4,383

    Location: N.W London

    right im with you as far as HTML is concerned and I believe I even understand the basics now of CSS ( I said the basics :) )

    What I fail to understand is this....

    I have to post a site so you guys understand what I mean because I may not explain clearly or you may misinterpret what I am saying...

    http://www.hardocp.com/

    If you look at their home page, now I realise the background is black (or close to) but you see how they have that table (sorry for using that phrase) in the middle and then all the content within it???

    Have they used divs to do that? I looked at the source and I see the div tag left right and centre so I guess they did but I am just double checking?

    If yes.....have they basically defined every section of that table to state where they want adverts, texts etc to be placed within it?

    How did they create the borders on the left and right handside of the table (sorry to use that word again)? Are the nav buttons just buttons they created in photoshop or fireworks and then they turned them into a link?

    Please clarify the above re: divs...

    sorry for posting the site but I really needed an example to help clarify my point...


    thanks in advance...

    btw I am following w3c schools and am finding it very useful and would recommend them to anyone who wants to get into webdesign as a basic starting off point :)
     
  7. Lovemonk

    Gangster

    Joined: 21 Sep 2005

    Posts: 180

    Location: Dundee

    Quite a few questions there but i'll have a go....

    Before i do though, there is a fantastic extension available to Firefox users that will help you to dissect every page that you come across. A lot of pages are much simpler than the one you have chosen and it's easier to work out exactly how it has been 'made'. If you get hold of the extension, from the link underneath, it will make your life a whole lot easier in learning how something was/is done. The page you have mentioned uses a whole heap of frames to build up into what you can see. As a result, if you just look at the plain jane source, you will miss a lot of the markup/css that is involved. With the extension i seem to be touting (i love it, don't hold it against me), you can look at the 'generated source' and see the mark-up in all its glory.

    Firefox Web Developer Extension

    Your questions...

    1. What you have called a table is, as you rightly suspected, created by DIVS styled in such a way that it looks like you or I might describe a table. It is not a table. Step away from the table and no one will get hurt! :)

    2. The borders have been styled using CSS. Think of DIVS as just 2 dimensional boxes. Content can go within the boxes and the edges (borders) can be styled. Boxes can go within other boxes. The presentation of all of this can be handled from the CSS.

    3. The 'buttons' are just styled unordered lists. (Loads of tutorials around the web on this. Just stick something like 'CSS Rollover Menus' into Google and the world is your oyster.)

    Keep going, soon the muddy waters will clear and your brain gets to explode about other stuff.
     
    Last edited: 19 Jun 2006
  8. iCraig

    PermaBanned

    Joined: 21 Apr 2004

    Posts: 13,314

    Location: Wolverhampton

    The most important thing here to remember is that every element has a purpose, including tables.

    It onlys gets messy when people use the wrong element(s)

    Also remember to avoid depreciated elements for your document type.

    For example in XHTML Trans, tags such as <font> and <center> should not be used anymore.
     
  9. xirokx

    Mobster

    Joined: 2 Oct 2004

    Posts: 4,383

    Location: N.W London

    thanks for your help...

    Does anyone know a good tutorial working with Divs?

    I would like to create a test webpage with a box in the middle using Divs and CSS....

    W3C teaches you alot of the properties you can have when using CSS just like it does with HTML and XHTML however I see no reference to Divs on that site...perhaps I am looking in the wrong place...

    I know divs have properties such as <div class> and <div container> etc etc but it would be really helpful if I could find a definitive list somewhere....

    Please help?

    Thanks in advance...

    Cheers...
     
  10. Beansprout

    Man of Honour

    Joined: 31 Jan 2004

    Posts: 16,319

    Location: Plymouth

    Aha, W3schools is back now...try this :)
     
  11. xirokx

    Mobster

    Joined: 2 Oct 2004

    Posts: 4,383

    Location: N.W London

    yeah at long last hey its back on :)

    see I have read through quite a lot of that tutorial especially the part about CSS but it makes no reference to Divs....

    Therefore I was looking for a tutorial that does and how to implement them...

    Over at W3C you see all the diff attributes you can use for a css style sheet I was hoping they would have the same for Divs....so I can learn what I needed to use Divs wise...

    Am I being clear?
     
  12. iCraig

    PermaBanned

    Joined: 21 Apr 2004

    Posts: 13,314

    Location: Wolverhampton

    Ok well, <div> is an element. A block level element. Meaning they will take full width of the line they are on, unless other wise stated.

    Now, the attributes you can attach to a DIV (just like every element) vary greatly. the most common ones, are assigning a class and or ID to a DIV.

    You can also

    Such as:

    Code:
    <div id="coffee"></div>    <div class="cup"></div>
    
    You'll pick them all up as you go along, and you'll find certain attributes can only be applied to certain elements. Such as the href="" attribute is only used on anchor elements. (<a>).

    Hope that helps?

    The style attributes should be seperate from the HTML. All style information is stored in the CSS.

    So don't go writing <div style="padding: 5px; color:#ffffff;"></div> :p
     
    Last edited: 19 Jun 2006
  13. xirokx

    Mobster

    Joined: 2 Oct 2004

    Posts: 4,383

    Location: N.W London

    So for example would this be correct:

    <div=subnav> </div>.....where subnav is the name of my sheet?

    I think I understand what you mean it would be so great if there was like a tutorial on divs so n00bs like myself would know how to use this element properly just as w3c school have tutorials on html, xhtml, css, javascript etc etc
     
  14. Mr_L

    Mobster

    Joined: 28 Jan 2005

    Posts: 3,732

    Location: Worcester

    Class Selectors

    There is an explantion here about class selectors as well as many other selectors. Try copying the code and changing it to see what happens. Sometimes the best way to learn is to do. :)
     
  15. iCraig

    PermaBanned

    Joined: 21 Apr 2004

    Posts: 13,314

    Location: Wolverhampton

    No, you have to give it an ID if you want to identify a DIV.

    So it would be, <div id="subnav"></div>

    and then in your CSS:
    Code:
    DIV#subnav {
     *style attributes in here*
    }
    
    IDs are specified in the CSS with a #. Classes are identified by a . (full stop)
     
  16. xirokx

    Mobster

    Joined: 2 Oct 2004

    Posts: 4,383

    Location: N.W London

    thanks for the link on the tut will come in very handy...

    Icraig thats my point like there is div class, div id how many other div properties are available to me? is there a list?

    thanks alot for your advice its proving to be invaluable :)
     
  17. gord

    Capodecina

    Joined: 18 Oct 2003

    Posts: 19,338

    Location: Midlands

    Yep, there is here http://www.w3schools.com/tags/tag_div.asp check the standard attributes and it has a link for a full list.

    Although, many of them are irrelevant to you at the moment. You want class and id to define what sort of presentation styles you can give the div in your CSS sheet by as iCraig mentioned linking with the period for a class and hash for an id.
     
  18. xirokx

    Mobster

    Joined: 2 Oct 2004

    Posts: 4,383

    Location: N.W London

    cheers mate :)
     
  19. xirokx

    Mobster

    Joined: 2 Oct 2004

    Posts: 4,383

    Location: N.W London

    can i clarify that now adays one should not use tables at all for layout purposes and instead should use CSS for layouts which are defined by Divs (i hope that is the correct terminalogy) still learning u see :) ?????
     
  20. iCraig

    PermaBanned

    Joined: 21 Apr 2004

    Posts: 13,314

    Location: Wolverhampton

    You're basically right.

    Just don't discard tables completely. If you're talking about layout of the site, navigation, headers, footers etc, then yes. CSS and DIVs should control them.

    But if there is content that needs laying out in a tabular fashion, such as a football league on one of the pages. Tables should be used.

    Many people get swept up that tables are bad, I've even seen other forums critising people for using them to display tabular content. Saying DIV's and horizontal rules should of been used instead. Madness.