Jump to content


DIV vs. Table?


  • Please log in to reply
19 replies to this topic

#1 Guest_askjames01_*

Guest_askjames01_*
  • Guests

Posted 23 February 2006 - 01:07 AM

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 automatically
in different screen resolution for example, 800x600, 1024x768 and etc.....

centering <DIV> is a headache for me...



thank you very much... for you advance answer...






#2 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 23 February 2006 - 01:16 AM

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.
Legend has it that reading the manual never killed anyone.
My site

#3 ober

ober
  • Staff Alumni
  • Advanced Member
  • 5,337 posts
  • LocationEast Coast, USA

Posted 23 February 2006 - 01:48 PM

[!--quoteo(post=348551:date=Feb 22 2006, 08:16 PM:name=AndyB)--][div class=\'quotetop\']QUOTE(AndyB @ Feb 22 2006, 08:16 PM) View Post[/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.

Info: PHP Manual


#4 obsidian

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

Posted 23 February 2006 - 01:57 PM

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:

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

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

#5 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 23 February 2006 - 03:07 PM

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 will need to set a width and 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 will need to have a valid DOCTYPE, such as the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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.

#6 obsidian

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

Posted 23 February 2006 - 03:12 PM

[!--quoteo(post=348699:date=Feb 23 2006, 10:07 AM:name=wildteen88)--][div class=\'quotetop\']QUOTE(wildteen88 @ Feb 23 2006, 10:07 AM) View Post[/div][div class=\'quotemain\'][!--quotec--]
in order for you to use CSS to your advantage you will need to have a valid DOCTYPE...
[/quote]
excellent point... can't believe i totally overlooked mentioning that! thanks, wildteen
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

#7 Guest_askjames01_*

Guest_askjames01_*
  • Guests

Posted 23 February 2006 - 04:21 PM

ok brothers, 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 AndyB... :)

Long time no see Ober? :) , how are you doin' bro?

Great recall Obsidian........ :)

Ahhhhhhhh, that's new to me wildteen88 i didn't know that thing is necessary to execute the CSS thing properly, and where did you learned that wildteen?

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



#8 obsidian

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

Posted 23 February 2006 - 04:31 PM

wow, i don't know how you're generating your page, but you have your doctype and html header 3 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:
<!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>


extremely simple layout, but gives the idea.
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 Guest_askjames01_*

Guest_askjames01_*
  • Guests

Posted 23 February 2006 - 04:40 PM

I think that is the problem obsidian and i'm too did not noticed that maybe it's because i use
this;
<?php

    include_once("header.htm");
    include_once("body.htm");
    include_once("footer.htm");
?>

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



#10 obsidian

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

Posted 23 February 2006 - 04:53 PM

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

BODY.HTM
<div id='pagewrap'>
  <p>Here is some text within a centered layout!</p>
</div>

FOOTER.HTM
</body>

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.
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 Guest_askjames01_*

Guest_askjames01_*
  • Guests

Posted 23 February 2006 - 05:02 PM

[!--sizeo:5--][span style=\"font-size:18pt;line-height:100%\"][!--/sizeo--]Wow! Excellent![!--sizec--][/span][!--/sizec--]

You are really a guru Obsidian! :)
wow, that's really a nice answer from you...
thank a lot....., i will try that later..... thanks.



#12 ober

ober
  • Staff Alumni
  • Advanced Member
  • 5,337 posts
  • LocationEast Coast, USA

Posted 23 February 2006 - 07:27 PM

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

Info: PHP Manual


#13 obsidian

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

Posted 23 February 2006 - 07:30 PM

[!--quoteo(post=348759:date=Feb 23 2006, 02:27 PM:name=ober)--][div class=\'quotetop\']QUOTE(ober @ Feb 23 2006, 02:27 PM) View Post[/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
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

#14 ober

ober
  • Staff Alumni
  • Advanced Member
  • 5,337 posts
  • LocationEast Coast, USA

Posted 23 February 2006 - 07:32 PM

LOL... I'm sure you've been just fine ;-)

Info: PHP Manual


#15 Guest_askjames01_*

Guest_askjames01_*
  • Guests

Posted 24 February 2006 - 01:06 AM

Your answers Obsidian are really COOL!

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.



#16 obsidian

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

Posted 24 February 2006 - 02:29 AM

[!--quoteo(post=348879:date=Feb 23 2006, 08:06 PM:name=askjames01)--][div class=\'quotetop\']QUOTE(askjames01 @ Feb 23 2006, 08:06 PM) View Post[/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:

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

copy and paste that code into a file, and you should see it centered in *every* browser you test in.
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

#17 Guest_askjames01_*

Guest_askjames01_*
  • Guests

Posted 24 February 2006 - 02:24 PM

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--]You are the man OBSIDIAN![!--sizec--][/span][!--/sizec--]
[!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--]You are the man OBSIDIAN![!--sizec--][/span][!--/sizec--]
[!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--]You are the man OBSIDIAN![!--sizec--][/span][!--/sizec--]
[!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--]You are the man OBSIDIAN![!--sizec--][/span][!--/sizec--]
[!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--]You are the man OBSIDIAN![!--sizec--][/span][!--/sizec--]
[!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--]You are the man OBSIDIAN![!--sizec--][/span][!--/sizec--]
[!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--]You are the man OBSIDIAN![!--sizec--][/span][!--/sizec--]
[!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--]You are the man OBSIDIAN![!--sizec--][/span][!--/sizec--]
[!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--]You are the man OBSIDIAN![!--sizec--][/span][!--/sizec--]
[!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--]You are the man OBSIDIAN![!--sizec--][/span][!--/sizec--]
[!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--]You are the man OBSIDIAN![!--sizec--][/span][!--/sizec--]
[!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--]You are the man OBSIDIAN![!--sizec--][/span][!--/sizec--]
[!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--]You are the man OBSIDIAN![!--sizec--][/span][!--/sizec--]
[!--sizeo:4--][span style=\"font-size:14pt;line-height:100%\"][!--/sizeo--]You are the man OBSIDIAN![!--sizec--][/span][!--/sizec--]

You are GOD's sent to me OBSIDIAN!
You are really a true WEBMASTER!

I hope i can reach your skills too MODERATORS?

thanks very, very, very MUCH! brothers... :)
This is really a good community for WEBMASTERS... I am learning a lot from this site
and from you all gurus...

Thanks....

-/james
----------
your good neighborhood



#18 obsidian

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

Posted 24 February 2006 - 02:30 PM

lol... thanks... just glad we could 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

#19 redbullmarky

redbullmarky
  • Staff Alumni
  • Advanced Member
  • 2,863 posts
  • LocationBedfordshire, England

Posted 13 March 2006 - 08:57 PM

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 :)
"you have to keep pissing in the wind to learn how to keep your shoes dry..."

I say old chap, that is rather amusing!

#20 Guest_askjames01_*

Guest_askjames01_*
  • Guests

Posted 13 March 2006 - 11:28 PM

nice to see you too..
Redbullmarky! :)

-/james/




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users