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.

Use DIVs or TABLES for creating tables?

Discussion in 'HTML & Website Design' started by Mr.Dog, Feb 27, 2013.

  1. #1
    Hi,

    I am going to create some complex tables with plenty of asymmetric cells and I'm not sure whether to do it with DIV classes or use TABLES?

    In the past I used tables, but I can do the same work with less code if I use DIVs.

    From experience I felt that DIVs load faster than tables.
    Plus: I would have the 50-60 % the same classes repeating over and over again.

    Which way would you recommend?

    Would it be "bad"/wrong to go with DIVs? I'd personally build a table DIV.

    It is for creating a facts/contents table (similar to what you see on medication bottles), like this one here:
    http://www.opurity.com/store/skin/frontend/default/opurity/images/img-table.gif
    Mr.Dog, Feb 27, 2013 IP
  2. anamul

    anamul Active Member

    Messages:
    168
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #2
    DIV doesn't have any drawbacks as far as I know. It is a good practice to use DIV.I would use DIV for a style like the one in your link.
    anamul, Feb 27, 2013 IP
    Mr.Dog likes this.
  3. sarahk

    sarahk iTamer Staff

    Messages:
    17,427
    Likes Received:
    1,746
    Best Answers:
    37
    Trophy Points:
    510
    #3
    I'd probably go for a classic table if the info being presented is the kind of thing you'd draw up in Excel.

    I use divs when I want to create a form with regular rows and columns but it's not table data, as such.

    The big risk is getting out of step with your divs and classes (just as it is with tables). I'd write it, test it on a few different browsers and go with the one you feel more comfortable with.

    And do use the CSS to style those divs!
    sarahk, Feb 27, 2013 IP
    anamul likes this.
  4. Rankx

    Rankx Active Member

    Messages:
    119
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    50
    #4
    I normally used tables for tables, if it has to be displayed like a traditional table. If you prefer using Divs, go right ahead. It is better to use Divs anyway. I remember when I just started creating websites many yrs ago, everything was in a table. Talking about 10 or so nested tables or even more. Thank god for Divs.
    Rankx, Feb 28, 2013 IP
  5. Mr.Dog

    Mr.Dog Member

    Messages:
    680
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    35
    #5
    Yes, I used tables back in the past as well, but they slowed sites down dreadfully.
    Even today, I've seen "professionals" putting everything inside a table...
    Mr.Dog, Feb 28, 2013 IP
    anamul likes this.
  6. prawyyy

    prawyyy Member

    Messages:
    245
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    33
    #6
    I would suggest to use a div. It will be easier for you to manage this in the future, if you request the make any changes. Tables go out of use and in my opinion is becoming less relevant.
    prawyyy, Feb 28, 2013 IP
  7. rozehrocks

    rozehrocks Active Member

    Messages:
    311
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    88
    #7
    If you're using tables to stylize a layout, no.
    If the content is data like someone said above then yes.

    But I'd use div because I hate tables. Tables has a lot of codes needed and divs are just simple and clean.
    rozehrocks, Mar 1, 2013 IP
  8. angele803

    angele803 Member

    Messages:
    78
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    48
    #8
    This is an instance where using an actual HTML table would be the correct method. However, if you feel that you can create it more efficiently and faster with divs, then that is a choice you are definitely free to make. The only problem you might run into is if another person will work on the code in the future. Since tabular data belongs in a table, working with it in divs could be cumbersome for many coders. Other than that, I think you should be fine.
    angele803, Mar 1, 2013 IP
  9. Riboflavin

    Riboflavin Well-Known Member

    Messages:
    1,091
    Likes Received:
    30
    Best Answers:
    0
    Trophy Points:
    105
    #9
    Tabular data should be displayed in.... you guessed it... a table. That is what they are there for, it isn't wrong to use them. It is wrong to use they as a layout tool.
    Last edited by a moderator: Mar 2, 2013
    Riboflavin, Mar 1, 2013 IP
  10. creativewebmaster

    creativewebmaster Active Member

    Messages:
    641
    Likes Received:
    6
    Best Answers:
    4
    Trophy Points:
    53
    #10
    Div is bested instead of the Table. You can save loading and CSS loading as well. Also, do no needs to many classes etc.
    creativewebmaster, Mar 2, 2013 IP
  11. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    827
    Best Answers:
    144
    Trophy Points:
    395
    #11
    THAT IS TABULAR DATA.... you have headings, you have columns of the same type of data, you have related rows. TABULAR DATA. The Semantically correct markup is therein a TABLE. Preferably with SCOPE, so you can maintain your semantic relationships between the TH and their columns... and the TH and their rows since those would be in there too. This is NOT a situation for using/abusing/DIV since DIV provide no semantic meaning or relationships. That's why using Tables around non-tabular data is wrong (applying the wrong meaning) and why using DIV or span around elements that should have meanings (headings, tabular data, flow text) is wrong.

    No matter what the "DIV can haz ares better" retards might mimic from the "tables are evil" nutjobs. Abusing DIV, or nested lists, or any other such idiocy on obviously tabular data is JUST AS BAD and even MORE IDIOTIC than using tables for layout.

    Code (Text):
    1.  
    2. <table class="healthInfo">
    3.     <caption>
    4.         Supplement Facts<br />
    5.         <small>Serving Size: 1 Tablet</small>
    6.     </caption>
    7.     <thead>
    8.         <tr>
    9.             <td></td>
    10.             <th scope="col">Amount Per Serving</th>
    11.             <th scope="col">% Daily Value</th>
    12.         </tr>
    13.     </thead><tbody>
    14.         <tr>
    15.             <th scope="row">Vitamin A<br />(50% as beta carotene)</th>
    16.             <td>3500 IU</td>
    17.             <td>70%</td>
    18.         </tr><tr>
    19.             <th scope="row">Vitamin C</th>
    20.             <td>50 mg</td>
    21.             <td>100%</td>
    22.         </tr><tr>
    23.             <th scope="row">Vitamin D</th>
    24.             <td>400 IU</td>
    25.             <td>100%</td>
    26.         </tr><tr>
    27.             <th scope="row">Vitamin E</th>
    28.             <td>30 IU</td>
    29.             <td>100%</td>
    30.         </tr>
    31.     </tbody>
    32. </table>
    33. <ul class="healthInfoDisclaimers">
    34.     <li>+Daily Value not established</li>
    35. </ul>
    or some such is SEMANTICALLY correct and using table for what the tag exists FOR! This is NOT tables for layout, it's tables for meaning. The only time to use DIV instead of tables is when the data is not TABULAR and does not have row/column relationships.

    But of course with most of the ninnies out there using tables AND the ones ranting and raving against tables being blissfully unaware of tags like TH, THEAD, TBODY, CAPTION, or more importantly attributes like SCOPE and AXIS -- It's hardly surprising you get jokers from both sides of the fence running their mouths about **** they don't understand. See 90% of the respondents in this thread so far; which to be frank, people are DUMBER for having been exposed to.

    Of course you'll notice by using TH, TBODY, THEAD above as I did, there is NO need for any extra classes in there either. Any hooks to style it how you want are already there, just inherit off the TABLE's class.
    Last edited: Mar 2, 2013
    deathshadow, Mar 2, 2013 IP
    sarahk, Riboflavin and muffet like this.
  12. digdogger

    digdogger Active Member

    Messages:
    90
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    56
    #12
    I'm not that good at DIVs so I'd immediately use tables (and have done exactly the same nutritional table.
    digdogger, Mar 2, 2013 IP
  13. redpro

    redpro Banned

    Messages:
    226
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    46
    #13
    You should go with div, it's the best ever solution to design any web page.
    redpro, Mar 2, 2013 IP
  14. Original Hosting

    Original Hosting Active Member

    Messages:
    181
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    50
    #14
    I would use tables for data and DIVs for styling.
    Original Hosting, Mar 2, 2013 IP
  15. sarahk

    sarahk iTamer Staff

    Messages:
    17,427
    Likes Received:
    1,746
    Best Answers:
    37
    Trophy Points:
    510
    #15
    This has come up a few times in this thread and really confuses me. If you are using your css properly there is no extra code. Even when I use divs I still have a div at tr level.
    sarahk, Mar 2, 2013 IP
  16. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    827
    Best Answers:
    144
    Trophy Points:
    395
    #16
    I chalk these types of statements up to ignorance or just people being outside their comfort zone -- the people who have only ever used DIV are just as flawed in their thinking as the people who only use tables; as Dan said sometime before his passing: The people who used to endlessly and pointlessly wrap table around table for nothing, today just wrap endless nested DIV around each-other for no good reason.

    But in most cases it really just comes down to HTML being too 'hard' for people to bother using properly -- in which case they probably need to back away from the keyboard and take up something a bit less detail oriented, and leave the actual development of websites to people who are willing to take the time to learn all the HTML tags, what they are FOR, and how to use them PROPERLY -- instead of the idiotic "let's use 20 tables where even as tables for layout we only need one" or the equally idiotic "Let's use 30 DIV where even as DIV for layout we only need one".

    See ALL the dumbasses out there who make tables that only have one TD per TR, and all the dumbasses who wrap DIV around perfectly good block level containers like their main menu UL and page H1 and/or headings for no good reason either. The people who use dozens of DIV with hundreds of classes per page -- like the idiots at turdpress with their default skins and stuff you cannot control from the skinning system, who wouldn't know semantics or minimalist code from the hole in their backside.

    Or just the absolute dipshits making skins for things like vBulletin with their nested list abuse and 20:1 code to content ratio on obviously tabular data, that could be conveyed in a tenth the code if they bothered rubbing a few brain cells together and used TH, THEAD, TBODY, SCOPE, AXIS and CAPTION for what they are FOR.

    Sorry if I'm being insulting to certain groups, but it IS warranted - one look at their work is proof enough of that! How the blue blazes most of these dimwitted fools even have jobs is beyond me -- though again, never underestimate the stupidity of the suits writing paychecks for vague promises; since that's the folks who think they can get sound technical advice from the pages of Forbes, which is akin to taking financial advice from the pages of Popular Electronics.

    Which is also how we have people out there DUMB ENOUGH to actually see merit or a legitimate reason to be embracing the steaming train wreck of garbage known as HTML 5.

    But of course, the re-re's saying "use DIV" and "tables are evil" will continue to flap their gums about things they don't understand, as I'm sure at least two-thirds of the responses who don't even bother to read the thread before responding after this post will prove. Same type of ignorant illiterate twits who will see this post and go "TLDR". Oh but for the days when you had to be "at least this smart" to ride the Internet.
    Last edited: Mar 3, 2013
    deathshadow, Mar 3, 2013 IP
    sarahk likes this.
  17. karthimx

    karthimx Notable Member

    Messages:
    4,911
    Likes Received:
    122
    Best Answers:
    2
    Trophy Points:
    260
    #17
    div tag is always good to use than tables. Tables can only be used for some comparison box or stuffs like that.

    Div tag always support multiple browser and will be flexible with faster loading time.
    karthimx, Mar 3, 2013 IP
  18. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    827
    Best Answers:
    144
    Trophy Points:
    395
    #18
    ... and thank you karthimx for proving my point.
    deathshadow, Mar 3, 2013 IP
  19. kk5st

    kk5st Well-Known Member

    Messages:
    2,906
    Likes Received:
    191
    Best Answers:
    9
    Trophy Points:
    190
    #19
    @deathshadow:
    :D

    g
    kk5st, Mar 3, 2013 IP
  20. karthick9

    karthick9 Member

    Messages:
    576
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    33
    #20

    For your needs i think its better to go ahead with div tag. Its flexible for you to design table as you need
    karthick9, Mar 3, 2013 IP