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.

tables vs div

Discussion in 'HTML & Website Design' started by webgeekent, Nov 12, 2007.

  1. #1
    My level of coding ability is very basic, a bit of html and php. My developer has advise that I should start to change to code in my sites form tables to div's.

    The argument being improved load times, borwser compatability etc.

    any thoughts on how big an issue this is is is not?
    SEMrush
     
    webgeekent, Nov 12, 2007 IP
    SEMrush
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
  3. webgeekent

    webgeekent Peon

    Messages:
    60
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    fair comment, thanks.
     
    webgeekent, Nov 12, 2007 IP
  4. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #4
    If it's easier to use tables, then why not?

    I do occasionally, but only if it's easier to use them than use divs.
     
    twistedspikes, Nov 12, 2007 IP
  5. webgeekent

    webgeekent Peon

    Messages:
    60
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    it is easier for me but only because thats what I know, the whole div thing is new to me a little confusing. I guess the reall issue revolves around deciding if its worth the time in learning to use div's instead.
     
    webgeekent, Nov 12, 2007 IP
  6. KaniGT5

    KaniGT5 Active Member

    Messages:
    122
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #6
    webgeekent :
    xxwww.webstandards.org/learn/faq/#p3
     
    KaniGT5, Nov 12, 2007 IP
  7. webgeekent

    webgeekent Peon

    Messages:
    60
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    thanks, does this mean that <tables> are not complient with this standard?
     
    webgeekent, Nov 12, 2007 IP
  8. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #8
    They are complient. It'll come up with a warning on accesability I think if you use them.

    If it's tabular data then they are an obvious choice.

    If it's layout then I would only use them if it's less code/hassle than using divs/css, I say only when they are less hassle as it might be easier to create a table layout instead of making a bunch of divs float all over the place. Just theres not really many examples of when.
     
    twistedspikes, Nov 12, 2007 IP
  9. Crazedplanet

    Crazedplanet Guest

    Messages:
    49
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I still mainly use tables but the future is div, conversion wont happen over night unless you have massive amounts of traffic I wouldn't worry about it to much
     
    Crazedplanet, Nov 12, 2007 IP
  10. LeopardAt1

    LeopardAt1 Well-Known Member

    Messages:
    880
    Likes Received:
    126
    Best Answers:
    0
    Trophy Points:
    135
    #10

    When its a argument, theres usually two sides.

    1. improved load times

    hmm, by how much? Is it even noticeable. Lets look at YouTube's front page (lots of vid's / graphics/ text / js ) that uses tables. You think if they got rid of the tables and made it just all div's instead, would the loading time really be noticeable?


    2. browser compatibility

    Lots of sites out there (popular ones) use tables and their design's have browser compatibility. Whether you use table or divs, it doesn't matter.
     
    LeopardAt1, Nov 12, 2007 IP
  11. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #11
    3) Accesability.

    Lots of screen readers have problems with a table layout, they read it all as statistics.

    4) For the sheer fact that tables are ment for tabular data, not for layout purposes.

    Sorry, had to say what you were missing.
     
    twistedspikes, Nov 12, 2007 IP
  12. bquast

    bquast Active Member

    Messages:
    275
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    78
    #12
    i don't know compared to tables div's are ten times easier to understand and easier to change with css, just goes well together and I would rather use div's than tables, tables take up more code in your page compared to divs as well..
     
    bquast, Nov 12, 2007 IP
  13. mihirc

    mihirc Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Hello,

    well as mentioned earlier, it is very easy to manage div based layouts, once they are up. i am regular contributor at www.csscreator.com.

    Currently i am working for a company, but i will be breaking off soon, and start doing freelancing. so i need to make sites to build my portfolio. I will do it for you, free of charge, only a small thank you, on my soon coming website will do wonders.

    thanks,
    mihir.
     
    mihirc, Nov 12, 2007 IP
  14. clinton

    clinton Well-Known Member

    Messages:
    2,166
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    110
    #14
    divs suck because of cross browser issues, fixed positions and overlapping in certain browsers. Hell tables are awesome, I love them, I do all my sites in tables, I only use divs for special text. Tables are the best foundation for a website layout. I remeber working on a site for some people, their site used divs, shit I almost went crazy.
     
    clinton, Nov 13, 2007 IP
  15. SD2001-UK

    SD2001-UK Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Nothing wrong with div's if you have plenty of patients and are willing to check the code.....
     
    SD2001-UK, Nov 13, 2007 IP
  16. LeopardAt1

    LeopardAt1 Well-Known Member

    Messages:
    880
    Likes Received:
    126
    Best Answers:
    0
    Trophy Points:
    135
    #16

    Hi, I'm willing be open to your view if you were to elaborate a little. What exactly do you mean by screen readers (browsers etc?) What do you mean by they read it all as statistics? I'm not quite sure if I'm understanding that entirely.


    To your #4, a table layout does the job and for some coders are much easier to deal with. A site layout can also be viewed as tabular data (that is the data being images, text, a banner, a form etc.).

    To me, I prefer tables, but if you try asking the question "which on is better, tables or divs", then I'm going to answer tables because its my preference of choice. I just think there is really no "better" when it comes to choosing.
     
    LeopardAt1, Nov 13, 2007 IP
  17. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #17
    It's not the argument of DIVS versus TABLES, because any novice who is migrating from table layouts can make a "DIV LAYOUT" which is just as bloated as table layout (I've seen the disgusting markup where they literally replace table cells with divs.. <div class="td">).

    Those who do so are missing the WHOLE POINT of using CSS. You don't just follow the trend like a sheep and start using DIVS because everyone else is doing it.. you need to find out WHY they are.

    Oldschool developers used tables with WYSIWYG's because the moment they opened the WYSIWYG and inserted a table, they already had something.. some sort of frame to build their site on. At first it looked ugly because of the borders, but as soon as the borders were removed and you added a couple columns and images, you already a layout. Then they could change the width of their columns, or whole site via the width attribute.

    Because they had this method of making "instant" layouts in a matter of minutes with tables, they didn't change their style... why the hell should they if sites done in tables are "faster"?

    As they added more and more content to their sites, maintenance was becoming a bitch. It was only a matter of time before the layout/site screwed up, because the combination of WYSIWYG and user could never produce a perfect result.. often problems would arise because a start tag was never erased from the code, so the user inserted another element but because it was inside of that start tag it would still get affected.

    <font size=7>this is my header.</font>

    Say I didn't want a "size 7" header anymore, I would place my cursor at the end of the period after "header" and start deleting. In the code, the start tag will still be after <font size=7> and when I start typing I'll go "WTF" because I never got rid of the tag. I would then have to insert another one, and it became bloated.

    <font size=7 color=blue><font size=2 color=red>this is my new header.</font></font>

    Take this example and multiply it for every line of text you'll have in your site, and the end result is bloated, dirty, messy HTML with missing end/start tags, inconsistent font sizes caused by inheritance, etc.

    Then some developers started learning about the style attribute, using it every now and then for things such as borders, or maybe even font family/font sizes. As time passed on they learned about the style element itself, and used that to their advantage to style whole sections and/or elements. Why should one manually go through (god knows how many/#) number of pages to select areas and click to make them blue? Wouldn't it be much easier if we could control all of that in one place?

    If a developer was in a stylesheet and he wanted to change the color of all paragraphs to blue, he'd just add this line of code (or add it to the rules for the p selector).

    p { color:blue; }

    But if you have dirty ass messy code with font tags, how would you know which ones are headers, which ones are paragraphs, etc? And that's why developers got smart about it and started writing HTML with semantics in mind. A paragraph should be marked with <p> tags. Why? It's a paragraph. Same with first level headings, secondary. If you have a chart, then use a table.. because that's tabular data.

    If you have properly marked up your page then it's much easier to style your page, since you won't have to worry about font tags anymore. You won't have to worry about updating 300 pages, because all your content is marked up and you can control it from a SINGLE (or a few) stylesheet(s). This saves a HUGE, HUGE chunk of time, and in the time it would take for an oldschool coder to go through 300 pages and manually change all those paragraphs to be blue, you could build a site (or a couple sites).

    Using Cascading Style Sheets *WITH* semantic html makes site building a breeze. Of course it may not look like it when you're first starting out (compared to tables) but if you spend the same amount of time that you did doing tables with doing CSS layouts, then you will find out how much it helps, and how pretty your code can look when you use the minimum number of elements, rather than tag soup like back in the old days.

    Novice to Intermediate developers will have to go through hell at first, because the support for CSS varies by browser. Your worst enemy will definitely be IE. IE is used by the majority of the internet, but it's support (at least for MSIE6 - the major browser) is poor.

    There's no way of avoiding the cross browser inconsistencies whether you're a novice, intermediate or advanced. An average developer will use a more modern browser like Firefox 2, Safari 3, or Opera 9 to see how his page *should* look, since these browsers have the best support for CSS/HTML. An above average developer will first read the specifications and try to understand why they're having a problem. This depends on what elements they're using and what properties/values they set via CSS. Then they will see if the browser is rendering/styling the element according to the specifications. FF2/Safari 3/Opera 9 in standards mode will most almost always render your page the correct way. And if not, then you need to google up the property/value, element and browser to see if anyone else had the same problem with the same browser, and see if they found any solutions. You will have to do this VERY often with IE, because even to do this day above average developers will find bugs they've never seen before.

    If you need a little help, I suggest installing the Web Developer Toolbar and Firebug for Firefox. I couldn't live without Firebug's inspect button, which lets you target an element and see what styles have been applied, which styles are inherited, etc. Web Developer toolbar has a handful of useful things, but the most useful is probably the shortcuts to validate your local html and/or css, so you don't have to go to validator.w3.org every single time and waste time pasting code.

    I hope at least one person makes sense of what I just wrote as I didn't proofread it. I gotta get back to work.
     
    soulscratch, Nov 13, 2007 IP
    Halobitt and LeopardAt1 like this.
  18. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #18
    Screen readers as in programs that read out content to users who are can't see very well. The user can choose to got to a page and read out all the links, or all the tabular data (such as if it was a football statistics site). In the latter case if the site was made using tables, it would read everything, which causes accessablility issues.
     
    twistedspikes, Nov 13, 2007 IP
    LeopardAt1 likes this.
  19. LeopardAt1

    LeopardAt1 Well-Known Member

    Messages:
    880
    Likes Received:
    126
    Best Answers:
    0
    Trophy Points:
    135
    #19
    ahh Interesting. I learned something new. Thanks for sharing.

    I am now willing to admit that using divs will give an a advantage if your site may attract a demographic who may use screen readers.

    I still prefer tables/divs/css though :)
     
    LeopardAt1, Nov 13, 2007 IP
  20. webgeekent

    webgeekent Peon

    Messages:
    60
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    soulscratch, thanks, thats just the kind of bg I needed.
     
    webgeekent, Dec 1, 2007 IP