Jump to content

DIV vs. Table?


Guest askjames01

Recommended Posts

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




Link to comment
Share on other sites

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.
Link to comment
Share on other sites

[!--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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

[!--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
Link to comment
Share on other sites

Guest askjames01
[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.....

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Guest askjames01
I think that is the problem [b]obsidian[/b] and i'm too did not noticed that maybe it's because i use
this;
[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.... :)

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Guest askjames01
[!--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.

Link to comment
Share on other sites

[!--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
Link to comment
Share on other sites

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

Link to comment
Share on other sites

[!--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.
Link to comment
Share on other sites

Guest askjames01
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 site
and from you all gurus...

Thanks....

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

Link to comment
Share on other sites

  • 3 weeks later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.