Jump to content


Photo

DIV vs TABLE


  • Please log in to reply
15 replies to this topic

#1 crashmaster

crashmaster
  • Members
  • PipPipPip
  • Advanced Member
  • 169 posts
  • LocationCzech Republic, Prague

Posted 24 July 2006 - 04:57 PM

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 ??
I'll never be the same...

#2 cmgmyr

cmgmyr
  • Members
  • PipPipPip
  • Advanced Member
  • 1,278 posts
  • LocationUSA

Posted 24 July 2006 - 05:10 PM

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

#3 just-j

just-j
  • Members
  • PipPipPip
  • Advanced Member
  • 52 posts

Posted 26 July 2006 - 06:15 AM

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.

#4 weales

weales
  • New Members
  • Pip
  • Newbie
  • 2 posts

Posted 26 July 2006 - 02:43 PM

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. 

#5 killerb

killerb
  • Members
  • PipPipPip
  • Advanced Member
  • 48 posts

Posted 27 July 2006 - 02:06 PM

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), this does well to explain a month of trial and error in just 10 minutes!

Also, this will help with 80% of layouts, but no machine can beat the power of being in control of the code with knowledge.

Experience is something you get just after you need it.

#6 foreverhex

foreverhex
  • Members
  • PipPipPip
  • Advanced Member
  • 91 posts

Posted 27 July 2006 - 03:45 PM

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?

#7 Chat

Chat
  • Members
  • PipPip
  • Member
  • 28 posts
  • LocationBirmingham (UK)

Posted 28 July 2006 - 12:59 PM

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.  ::)

#8 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 28 July 2006 - 01:11 PM

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 easier 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 tabular data 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 almost 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.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#9 foreverhex

foreverhex
  • Members
  • PipPipPip
  • Advanced Member
  • 91 posts

Posted 28 July 2006 - 01:30 PM

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?

#10 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 28 July 2006 - 02:18 PM

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.
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#11 foreverhex

foreverhex
  • Members
  • PipPipPip
  • Advanced Member
  • 91 posts

Posted 28 July 2006 - 10:29 PM

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.

#12 pixy

pixy
  • Members
  • PipPipPip
  • Advanced Member
  • 295 posts

Posted 30 July 2006 - 08:22 PM

I use tables with CSS.

<table class="whatever">

Like that.

This is a .44 Caliber Loveletter straight through my heart.

Tabulas + Threadless + Hire Me!


#13 foreverhex

foreverhex
  • Members
  • PipPipPip
  • Advanced Member
  • 91 posts

Posted 31 July 2006 - 02:41 PM

same here

#14 Ifa

Ifa
  • Members
  • PipPipPip
  • Advanced Member
  • 88 posts
  • LocationRauma, Finland

Posted 31 July 2006 - 03:27 PM

You can transform divs into tables using the display, though I see little point in that...  :)
I'm just a guy who likes to code for fun...

#15 foreverhex

foreverhex
  • Members
  • PipPipPip
  • Advanced Member
  • 91 posts

Posted 01 August 2006 - 02:41 PM

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

#16 killerb

killerb
  • Members
  • PipPipPip
  • Advanced Member
  • 48 posts

Posted 02 August 2006 - 01:35 AM

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: http://www.barelyfit...ss/positioning/

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:
<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>

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:

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

#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;}

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.

 

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:
#rightCol{position:absolute;top:120px;left:0}

OK? it is now on the left.

#main{margin-left:180px}
Good eh.

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

#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;}

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

Get stuck into it.

Good luck!







ps. here is another thread that I have replied to. It uses a slightly more complex layout, and floating divs for the cols. Check that out too.


Experience is something you get just after you need it.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users