View Thread: div vs. tables - Killersites.com Forum

Welcome Guest | Register | Login

Killersites.com Forum

Category: General Web Design

Forum: CSS - Styling your pages with Cascading Style Sheets.

Thread: div vs. tables

Quick Go »

No member browsing this thread

Thread Status: Active
Total posts in this thread: 44

[ ]

Author

This topic has been viewed 31063 times and has 43 replies

Susie
Advanced Member

Ohio, USA
Joined: May 30, 2004
Post Count: 2677
Status: Offline


div vs. tables

Not sure if this is the right forum...either here or the beginner forum. Anyway, I've been reading that it's sometimes better to use div tags rather than place content within tables. If so, I'm at a loss on how to begin.

Basically, my page will have a colored background. Within that background, I want a large white space in which I will put the logo, navigation, and content. Inside all that, I want to have separate areas/boxes that will contain even more information.

Here, kinda like this: http://cvperry.com

My question is how do I set that up? Like, would the big white space be a table? Then the navigation bar another table? And then inside would be div tags? If not, how would I set the size of the navigation bar (the colored part).

I hope this makes sense. It's odd...I'm understanding all the little parts of CSS that I'm studying, but I'm struggling with putting it all together into something that looks decent.
----------------------------------------
[Edit 1 times, last edit by Susie at Feb 13, 2006 8:59:11 AM]

[Feb 13, 2006 8:57:55 AM]

[Link]

newseed
Advanced Member

Joined: Apr 2, 2005
Post Count: 2141
Status: Offline


Re: div vs. tables

I am currently working on a site that may be what you are looking for.

Sanford Naval Academy

This site is done in CSS using <div> instead of <table> for the overall layout of the web site.

You are welcome to use every character of codes to help you achieve your goal. Please note that the CSS code may be a bit bloated thus some of the codes are not needed or have been repeated when it wasn't necessary.

<div> takes a little more time to get the effect you want but in my honest opinion, you have far more control than you would with <table>.
----------------------------------------
Success is based on how much you spend. If it's not money, then the alternative is your time.
The Kasper Group

[Feb 13, 2006 9:34:58 AM]

[Link]

LSW
Advanced Member

USA
Joined: Nov 27, 2003
Post Count: 6287
Status: Offline


Re: div vs. tables

Hi Susie,
Tables were meant to make columns of tabular data. they are very controlled and linear.

Div on the other hand are free. You can put anything anywhere in that Div, no horizontal or vertical columns to limit your positioning. So a table is like a tool box with all those little compartments that cannot change size, you can only re-arange them. A Div is like a empty box, you can move any element anywhere and resize it as you wish, no limitations. Place one elemet at exactly92 pixels from the wall if you like.

So in your body you create a outer Div, the rest of the web site is built in that. Your banner is in one Div, menu is another Div, different boxes are different divs and content is a seperate div. All these divs can be placed individually anywhere on the web page.

The link you give is a perfect design for this.

Other advantages:

When you name each Div seperatly with a ID for the CSS, that ID can be used as a target for scripts or internal links as well.
When you take away the CSS (important for those with disabilities) it degrades into a simple vertical text document, where tables will still have a layout that can make the reading of the page by screenreaders difficult to understand as it skips in a unlogical manner through the page.
Those with disabilities can change the look of the site more effectively to meet their needs
By using Divs, you can redefine the Div names with new positions, colors etc and in that manner completely change your web site design by loading a different CSS without bothering to change the source code. Either create different designs for those with disabilities or maybe just a special Valentines, Christmas, Halloween design for a few days...

Divs are the smart way to design web sites and make maintenance alot easier.

Throwing Tables Out the Window

----------------------------------------
Gu.aal kwsh� yak'�i it�akw ijeet wugood�k

LSW-WebDesign.com

[Feb 13, 2006 1:05:42 PM]

[Link]

Susie
Advanced Member

Ohio, USA
Joined: May 30, 2004
Post Count: 2677
Status: Offline


Re: div vs. tables

Thanks to both of you. I have some studying to do here. smile

I'll be back with questions.

[Feb 13, 2006 1:35:13 PM]

[Link]

Susie
Advanced Member

Ohio, USA
Joined: May 30, 2004
Post Count: 2677
Status: Offline


Re: div vs. tables

Okay, I think I have a start:

#content {
width: 900px;
margin-left: auto;
martin-right: auto;
border: 2px solid #000000;
background-color: #FFFFFF;
padding: 20px 20px 20px 20px;
text-align: left;
}

And the html is something like this:

<div id="content">
<p>This box is 900 pixels wide and centered in the document.</p>

Only thing is, I thought margin-left/right: auto; would make the container centered. However, it is not. What am I missing?

[Feb 13, 2006 2:59:30 PM]

[Link]

Susie
Advanced Member

Ohio, USA
Joined: May 30, 2004
Post Count: 2677
Status: Offline


Re: div vs. tables

And now I've got a mess....

<style type="text/css">

body {

background-color: #556B2F;
font-family: verdana, arial, helvetica, sans serif;
font-size: 12px;

}

#content {
width: 900px;
margin-left: auto;
martin-right: auto;
border: 2px solid #000000;
background-color: #FFFFFF;
padding: 10px 5px 10px 5px;
text-align: left;
}

#topnav {

font-family: verdana, arial, helvetica, sans serif; 12px;
width: 900px;

}

#topnav ul {
list-style: none;
padding: 0
margin: 0
top-margin: 0px;
float: right;

}

#topnav li {
display: inline;

}

#topnav a:link {
color: #556B2F;

}

#topnav a:visited {
color: #6E8B3D;

}

#topnav a:hover {
color: #000000

}

#topnav a:active {
color: #A2CD5A;

}

#logo {

list-style: none;
padding: 0
margin: 0
top-margin: 0px;

}

</style>
</head>

<body>

<div id="content">

<div id="logo">
<ul>
<li><a href="index.htm"><img border="0" src="logo.jpg" width="275" height="72"></a></li>
</ul>
</div>

<div id="topnav">
<ul>
<li><a href="contact.htm">Contact</a></li>
<li><a href="employment.htm"> Employment </a></li>
<li><a href="sitemap.htm"> Site Map </a></li>
</ul>
</div>

There is a black dot next to the logo and the links I floated to the right are underlined and too close to the bottom of the container. I suppose I need another container to hold it at the top? lol I am in over my head.

Here's my example: http://geocities.com/susien30/ (For some reason, my logo image isn't uploading, but you get the jist)
----------------------------------------
[Edit 1 times, last edit by Susie at Feb 13, 2006 4:38:17 PM]

[Feb 13, 2006 4:35:58 PM]

[Link]

Les
Advanced Member

Joined: May 9, 2004
Post Count: 640
Status: Offline


Re: div vs. tables

----------------------------------------
Tomorrow never comes, make the most of today
----------------------------------------
[Edit 2 times, last edit by Les at Feb 15, 2006 4:27:05 PM]

[Feb 13, 2006 5:55:10 PM]

[Link]

LSW
Advanced Member

USA
Joined: Nov 27, 2003
Post Count: 6287
Status: Offline


Re: div vs. tables

Ok, here are a few notes

Use a container. By this I mean just inside the body create a Div that everything will go in. Name it ID="container" if you like. That is a frame work for the rest of the site.
Now define this container as you like, but add the margins to it. You can also blend them together. margin: 0 auto; (magins, borders, padding etc are counted, top, right, bottom left. So 0 is top and bottom and auto is left and right)
As above, as padding is the same on all sides, you can just say padding: 20px; padding: 10px 20px; would be 10px top and bottom and 20px left and right.

By using margin: 0 auto; in a containing box for the web site you place it flat top and bottom and a margin on the sides fitting the screen size.
----------------------------------------
Gu.aal kwsh� yak'�i it�akw ijeet wugood�k

LSW-WebDesign.com

[Feb 13, 2006 8:07:32 PM]

[Link]

LSW
Advanced Member

USA
Joined: Nov 27, 2003
Post Count: 6287
Status: Offline


Re: div vs. tables

There is no reason for the Logo to be a List. A list is a list of items and this is but one. Just drop the list from it and the bullet will dissapear. But you can also remove the bullet with: list-style: none;

Underlines can be removed with: text-decoration: none;

But be sure the link is clearly a link or it may be difficult for some people to identify it as a link.
----------------------------------------
Gu.aal kwsh� yak'�i it�akw ijeet wugood�k

LSW-WebDesign.com

[Feb 13, 2006 8:19:02 PM]

[Link]

Thelma
Advanced Member

Texas, USA
Joined: Dec 8, 2003
Post Count: 3020
Status: Offline


Re: div vs. tables

#content {
width: 900px;

With a width of 900px you will force sideways scrolling for all resolutions set to 800x600 - that's not a good idea. Limit your width t to 760px (to allow for scroll bars, etc.) and your page will fit into all size windows.
----------------------------------------
...

[Feb 14, 2006 6:19:15 AM]

[Link]

[ ]

Current timezone is GMT
Nov 20, 2009 8:44:02 PM