15 {{ upvoteCount | shortNum }}
15 {{ upvoteCount | shortNum }}

Table vs Div

by Incoan
12 replies
  • WEB DESIGN
    • |
I read on various webdesign websites that table is a very crude way to center html elements...

However, if I use div I'm afraid that different browsers will not interpret the css rules the same way.

What do you (or your web designer) use? : )
#div #table
  • Profile picture of the author jumpa
    i have try <div align="center> or with margin: 0px auto;
    it works on opera and firefox, but in ie i must use <center></center> to make it centered-align
    {{ DiscussionBoard.errors[5463386].message }}
    • Profile picture of the author Karen Blundell
      Originally Posted by jumpa View Post

      i have try <div align="center> or with margin: 0px auto;
      it works on opera and firefox, but in ie i must use <center></center> to make it centered-align
      if you give the div a width, it will work in IE

      so something like

      <div style="width: 400px; margin: 0 auto;">
      would work in all browsers
      Signature
      ---------------
      {{ DiscussionBoard.errors[5463535].message }}
      • Profile picture of the author jumpa
        Originally Posted by Karen Blundell View Post

        if you give the div a width, it will work in IE

        so something like

        <div style="width: 400px; margin: 0 auto;">
        would work in all browsers

        Hi, Karen. I ve just try
        <html>
        <head>
        </head>
        <body>
        <div style="width:400px;height:400px;margin:10px auto;border:1px solid black;">
        </div>
        </body>
        </html>

        in IE 7, but in cannot centered but left aligned, or maybe i should upgrade to ie 8?
        thanks
        {{ DiscussionBoard.errors[5463676].message }}
        • Profile picture of the author Karen Blundell
          Originally Posted by jumpa View Post

          Hi, Karen. I ve just try
          <html>
          <head>
          </head>
          <body>
          <div style="width:400px;height:400px;margin:10px auto;border:1px solid black;">
          </div>
          </body>
          </html>

          in IE 7, but in cannot centered but left aligned, or maybe i should upgrade to ie 8?
          thanks
          yes, IE8 is better. And Tkato example works too. But I think rather than using inline styles, you should put your style on one .css file
          and then put something like this <link href="style.css" rel="stylesheet" type="text/css" /> in between your html's <head></head> tags
          Signature
          ---------------
          {{ DiscussionBoard.errors[5465206].message }}
        • Profile picture of the author markthedoc
          Originally Posted by jumpa View Post

          Hi, Karen. I ve just try
          <html>
          <head>
          </head>
          <body>
          <div style="width:400px;height:400px;margin:10px auto;border:1px solid black;">
          </div>
          </body>
          </html>

          in IE 7, but in cannot centered but left aligned, or maybe i should upgrade to ie 8?
          thanks
          That will fix it for you but you have to keep in mind there will be other users viewing your website with IE7.
          {{ DiscussionBoard.errors[5467973].message }}
  • Profile picture of the author thewebprograms
    Div makes your Page alignment, Table makes perfect position
    {{ DiscussionBoard.errors[5463598].message }}
  • Profile picture of the author Tkato
    in the div add the style
    margin:0 auto;

    and for some browsers like IE 6 you have to use this rule for body html tag <body style="text-align:center;">
    Signature
    Fonts Tipos de letras Web Tutoriales
    {{ DiscussionBoard.errors[5464152].message }}
    • Profile picture of the author Karen Blundell
      Originally Posted by Tkato View Post

      in the div add the style
      margin:0 auto;

      and for some browsers like IE 6 you have to use this rule for body html tag <body style="text-align:center;">

      yes that works...God I how I hate developing for IE
      Signature
      ---------------
      {{ DiscussionBoard.errors[5465191].message }}
  • Profile picture of the author Kingfish85
    Originally Posted by Incoan View Post

    I read on various webdesign websites that table is a very crude way to center html elements...

    However, if I use div I'm afraid that different browsers will not interpret the css rules the same way.

    What do you (or your web designer) use? : )
    Tables are for tabular data, not to structure a website. There are WAY too many websites out there with tables, and some still being designed using tables. CSS is what needs to be used.
    Signature

    |~| VeeroTech Hosting - sales @ veerotech.net
    |~| High Performance CloudLinux & LiteSpeed Powered Web Hosting
    |~| cPanel & WHM - Softaculous - Website Builder - R1Soft - SpamExperts
    |~| Visit us @veerotech Facebook - Twitter - LinkedIn

    {{ DiscussionBoard.errors[5465753].message }}
  • Profile picture of the author n0fx
    Div is perfect. forever.
    {{ DiscussionBoard.errors[5468071].message }}
  • Profile picture of the author mapetshi
    tableless design is faster, more compatible and good for seo.
    {{ DiscussionBoard.errors[5469167].message }}
  • Profile picture of the author IM Alex
    One simple method to center a div structure is to create a div element to "wrap around" all the other elements, and center it with CSS. I normally call this div box for wrapper, and assign CSS rules to it to give it its dimensions and position.

    Example:

    HTML:
    <div id="wrapper">

    <div class="content">
    </div>

    </div>

    ---
    CSS:
    #wrapper {
    text-align: left;
    height: 900px;
    width: 900px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    }

    container {
    height: 900px;
    width: 900px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    }

    Hope that made sense
    Signature

    If you're in doubt, you're not in doubt.

    {{ DiscussionBoard.errors[5470424].message }}

Trending Topics