Guest askjames01 Posted February 23, 2006 Share Posted February 23, 2006 ok, they say <DIV> is better than <TABLE> why?Do you have a bright answer for this?As with my experienced i have difficulty centering the <DIV> tag...And with <TABLE> it's easy.... to center!and why they say <DIV> is better than <TABLE>... why?And by the way if your answer is in favor with <DIV> tag how do you center it automaticallyin different screen resolution for example, 800x600, 1024x768 and etc.....centering <DIV> is a headache for me...thank you very much... for you advance answer... Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/ Share on other sites More sharing options...
AndyB Posted February 23, 2006 Share Posted February 23, 2006 Screwdrivers are best for screws. Hammers are best for nails. Using the right tool makes life simpler and work more effective. Yes, you could put in a screw with a hammer, but ...Tables are better for tabular data (after all, that's why the tag was added in html). For layout divs are better. Why? Pages are less bulky. Indexing robots prefer pages high a high content ratio (impossible when every second tag is td). Tables for layout are nonsensical for non-graphical browsers, e.g. readers for the visually impaired. When you understand and use CSS making your site have 'printer-friendly' pages is a few minutes work and almost zero extra code ... the list goes on.Learning CSS is not a 5-minute exercise. It's a commitment. Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12213 Share on other sites More sharing options...
ober Posted February 23, 2006 Share Posted February 23, 2006 [!--quoteo(post=348551:date=Feb 22 2006, 08:16 PM:name=AndyB)--][div class=\'quotetop\']QUOTE(AndyB @ Feb 22 2006, 08:16 PM) [snapback]348551[/snapback][/div][div class=\'quotemain\'][!--quotec--]Learning CSS is not a 5-minute exercise. It's a commitment.[/quote]I couldn't have said it better myself. And the commitment is MORE than worth it. Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12237 Share on other sites More sharing options...
obsidian Posted February 23, 2006 Share Posted February 23, 2006 i agree 100% with the comments above, but i'll approach the question from a slightly different angle. you ask which is better div tags or tables, and i have to ask you: what are you displaying? as AndyB said, when you're displaying tabular data, you'll have more of a headache trying to use divs that a table (it can be done, it's just a waste of time). however, as far as difficulty centering and other layout concerns, once you learn the basics behind it, it's actually best to position and design divs and tables in EXACTLY THE SAME WAY. as far as HOW to center them, it's simply a matter of assigning and aut margin to the horizontal axis. for instance, if i have a table (or div) that i want to be 600px wide and centered on my screen, i would approach them both from the same way:[code]<style type='text/css'><!--.centerMe { width: 600px; margin: 10px auto; border: 1px solid #999999; background-color: #ffffff;}--></style><div class='centerMe'> <p>Oh, look! A centered div!</p></div><table class='centerMe' border='0' cellpadding='0' cellspacing='0'> <tr><td>Oh, look! A centered table!</td></tr></table>[/code]as you can see, in this example, i've used the EXACT SAME CLASS to center both a table and a div. so, it's back to you... they both have their uses, and they are both equivalent when it comes to styling them or positioning them. but look closely at the content of the markup. you can see the div tag is MUCH less bulky, especially if we get into a multi-column layout... but that's another story. Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12239 Share on other sites More sharing options...
wildteen88 Posted February 23, 2006 Share Posted February 23, 2006 The way you set a div container in the center of the screeen (horizontally, not veticaly) is by using obsidian's example. In order it to center properly you [b]will[/b] need to set a width [b]and[/b] set the (left and firght) margins of the div to auto.Thats how you center a div with CSS! Now in order for you to use CSS to your advantage you [b]will[/b] need to have a valid DOCTYPE, such as the following:[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/code]That is the very first tag a html document should have! Otherwise your browser goes into 'quirks mode' instead of 'standards mode', namely IE. Whithout that DOCTYPE then your div containers wont center, Ive ran into the same problem time and time again! If you use that doctype you should apply to the XHTML Standards set by W3C.Also when using CSS and divs for your site you can reduce your HTML considerably, say 50 - 60% less! This means less file sizes and slightly faster pages being served! The only snag with using CSS is that browsers are at differently levels of CSS standards and so the browser may not display your site as you expect it to display as in one browser it looks good and in the other its not as good. Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12246 Share on other sites More sharing options...
obsidian Posted February 23, 2006 Share Posted February 23, 2006 [!--quoteo(post=348699:date=Feb 23 2006, 10:07 AM:name=wildteen88)--][div class=\'quotetop\']QUOTE(wildteen88 @ Feb 23 2006, 10:07 AM) [snapback]348699[/snapback][/div][div class=\'quotemain\'][!--quotec--]in order for you to use CSS to your advantage you [b]will[/b] need to have a valid DOCTYPE...[/quote]excellent point... can't believe i totally overlooked mentioning that! thanks, wildteen Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12247 Share on other sites More sharing options...
Guest askjames01 Posted February 23, 2006 Share Posted February 23, 2006 [b]ok brothers[/b], here is the css page that i would like to center --> [a href=\"http://www.askjames01.com/body/\" target=\"_blank\"]http://www.askjames01.com/body/[/a]I think i'm now an intermediate user of CSS2 but i just really hate the centering page thing!Thanks again for the reminder [b]AndyB[/b]... :)Long time no see [b]Ober[/b]? :) , how are you doin' bro?Great recall [b]Obsidian[/b]........ :)Ahhhhhhhh, that's new to me [b]wildteen88[/b] i didn't know that thing is necessary to execute the CSS thing properly, and where did you learned that [b]wildteen[/b]?I am trying to study this website --> [a href=\"http://www.netgeekz.net\" target=\"_blank\"]http://www.netgeekz.net[/a],yeah!, it is the website of [b]steelmanronald[/b]. :)It works fine alright, but i don't like it stretches the width automatically, i just want it to stay in the same width size and not to auto resize it.... How do you do this brothers?thanks again moderators....... :), in advance..... Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12249 Share on other sites More sharing options...
obsidian Posted February 23, 2006 Share Posted February 23, 2006 wow, i don't know how you're generating your page, but you have your doctype and html header [b]3[/b] separate times throughout the markup. you can only have it ONCE to validate a page and assure that everything will work together. to center a page like that, all you have to do is something like this:[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css"><!--* { margin: 0; padding: 0;}body { padding: 15px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; background-color: #f4f4f4;}#pageWrap { margin: 0 auto; width: 700px; border: 1px solid #999999; background-color: #ffffff;}p { padding: 8px 10px;}--></style></head><body><div id='pagewrap'> <p>Here is some text within a centered layout!</p></div></body></html>[/code]extremely simple layout, but gives the idea. Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12251 Share on other sites More sharing options...
Guest askjames01 Posted February 23, 2006 Share Posted February 23, 2006 I think that is the problem [b]obsidian[/b] and i'm too did not noticed that maybe it's because i usethis;[code]<?php include_once("header.htm"); include_once("body.htm"); include_once("footer.htm");?>[/code]Should i remove the Doctype of Header.htm and footer.htm or both the body.htm or the footer.htm?Or am i really doing it wrong?that's my index alright? i just included the three .htm files.... :) Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12252 Share on other sites More sharing options...
obsidian Posted February 23, 2006 Share Posted February 23, 2006 no, you're fine with the way you're pulling them together, but by definition, only the header.htm should contain your header information. for instance, if i were to break up the code i showed you above into 3 files, it would be something like this:HEADER.HTM[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css"><!--* { margin: 0; padding: 0;}body { padding: 15px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; background-color: #f4f4f4;}#pageWrap { margin: 0 auto; width: 700px; border: 1px solid #999999; background-color: #ffffff;}p { padding: 8px 10px;}--></style></head><body>[/code]BODY.HTM[code]<div id='pagewrap'> <p>Here is some text within a centered layout!</p></div>[/code]FOOTER.HTM[code]</body>[/code]if you were going to have a copyright or anything else that shows at the bottom of every page, i'd include that in the footer as well. Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12253 Share on other sites More sharing options...
Guest askjames01 Posted February 23, 2006 Share Posted February 23, 2006 [!--sizeo:5--][span style=\"font-size:18pt;line-height:100%\"][!--/sizeo--]Wow! [i]Excellent[/i]![!--sizec--][/span][!--/sizec--]You are really a guru [b]Obsidian[/b]! :)wow, that's really a nice answer from you...thank a lot....., i will try that later..... thanks. Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12255 Share on other sites More sharing options...
ober Posted February 23, 2006 Share Posted February 23, 2006 Good to see you too James... sorry I haven't been around in a while.Just a small point on obsidian's post... don't forget to close the html after you close the body (ie. </body></html>) Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12261 Share on other sites More sharing options...
obsidian Posted February 23, 2006 Share Posted February 23, 2006 [!--quoteo(post=348759:date=Feb 23 2006, 02:27 PM:name=ober)--][div class=\'quotetop\']QUOTE(ober @ Feb 23 2006, 02:27 PM) [snapback]348759[/snapback][/div][div class=\'quotemain\'][!--quotec--]Just a small point on obsidian's post... don't forget to close the html after you close the body (ie. </body></html>)[/quote]thanks, ober... that's what i get for coding on the fly like that ;-)see, where have i been without you to help me out??? lol Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12262 Share on other sites More sharing options...
ober Posted February 23, 2006 Share Posted February 23, 2006 LOL... I'm sure you've been just fine ;-) Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12263 Share on other sites More sharing options...
Guest askjames01 Posted February 24, 2006 Share Posted February 24, 2006 Your answers Obsidian are really [b]COOL[/b]!but my main problem which is centering the entire CSS page is still annoying me...do i need to use javascript to mix with CSS?I want the CSS page centering automatic when you use different SCREEN RESOLUTION....Just like a TABLE can do, they center automatic without a headache... :)I tried some of your examples obsidian, but the entire CSS page stays on the left side of the screen. Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12309 Share on other sites More sharing options...
obsidian Posted February 24, 2006 Share Posted February 24, 2006 [!--quoteo(post=348879:date=Feb 23 2006, 08:06 PM:name=askjames01)--][div class=\'quotetop\']QUOTE(askjames01 @ Feb 23 2006, 08:06 PM) [snapback]348879[/snapback][/div][div class=\'quotemain\'][!--quotec--]I tried some of your examples obsidian, but the entire CSS page stays on the left side of the screen.[/quote]give us your specs... what browser are you using, etc. also, show me your posted code. did you change anything, or did you post everything EXACTLY as i posted it? i'll post the full code once more with a slight adjustment to the CSS that should help any small issues you could be having with IE:[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css"><!--* { margin: 0; padding: 0;}body { padding: 15px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; background-color: #f4f4f4; text-align: center;}#pageWrap { margin: 0 auto; width: 700px; border: 1px solid #999999; background-color: #ffffff; text-align: left;}p { padding: 8px 10px;}--></style></head><body><div id='pagewrap'> <p>Here is some text within a centered layout!</p></div></body></html>[/code]copy and paste that code into a file, and you should see it centered in *every* browser you test in. Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12320 Share on other sites More sharing options...
Guest askjames01 Posted February 24, 2006 Share Posted February 24, 2006 ok, i review your codes, and checked,checked,checked,checked,and checked!........ and now it's clear to me i mean [!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--]SUPER CLEAR[!--sizec--][/span][!--/sizec--] to me now!your codes [!--sizeo:5--][span style=\"font-size:18pt;line-height:100%\"][!--/sizeo--]OBSIDIAN[!--sizec--][/span][!--/sizec--] are really [!--sizeo:6--][span style=\"font-size:24pt;line-height:100%\"][!--/sizeo--]SUPER COOL[!--sizec--][/span][!--/sizec--]!i just forgot to compare the difference between these two --> id='pageWrap' & id='pagewrap'i didn't know that CSS is case sensitive tooo.. an apology to all of you MODERATORS....But for your HELP & EFFORTS i would like to thank [!--sizeo:5--][span style=\"font-size:18pt;line-height:100%\"][!--/sizeo--]to you ALL![!--sizec--][/span][!--/sizec--]And specially to you ---> [!--sizeo:7--][span style=\"font-size:36pt;line-height:100%\"][!--/sizeo--]OBSIDIAN[!--sizec--][/span][!--/sizec--]!,[!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--][i]You are the man[/i] OBSIDIAN![!--sizec--][/span][!--/sizec--][!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--][i]You are the man[/i] OBSIDIAN![!--sizec--][/span][!--/sizec--][!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--][i]You are the man[/i] OBSIDIAN![!--sizec--][/span][!--/sizec--][!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--][i]You are the man[/i] OBSIDIAN![!--sizec--][/span][!--/sizec--][!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--][i]You are the man[/i] OBSIDIAN![!--sizec--][/span][!--/sizec--][!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--][i]You are the man[/i] OBSIDIAN![!--sizec--][/span][!--/sizec--][!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--][i]You are the man[/i] OBSIDIAN![!--sizec--][/span][!--/sizec--][!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--][i]You are the man[/i] OBSIDIAN![!--sizec--][/span][!--/sizec--][!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--][i]You are the man[/i] OBSIDIAN![!--sizec--][/span][!--/sizec--][!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--][i]You are the man[/i] OBSIDIAN![!--sizec--][/span][!--/sizec--][!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--][i]You are the man[/i] OBSIDIAN![!--sizec--][/span][!--/sizec--][!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--][i]You are the man[/i] OBSIDIAN![!--sizec--][/span][!--/sizec--][!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--][i]You are the man[/i] OBSIDIAN![!--sizec--][/span][!--/sizec--][!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--][i]You are the man[/i] OBSIDIAN![!--sizec--][/span][!--/sizec--]You are GOD's sent to me [b]OBSIDIAN[/b]!You are really a true [b]WEBMASTER[/b]!I hope i can reach your skills too [b]MODERATORS[/b]?thanks very, very, very MUCH! brothers... :)This is really a good community for [b]WEBMASTERS[/b]... I am learning a lot from this siteand from you all gurus...Thanks....-/james----------your good neighborhood Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12349 Share on other sites More sharing options...
obsidian Posted February 24, 2006 Share Posted February 24, 2006 lol... thanks... just glad we could help! Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-12351 Share on other sites More sharing options...
redbullmarky Posted March 13, 2006 Share Posted March 13, 2006 haha good to see you again james. i'm sure i'm not the only one who has a chuckle at some of your posts :) Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-17135 Share on other sites More sharing options...
Guest askjames01 Posted March 13, 2006 Share Posted March 13, 2006 nice to see you too..[b]Redbullmarky! :)[/b]-/james/ Quote Link to comment https://forums.phpfreaks.com/topic/3538-div-vs-table/#findComment-17173 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.