divs vs tables

Discussion in 'CSS' started by cleverlyslick, Jan 19, 2009.

  1. #1
    so i'm reading a good book titled css web site design by lynda.com and i realize that they haven't mentioned tables at all.i'm half way through the book and no tables mentioned, only div tags.my question is...

    is it wrong to use tables?

    i've designed 2 websites on my own so far and they primarily consist of tables.i'm starting to believe that the tables is what's giving me problem with adsense spacing (i'm trying to place adsense ads to the right of the table layout but it just simply won't let me).

    should i completely remove tables from my layouts and just use divs instead?

    Are divs considered css or just plain html?
     
    cleverlyslick, Jan 19, 2009 IP
  2. Colbyt

    Colbyt Notable Member

    Messages:
    3,224
    Likes Received:
    185
    Best Answers:
    0
    Trophy Points:
    210
    #2
    Tables are still permited for the arrangement of tablular data (think rows and columns). That is about there only use.

    Your sites will load faster and flow better once you get rid of them. They probably are causing your adsense problem.
     
    Colbyt, Jan 19, 2009 IP
  3. cleverlyslick

    cleverlyslick Peon

    Messages:
    80
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks for the input i was starting to think that as well because no matter what adsense adjustment i do (next to the tables) i get no placement.but INSIDE the table i can place the ad wherever i please.

    any other opinions?

    thanks
     
    cleverlyslick, Jan 19, 2009 IP
  4. revoD

    revoD Peon

    Messages:
    120
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It's not wrong to use tables, just use them only when you need to - like Colbyt said, for tabular data.

    I would definitely recommend you to start learning more CSS. You'll find that going back and editing tableless pages becomes much easier. It keeps your code clean too.

    Divs are HTML, but they coincide with CSS. Think of divs as containers which can be styled with ID's and Classes.
     
    revoD, Jan 19, 2009 IP
  5. cleverlyslick

    cleverlyslick Peon

    Messages:
    80
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    thanks revo studying as we speak.
     
    cleverlyslick, Jan 19, 2009 IP
  6. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #6
    It is a trend to go web2.0 .
    It is a trend DIV layout (tableless layout) will totally replace table layout .
    DIV layout are fleaxible and reusable . Try it .
    Once you learn div layout, you never turn back to table layout any more.
     
    justinlorder, Jan 20, 2009 IP
  7. wobmop

    wobmop Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    CSS is much easier to update and edit rather than having to use the outdated method of tables. It is also more customisable giving you a wider range of styles to implement.
    And once you get your head around it, it's really simple :)
     
    wobmop, Jan 20, 2009 IP
  8. Tjobbe

    Tjobbe Peon

    Messages:
    45
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Using DIV's for layout and structure is not a trend, it's a W3C recommendation ;o)

    Tables have, as someone else already mentioned, only been designed and intended for use in presenting tabular data.

    You have so much more control with DIV's for layout, it uses less code and there fore loads the pages faster, and it makes for meaningful markup too, compare these two headers;

    <table>
    <tr>
         <td>
              <h1>YourCompany.com</h1>
         </td>
    </tr>
    </table>
    Code (markup):
    <div id="header">
         <h1>YourCompany.com</h1>
    </div
    Code (markup):
    Which do you think looks better and more meaningful?
     
    Tjobbe, Jan 26, 2009 IP
  9. cleverlyslick

    cleverlyslick Peon

    Messages:
    80
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    definitely the 2nd looks more presentable.what if i have multiple paragraphs right and i place divs on all the paragraphs i lable it "div id=p1","div id=p2" and so on and i want to float all the paragraphs to the right.how do i go about doing this? i'm having this issue right now and everytime i try to float the image to the right i lose the whole document.
     
    cleverlyslick, Jan 26, 2009 IP
  10. gobbly2100

    gobbly2100 Banned

    Messages:
    906
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Divs are the way really.
     
    gobbly2100, Jan 26, 2009 IP
  11. scubita

    scubita Peon

    Messages:
    5,550
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #11
    One of best things i've learned so far: CSS. Thank god :)
     
    scubita, Jan 26, 2009 IP
  12. Tjobbe

    Tjobbe Peon

    Messages:
    45
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #12
    You can use CSS to define how you want to align your text, the default alignment for text within a div is left aligned (CSS: align:left;) but you can also justify the text, have it center or right aligned, you do not need to give each paragraph an ID.

    Here is an example;

    In your CSS file (style.css)
    
    body	{font:90% Arial, Helvetica, sans-serif; }
    #box {width:500px; border:1px solid #000; margin:20px; padding:20px; text-align:right; }
    
    Code (markup):
    In your (x)HTML file;
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    
    <body>
    <div id="box">
    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui  blanditiis praesentium voluptatum deleniti atque corrupti quos dolores  et quas molestias excepturi sint occaecati cupiditate non provident,  similique sunt in culpa qui officia deserunt mollitia animi, id est  laborum et dolorum fuga.</p>
    <p>Et harum quidem rerum facilis est et expedita  distinctio.</p>
    <p>Nam libero tempore, cum soluta nobis est eligendi optio  cumque nihil impedit quo minus id quod maxime placeat facere possimus,  omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem  quibusdam et aut officiis debitis aut rerum necessitatibus saepe  eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
    <p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis  voluptatibus maiores alias consequatur aut perferendis doloribus  asperiores repellat.</p>
    </div>
    </body>
    </html>
    
    Code (markup):
     
    Tjobbe, Jan 27, 2009 IP