1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

What's better? Coding in DIV or Tables?

Discussion in 'HTML & Website Design' started by Untitled, Aug 27, 2007.

0
Page 1 of 2
  1. #1
    What do you think is better to code a site with, DIV or Tables?
     
    Untitled, Aug 27, 2007 IP
  2. Directory_SEO

    Directory_SEO Peon

    Messages:
    202
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #2
    div is better than table, that's one of the benfits of using CSS
     
    Directory_SEO, Aug 27, 2007 IP
  3. hfweb

    hfweb Peon

    Messages:
    36
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    In my opinion you can do much more with div's than tables, they behave better, and design is faster once you've goten used to doing them. Not to mention, tables are ment for "tabular data"
     
    hfweb, Aug 27, 2007 IP
  4. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #4
    divs by far...
     
    twistedspikes, Aug 27, 2007 IP
  5. JEET

    JEET Notable Member

    Messages:
    3,825
    Likes Received:
    502
    Best Answers:
    19
    Trophy Points:
    265
    #5
    DIV is better for both end user, and for me as a coder. For end user the pages load faster, for me it's faster to code up.
    The only problem I come across with DIV's is to get the "footer" bar at the bottom, ( specially if the menu is long, and the main content area is not long enough) . Otherwise it's perfect for me.
    regards :)
     
    JEET, Aug 27, 2007 IP
  6. jamesicus

    jamesicus Peon

    Messages:
    477
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Table free design offers many advantages as others have pointed out -- but if you must use tables for Layout, there is a great article about creating accessible Tables at http://www.webaim.org/techniques/tables/ -- sorry I can't offer a live link yet.

    James
     
    jamesicus, Aug 27, 2007 IP
  7. dmi

    dmi Well-Known Member

    Messages:
    2,705
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    140
    #7
    DIVs, definitely.
     
    dmi, Aug 27, 2007 IP
  8. NineDesign

    NineDesign Peon

    Messages:
    237
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I don't believe tables should have ever been considered for the structural layout of a design, there intention is to hold data... And only that. Your question is a no-brainer - DIV all the way.
     
    NineDesign, Aug 27, 2007 IP
  9. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Neither, and here's why. A DIV is a(n otherwise) meaningless block-level element used to divide sections of a Web page. HTML elements have their purposes such as H1-H6 for headings, P for paragraphs, UL for unordered lists, OL for ordered lists, LI for list items in both unordered and ordered lists, and so forth. They all have a meaning, and should thus be used for the job they were intended.

    Rather than wrapping everything around a DIV container (or using sloppy HTML code) you should learn what these elements mean and how to use them according to their meaning to structure your Web pages. This is called semantics.

    DIVs do have their uses, especially for headers and footers, like so:

    
<div id="header">
    <img src="/images/logo.png" width="200" height="80" alt="Web Site Title" title="" /> <!-- obviously I'm using XHTML here; if I were to use regular HTML I wouldn't include the space and the forward slash before the > character -->
</div>
<div id="footer">
    <small>Copyright &copy; 2006-2007, The Monster Under the Bed.  All Rights to Scare Unsuspecting Children Reserved.</small>
</div>
    Code (markup):
    It's also useful for defining your main content area and sidebars.

    
<div id="content">
    Main Page Content Goes Here
</div>
<div id="sidebar">
    Sidebar Content Goes Here
</div>
    Code (markup):
    And for menus - drop that DIV container. Let me show you how it's really done.

    
<ul id="menu">
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
</ul>
    Code (markup):
    That's it. It's all you'll ever need. No extra DIV wrapper needed.

    So, how does this look on a completed Web page (in between the <body> and </body> tags obviously)?

    
<div id="header">
    <img src="/images/logo.png" width="200" height="80" alt="Web Site Title" title="" />
</div>
<ul id="menu">
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
</ul>
<div id="content">
    Main Page Content Goes Here
</div>
<div id="sidebar">
    Sidebar Content Goes Here
</div>
<div id="footer">
    <small>Copyright &copy; 2006-2007, The Monster Under the Bed.  All Rights to Scare Unsuspecting Children Reserved.</small>
</div>
    Code (markup):
    Like that.

    If you have a footer menu, use a list (since it's just a list of links, like the main menu). But you won't need to slap an ID on it, since you'll be able to reference it from the #footer selector in your stylesheet.

    Given the simple HTML code I've provided here, tell me, how many layouts can you produce from this? Yes, I'm actually testing your knowledge. You may not add any extra HTML elements to the page, except for inside the DIV with the ID of "content".
     
    Dan Schulz, Aug 27, 2007 IP
  10. design2host

    design2host Active Member

    Messages:
    209
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #10
    I always used tables ... Say till Yesterday. I just popped up on a few web pages to see the advantagse of it and then i goofed up.Today i have a NO TABLE design for 3 of my websites already (Had a tough time redesigning it with CSS) but i feel much better with divs now. Divs KUDOS
     
    design2host, Aug 27, 2007 IP
  11. carl_in_florida

    carl_in_florida Active Member

    Messages:
    1,066
    Likes Received:
    63
    Best Answers:
    0
    Trophy Points:
    90
    #11
    I use both. Div layouts are supposedly better till you have disappearing sidebars and the like.
     
    carl_in_florida, Aug 27, 2007 IP
  12. dalton

    dalton Peon

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Divs...save tables for tabular data
     
    dalton, Aug 27, 2007 IP
  13. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #13
    That shouldn't be a problem unless you're using absolute positioning for your layout, which will cause far more problems than that.
     
    Dan Schulz, Aug 27, 2007 IP
  14. bryandy

    bryandy Peon

    Messages:
    774
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #14
    DIV's are way better, more things you can do with them
     
    bryandy, Aug 27, 2007 IP
  15. sarah84

    sarah84 Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    i think i need both of them...
     
    sarah84, Aug 28, 2007 IP
  16. fhirzall

    fhirzall Guest

    Messages:
    124
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #16
    I just like to use one table in my websites to hold my layout. Harder to break table-based layouts (especially with dynamic sites), and less problems with footers, not really a big deal if you use one table, tables only get bad when you're using nested ones with spacers and such.
     
    fhirzall, Aug 29, 2007 IP
  17. AstarothSolutions

    AstarothSolutions Peon

    Messages:
    2,680
    Likes Received:
    77
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Dan Schulz's answer is the correct one. They are for different purposes.

    Dont fall into the trap of thinking one is better than other they are simply different and overly divided (div) pages are as bad for usability and search engine optimisation as the "traditional" nested tables were.

    As usual things have gone from one extreme to another and yet to find the proper middle ground
     
    AstarothSolutions, Aug 30, 2007 IP
  18. cerious22

    cerious22 Active Member

    Messages:
    146
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #18
    i agree with dan, and thank you for that explanation

    -Mike
     
    cerious22, Aug 30, 2007 IP
  19. zcpro

    zcpro Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    DIV for the layout itself, but sometimes tables come in handy for text/content
     
    zcpro, Aug 30, 2007 IP
  20. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #20
    What? Nobody's going to take up my challenge?
     
    Dan Schulz, Aug 30, 2007 IP
Page 1 of 2