SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 65
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    tables vs. divs?

    I know that there is a huge battle going on, saying if people should be using tables for the layout of their pages or if they should be using DIVs.

    Most people say that I should be using DIVs others don't really care. They mostly say the I should be using tables because the WC3 says that they should not be used for designing pages.

    But the W3C also says that you should not be using DIVs in your web pages that only handle the layout of the page. All DIVs should only be used for containing content. You're not supposed to have empty DIVs for adjusting layout.

    Well, fine, but then what am I supposed to use? I can't use tables, or DIVs, and not everything is 100% doable using pure CSS yet. So how am I supposed to be designing my pages?

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there really isn't any battle going on. There was a time when even serious web designers used tables for layout because it was more convenient to get a consistent layout. But those were convinced a long time ago (5+ years at least now). Anyone who's still saying that tables are fine for layout purposes isn't really worth his/her salt.

    you can use DIVs, they just shouldn't be empty in the sense of <div> </div>, as soon as you put a list or other content in it, you're fine (you might find some absolute purists, particularly here on sitepoint, though) - and yes you can do pretty much everything in html/css, no need for tables. You can use some fancy javascript to enhance the look and feel of your site, as long as the site still functions when javascript is turned off.

    You might want to check out this Sitepoint book: http://www.sitepoint.com/books/html2/
    Dan G
    Marketing Strategist & Consultant

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Use the semantically correct tags that identify what your content is. In many cases both tables and divs are the WRONG choice.

    It isn't a choice between tables or divs for how you are setting out your page. It is a choice between meaningful semantic tags and a jumbled mess of junk tags. There are a growing number of pages with a meaningless jumble of div tags that are just as wrong as all the pages built using tables.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I agree with everyone above, there is no battle going on whatsoever... using tables for visual layouts is commonly accepted by everyone (who matters) as a bad idea, it's clearly unsemantic and even the W3C deprecates it's use. However the W3C does not say you cannot use DIV element's when they are semantically correct for use (like tables). If you have tabular information, use tables. If you need to split elements into groups (representing stuff like headers or footers), use dividers (DIV's). But only use them WHEN it's semantically right to do so... don't just throw them around meaninglessly.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2009
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, for all the replies. I know some people that still use tables. But I probably won't use them. I like using DIVs instead, but they are harder to get use to.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by MrGeeker View Post
    Thanks, for all the replies. I know some people that still use tables. But I probably won't use them. I like using DIVs instead, but they are harder to get use to.
    Just remember that using divs where they are not the semantically correct tag is just as wrong as using tables when it isn't tabular data.

    Stop thinking tables vs divs and start thinking garbage vs meaningful.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,863
    Mentioned
    5 Post(s)
    Tagged
    2 Thread(s)
    Other than using divs for layout, I've seen ul and dl-dt-dd layouts as is the case with phpbb3. ul tags are for unordered lists and dl tags are for definition lists. It seems to me that unless you are using ul and dl layouts for lists, it would be incorrect to use them for layout.

    Just as tables are proper for tabular data and improper for layout, I think ul and dl layouts are improper for layout. What does that leave us with then? Divs.

    I think there are huge gaps when it comes to layout in the HTML specifications. Floating Divs is a pain in the butt to make columns. But, you can't specify a width on inline elements. I would love to use display: inline-block on Divs, but browser support is spotty.

    http://www.quirksmode.org/css/display.html

    Other than tables which should not be used for layout, floated Divs are really the only option. Unless there is something I am missing?

  8. #8
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cheesedude View Post
    I would love to use display: inline-block on Divs, but browser support is spotty.
    Work-arounds for non-compliant (IE < 8, FF < 3) browsers are trivial.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by cheesedude View Post
    Just as tables are proper for tabular data and improper for layout, I think ul and dl layouts are improper for layout. What does that leave us with then?
    All tags are invalid for layout - the layout should be done using CSS.

    The tags to use iin the HTML are the ones that correctly define what they contain. So iif you have tabular data put it iin a table, if you have a list then use ul, ol, or dl (whichever is most appropriate), for paragraphs and headings the tags to use are also obvious, content divisions go in divs etc.

    Do not think about layout at all when writing the HTML. Think about what the particular piece of content is and use the most appropriate HTML tag that defines that content.

    All tags are invalid for layout - the layout should be done using CSS.
    All tags are invalid for layout - the layout should be done using CSS.
    All tags are invalid for layout - the layout should be done using CSS.
    All tags are invalid for layout - the layout should be done using CSS.
    All tags are invalid for layout - the layout should be done using CSS.
    All tags are invalid for layout - the layout should be done using CSS.
    All tags are invalid for layout - the layout should be done using CSS.
    ...

    Quote Originally Posted by cheesedude View Post
    I think there are huge gaps when it comes to layout in the HTML specifications.
    There are no gaps in HTML when it comes to layout because HTML has NOTHING to do with layout whatsoever and so should NOT have anything in it that is layout related at all. If there are any gaps at all it is that there is some HTML which was unfortunately put there for layout - but that should have all been removed in HTML 4.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Zealot
    Join Date
    Aug 2009
    Location
    Bavaria, Germany
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    All tags are invalid for layout - the layout should be done using CSS.
    I agree with that and I really try... but I don't think it can be done at the moment. HTML/XHTML is a very limited set of semantic markup and you do have to wrap up all of your content most appropriate.

    But... what about content, when there is no appropiate markup (e.g. shop items)? What about containers like a sidebar which (sometimes) cannot be styled only by CSS (I do not think <div id="sidebar"> is semantic at all, is it?)?

    btw: I do like the idea of WAI-ARIA to really add semantic to div containers with the role attribute.

  11. #11
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The div element is semantically neutral, but it is a structural element. Its purpose is to supply a container for other block elements, and providing a contextual styling hook. Your <div id="sidebar"> is an excellent example. Think of it as the sock drawer in your chest. You can move it about in the chest without disturbing the contents of the drawer or any other container. Likewise, you can resort the socks without disturbing the drawer's spot in the chest, or the shirts in another drawer.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  12. #12
    SitePoint Zealot
    Join Date
    Aug 2009
    Location
    Bavaria, Germany
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was exactly my position... when it comes to
    All tags are invalid for layout - the layout should be done using CSS.
    there is no need for any structural element but only for semantic markup.

    Sure a structural element like <div id="sidebar"> is somewhat semantical to me and a container for all elements that are not considered main content, but it surely not can be considered semantical at all.

    Thanks for supporting my theory that there is a need for layout containers at the moment
    Never argue with an idiot
    they drag you down to their level
    and then beat you with experience

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by LarsK View Post
    Thanks for supporting my theory that there is a need for layout containers at the moment
    Those are not layout containers they are semantic divisions of the page content and so are relevant to the HTML even where you get rid of everything to do with the layout completely. Of course that "sidebar" identifier is the wrong thiing to use as the id of a div should describe what the content is and not have anything to do with how it should look - after all a web reader is not going to know what a sidebar is - if your sidebar contains navigation then a semantically correct HTML tag for it would be <div id=:navigation"> because it isn't a sidebar as far as the HTML is concerned, it is the navigation.

    Yes there are instances where you would need to add elements into the HTML to be able to style it the way you want sue to browsers not yet fully supporting CSS3 (which for that matter isn't even a finished standard yet) but such HTML tags and classes should be added as a part of coding the CSS after the HTML has been semantically created to fit the content and all such additions should be kept to a minimum - where there is a way to do the layout without changing the HTML you should not change the HTML.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    SitePoint Zealot
    Join Date
    Aug 2009
    Location
    Bavaria, Germany
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Those are not layout containers they are semantic divisions of the page content and so are relevant to the HTML even [...].
    I do it that way but I do not not think they are really semantic... is there a standard yet to give semantic to divisons of a page? HTML5 seems to solve this (partially), but I am not happy with that at the moment.

    Quote Originally Posted by felgall View Post
    [...] and all such additions should be kept to a minimum - where there is a way to do the layout without changing the HTML you should not change the HTML.
    Again - I am trying... but still there is a need for adding additional markup and classes (which are not semantic at all). To my defense: I am a server side developer who has to do frontend development as well as I work in a small company (and I do like that) but I do as much as I can to do it well

    @felgall: really appreciate your thoughts!
    Never argue with an idiot
    they drag you down to their level
    and then beat you with experience

  15. #15
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by LarsK View Post
    I do it that way but I do not not think they are really semantic... is there a standard yet to give semantic to divisons of a page? HTML5 seems to solve this (partially), but I am not happy with that at the moment.
    Provided that the ids you use on the div tag describe semantically what the diviision contains then you are using the div tag semantically. All HTML5 is doing is taking part of the semantic use of the div tag with specific id values and making extra tags out of those meanings. It makes the code slightly shorter and perhaps more readable but doesn't add any other benefit that I can see.

    All the new tags in HTML 5 are basically taking something that can be properly done in HTML 4 using either a <div> or <object> tag and making a new tag to represent that specific use of that tag. None of the new tags are actually adding anything that can't be correctly specified already in HTML 4 .
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  16. #16
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    The div element is semantically neutral, but it is a structural element. Its purpose is to supply a container for other block elements, and providing a contextual styling hook. Your <div id="sidebar"> is an excellent example. Think of it as the sock drawer in your chest. You can move it about in the chest without disturbing the contents of the drawer or any other container. Likewise, you can resort the socks without disturbing the drawer's spot in the chest, or the shirts in another drawer.

    cheers,

    gary

    To build upon that thought:
    Divisions should be looked at as compound elements, grouping content that shares a relationship.

    A perk of divisions leads to extra style hooks.

  17. #17
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by LarsK View Post
    I do it that way but I do not not think they are really semantic... is there a standard yet to give semantic to divisons of a page?
    Actually adding meaningful ID's to a divider element IS a case of good semantics, Microformats have established that using class and ID attributes to label elements with meaningful information which follows a convention or pattern increases the semantic value of the element itself. While the div element has little in the way of semantics, using a div with the ID value of "header", "footer", "navigation" or "content" gives that element a very explicit and semantic purpose.

  18. #18
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    While the div element has little in the way of semantics, using a div with the ID value of "header", "footer", "navigation" or "content" gives that element a very explicit and semantic purpose.
    But not "sidebar" as that is specifying how it should look rather than what it is and would be nonsense as soon as you decide to reorganise the appearance of the page and display it in some way that isn't a sidebar. A div with id="sidebar" should be renames to describe what it contains rather than how it looks.

    Selecting descriptive semantic ids for your divs makes the divs themselves semantic.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  19. #19
    SitePoint Addict
    Join Date
    Nov 2009
    Location
    Carlsbad, California
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As According to Search engine point of view, Divs are not useful while designing web pages, so it better to use tables which has been the old methods of designing websites.

  20. #20
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dorothykinder View Post
    As According to Search engine point of view, Divs are not useful while designing web pages, so it better to use tables which has been the old methods of designing websites.
    And you should not be allowed anywhere near a website because you are clearly severely misinformed and using outdated information

    For your pleasure: http://www.hotdesign.com/seybold/everything.html

  21. #21
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dorothykinder View Post
    As According to Search engine point of view, Divs are not useful while designing web pages, so it better to use tables which has been the old methods of designing websites.
    Begone foul fiend!
    Return to the ancient darkness from whence thou came!
    Birnam wood is come to Dunsinane

  22. #22
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    But not "sidebar" as that is specifying how it should look rather than what it is and would be nonsense as soon as you decide to reorganise the appearance of the page and display it in some way that isn't a sidebar. A div with id="sidebar" should be renames to describe what it contains rather than how it looks.
    That's not quite true. One definition of a sidebar is:
    Quote Originally Posted by Wikipedia
    In publishing, sidebar is a term for information placed adjacent to an article in a printed or Web publication, graphically separate but with contextual connection.

    The term has long been used in newspaper and magazine layout. It is now common in Web design, where sidebars originated as advertising space and have evolved to contain information such as quick links to other parts of the site, or links to related materials on other sites. Online sidebars often include small bits of information such as quotes, polls, lists, pictures, site tools, etc.
    I would say that calling an aggregation of such content a sidebar is very much calling it what it is.

    If one were to Google define:sidebar, one would find several similar usages of the word.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  23. #23
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Location
    China
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    table can easy for different browsers and divs will be more difficult in different version of browerse, that's my crafts site experience.

  24. #24
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Agreed with Gary... I also do not agree with Andy Clarke in the idea that "header" "sidebar" and "footer" are styling declarations, but that they are indeed descriptions of the content (unless of course you are using the names improperly and a lot of us do from time to time : )

  25. #25
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by craftscn View Post
    table can easy for different browsers and divs will be more difficult in different version of browerse, that's my crafts site experience.
    Tommy, thy mutated developers from the lower dwellings of the underworld of non-standards hath risen upon thee. Thou must get thy smite on and prevent lesser demons from entering our dimension for we the gatekeepers of the W3C see corruption hastening upon thy interwebs!


Bookmarks

Posting Permissions

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