div vs Tables

[qtips]

After learning some CSS and HTML and seeing sourcecodes of some excellent designed webpages, i notice that everyone is using div's to make something that you could've made with tables. I can see that there are some advantages with div's but if someone could point out the main differences and when one should use tables instead of div and visa versa, that'll be very helpful. I thought that this topic may me very common but couldn't find anything. Thanks for your help

[S@m]

Best example I have ever seen...Why using tables for layout is stupidGreat layout too.

[Anders Moen]

Div's are better than tables because tables are gonna be used for tabular data, like when you get something out from a database (MySQL or something else)

[real_illusions]

divs = more freedom, more complicated designs are possible, css based (therefore more freedom), easier to control, add some funky stuff that you cant with tables.tables = yuckiness:)

[vytas]

I have to agree with real illusions.I used to work with tables.But since i discovered div's my sites have only been improved (theyre still not as i like)

[jlhaslip]

One of the reasons CSS is used more is because the style sheet only gets sent with the page the first time and is cached for the other viewings of the site, whereas the table styles need to be send every time. Also, table based sites require more code for the structure, too, so that uses more bandwidth also.

[qtips]

Thank you for your answers, made things a little clearer. But if you could look at the following example with me, it will be more helpful.I tried to make a menubar of one row and some columns:______ ______ ______ ______|______|______|_____|______|with tables containing links (text, not images). This was very simple coding. I then used CSS to edit the some borders and put a fixed width size to the columns and a fixed height to the table. Even though it was easy, tables have a mind of their own. I wished to add an onmouseover effect with the text inside the columns getting bold. But then the colums autmatically got a little resized, even though i had a fixed size for everything. But that's another problem...If i wish to make something similar with divs, the only way i see to make a similar menubar, is to make divs for every box and then use styles to give each box a width and height. I also need to give each div an absolute position to make them come next to each other. This seems like alot of more work, since i have to calculate the position for each box. I guess i am making things more difficult than they really are, but i can't find another way.I have also seen code from other sites that use these kind of menus. They tend to use lists (ul and il tags) and then use styles to adjust them, but i don't quite understand how it works. Maybe my CSS knowlegde is still too weak... Also it would be helpful if you know of some sites which offers some good techiques/tutorials for using styles for similar effects

[ste]

I guess i am making things more difficult than they really are, but i can't find another way.

yep, you dont need absolute positioning instead you can use css to make a list flow horizontally by using display: inline; try something like thishtml:

<!-- start menu --><div id ="navcontainer"><ul id="navlist"><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Products</a></li><li><a href="#">Contact</a></li></ul></div><!-- end menu -->

css:

/* navigation */#navcontainer{text-align: left; height:20px; width:740px; background-color: #eee;}#navlist{margin: 0; padding:2px; color: #fff;}#navlist ul, #navlist li{margin: 0; padding: 0; display: inline; list-style-type: none;}#navlist a:link, #navlist a:visited{float: left; padding-right: 12px;}#navlist a:hover	{font-weight: bold;}

[qtips]

nice. I'll check that out. But why lists? why not like < p> or some other tags?

[aspnetguy]

lists are the W3C recommendation and it helps search engines know that it is your menu not part of your content. Google tends to treat content in <p></p> as main site content because by definition that is what <p></p> is generally used for.

[ste]

if you think about it a menu is a list of links so its more semantically correct to use a list than paragraphs or anything else

[Perfect S.]

I made my school's website using divs. I thought it turned out all right considering it was my second ever website. I still need to fix a few things on it (if I ever figure it out) and in Firefox I have no idea how to make the content box span a certain width that would be able to change with a change in the browser width.

[ste]

I have no idea how to make the content box span a certain width that would be able to change with a change in the browser width.

its called a liquid layout. basically you want to use percentages instead of pixels when specifying widthe.g. div {width: 80%;}

[Anders Moen]

I made my school's website using divs. I thought it turned out all right considering it was my second ever website. I still need to fix a few things on it (if I ever figure it out) and in Firefox I have no idea how to make the content box span a certain width that would be able to change with a change in the browser width.

O_o!Very bright colors that really burns in my eyes...lol