DIV vs TABLE

[crashmaster]

Hi there...I am webprogrammer and webdesigner...but still amateur...
One day I've learned how to create sites with <TABLE> tag..And Until now I am using it..
Yesterday I posted to topic WEB CRITIQUE, and peoples told me that using DIV is better than table, but I dont see bad side of using TABLE... CAn somebody answer me, why using DIV is better than using TABLE ??

[cmgmyr]

With divs you can easily style them with css, they are also a lot lighter (less scripting) which makes your page load faster. With tables there is a lot more code then is needed, also with images and tables, there has been a lot of spacing and padding problems.

See what you can do with css and divs and trying to make a tableless layout.

-Chris

[just-j]

the problem i have with div tags and css is you get a noticeably different out comes on different size screen resolutions. if a monitor runs at 640x480 and you made your page on a 1200x800 monitor then you could run into major problems as far as how it looks.  so i dont think the minor speed difference you get in page loading using divs over tables is worth the switch.  stick with tables and only use divs for positioning when absolutly nessissary.

[weales]

If the site you're making is a large and general website (MSN or GOOGLE) then course you'd set your own screen rez down to the specs you're working for.

As for tables vs divs, divs get my vote. They are indeed lighter in size and on a large site this could mean the difference of major $$ in bandwidth charges.  Overall, I tend to use divs for fixed width sites and some more simple fluid layout sites.

When working on large fluid dynamic sites, I stick with tables simply because my skills with fluid layouts in CSS suck ass and I don't usally have the time to learn them before hand til I'm free of any projects. 

[killerb]

If you work in the code, tables are a nightmare. Divs are much clearer, and easier to manage.

It does take time to learn CSS if you havn't been taught the right way.

If you hate reading (like most of us), [url=http://www.barelyfitz.com/screencast/html-training/css/positioning/]this[/url] does well to explain a month of trial and error in just 10 minutes!

Also, [url=http://www.csscreator.com/version2/pagelayout.php]this[/url] will help with 80% of layouts, but no machine can beat the power of being in control of the code with knowledge.

[foreverhex]

I have been debating on moving to div but I dont know... how I guess. I understand the concept of div and Ive used it many of times for styles and links, but the coverting from tables to div doesn't yet make since to me. Can any one explain?

[Chat]

I've made many tableless designs, but padding issues aside, they render far more reliably when the window is resized and therefore, for my main sites, i use tables, like google. they don't over lap upon resizing the text or browser window, unlike EVERY inline tableless design i've seen to this day, including w3.org.  ::)

[obsidian]

i just wanted to jump in here and put in my 2 cents on what's been said. we've got to be careful comparing CSS elements in divs versus tables, because with someone that is trained and savvy with CSS, you can actually get both to look almost identical. while it is much [i]easier[/i] to style a div to look how you'd like than a table, it really comes back to practicality. what are tables for? they were not introduced as a layout structure, but rather as a way to present [i]tabular data[/i] on a page... imagine that! so, i am not prone to desiring to see complete tableless designs. however, i do like to see tables used for appropriate data.

as for the falsity mentioned above about screen resolutions, once again, it's a lack of training that this sort of comment springs from. if you are concerned about different screen resolutions rendering differently, you simply have to use a fixed-width design. if you have a fluid design, both tables and divs are going to display slightly differently as you resize your browser and the content has to shift to fit.

one other point to make is that tabled layouts very seldom can be easily made XHTML compliant. you start running into the problem of block level elements embedded withing inline elements, and the snowball starts rolling. i can guarantee you that someone experienced in CSS could take a complex tabled layout and in [b]almost[/b] every case present the exact same layout with divs and CSS but with markedly less markup. modification of the page is key, too. div layouts are MUCH cleaner on the markup side of things than tables can ever be.

hope this is of some help.

[foreverhex]

Yeah, that explains a lot. But I still don't know how. Do I use <div span="bleh"> or something like that. Or is it all done with classes. Also how do you do things such as colspans and rowspans. Is that also the span element?

[obsidian]

you've got to understand that divs are not replacements for tables. there is no such thing as colspan and rowspan in divs. a div is simply by default a 100% width block level element. you then can assign styles to the div to get it to behave as you need it to. simply view a div as a container that you then can shape and mold to your specifications. you've got to have a good grasp on CSS to really get a handle on this method of design, though.

[foreverhex]

I understand css, but I only use it for tables and text/links. So I never really mess with the <div> much. I mainly use class and what not.

[pixy]

I use tables with CSS.

<table class="whatever">

Like that.

[foreverhex]

same here

[Ifa]

You can transform divs into tables using the display, though I see little point in that...  :)

[foreverhex]

Thats good to know. I try and mess around with that. Probably will come out wrong Im sure.

[killerb]

Did you actually read the article I put you onto? If not, I re-recommed it. It will only take 10 mins and it explains absolute, relative and floating divs. You must get that down otherwise you will be frustrated to the point of defeat.

Here it is again: [url=http://www.barelyfitz.com/screencast/html-training/css/positioning/]http://www.barelyfitz.com/screencast/html-training/css/positioning/[/url]

As for how to approach a design, first have your site sketched and identify the divs you will use. This is much the same as you would do for a table-based design. You can nest divs and create columns. The main difference is that each div is like a new canvas. You can treat positioning in each div as you treat positioning in the body.

Say, for example, you want this:

------------------------------------------
|                                                      |
------------------------------------------
|                                        |              |
|                                        |              |
------------------------------------------
------------------------------------------

Pretty typical 2-column layout.

HTML:
[code]
<body>
<div id="pageBanner">
  Do your image tags, or whatever
</div><!--end pageBanner-->

<div id="main">
  The main content goes here
</div><!--end main-->

<div id="rightCol">
  Ads, features go here
</div><!--end rightCol-->

<div id="pageFooter">
  &copy; etc
</div>

</body>
[/code]

Do you see how much nicer that looks than tables? Notice the comments for the closing tags - then you never have the problem of destroying your layout by losing track of the td tags.

Once you get used to css, it is real nice to use.

Now, for the syling:

[code]
div{position:relative}
body,div{margin:0;padding:0;background-color:#CCCCCC;color:#333333;}
[/code]
See why? browsers do 'intelligent' things, but we prefer to do the thinking for them.

[code]
#pageBanner{background:#999999 url(filename.png) no-repeat center center;height:120px;
}
#rightCol{width:180px;position:absolute;top:120px;right:0;}
#main{margin-right:180px;}
#pageFooter{height:30px;text-align:center;}
[/code]

Notice no widths have been set? The default is to stretch the div until it's margins touch the parent's padding. If you set a specific width, it will overlap the parent if the parent is too small for it. I actually like that IE6 doesn't do that, but IE7 does, so do not rely on IE6. Use IE7 or ff, then make it work in IE6. IE6 will die soon.

[hr]

Now, to demonstrate the real power of CSS layouts, lets say you want to make the right col, a left col. Think for a moment how you would do that with tables. Copy and paste. On every page, I suppose?

How about a new horizontal menu bar? Do you really want to make a new tr, then all the td's, and work out all the col-spans, then nest the new table? I can't imagine anyone would say they'd love to.

So, first, for the column, do this:
[code]
#rightCol{position:absolute;top:120px;left:0}
[/code]

OK? it is now on the left.

[code]
#main{margin-left:180px}
[/code]
Good eh.

Now, for the menubar, stick this below the closing tag for the pageBanner:
[code]
<div class="menuBar">
  <ul>
    <li>Menu item 1</li>
    <li>Menu item 2</li>
  </ul>
</div>
[/code]

[code]
#menuBar{height:20px;border:solid 1px #333333;border-left:none;border-right:none;}
#menuBar ul{list-style-type:none;}
#menuBar li{display:inline;margin:0 4px;}
[/code]

Then, remember we have to move the absolute leftCol down by 22px (height of the menubar plus borders), otherwise it will overlap the menu.
[code]
#leftCol{position:absolute;left:0;top:142px;width:180px;}
[/code]

Get stuck into it.

Good luck!







ps. [url=http://www.phpfreaks.com/forums/index.php/topic,100999.msg404519.html#msg404519]here is another thread that I have replied to[/url]. It uses a slightly more complex layout, and floating divs for the cols. Check that out too.