Table or Div

Jordonias · 08-08-2006, 11:22 PM

What do you think should be used for website layouts? I've been reading online, and have seen many mixed oppinions. I've been reading this site for the past few days and you guys seem like you know what you are talking about. I'm debating on which route I should choose on my next website. Thanks for all input.

JamieJelly · 08-09-2006, 12:42 AM

Jordonias, it all depends on how well you want to structure your code.

Symantic markup is a big deal at the moment, for many reasons including accessibility. This in essence is using (X)HTML tags to describe what content it contains. For example, navigation is generally considered a list. So it should be contained within either <ul> (unordered list) or <ol> (ordered list) tags. On the flip side, layout isn't tabular data, so it shouldn't be in <table> tags.

I use to design in tables but now only using CSS and HTML 4.01 STRICT although some designers still use tables. There are pros and cons, you need to weigh them up and decide what is best for you.

cashcannon · 08-09-2006, 01:56 AM

I used to do it all in tables, but got forced using divs for practical reasons(coding wise) and now I'm doing pretty o.k with css and think that divs are better and easier

theChronic · 08-09-2006, 02:09 AM

I believe table based sites load slower than a div based site? It seems that div is the new things and tables are on their way out. All the CMSs are trying to get all their followers to make div templates.

theChronic · 08-09-2006, 02:55 AM

This post inspired me to learn a lil more about divs and actually once you get the hang of it they are somewhat addicting over tables. I feel like its soo much cleaner code. Certainly is less code so you get a higher content to code ratio goin.

cashcannon · 08-09-2006, 03:00 AM

Quote:

Originally Posted by theChronic

This post inspired me to learn a lil more about divs and actually once you get the hang of it they are somewhat addicting over tables. I feel like its soo much cleaner code. Certainly is less code so you get a higher content to code ratio goin.

Go for it! definantly worth it

chicgeek · 08-09-2006, 05:42 AM

CSS positioning > tabular structure.

In my experience, anyway. It's a sharp learning curve, but worth the climb.

Jordonias · 08-09-2006, 06:55 AM

Thanks for the input, I've been playing with divs but I have come to problems making divs side by side horizontally. I've looked online and have seen many different ways to do this, can anyone show me or tell me the easiest and best way to go about doing this?

chicgeek · 08-09-2006, 07:07 AM

Floating divs.

float: left applied to both divs, with each given a width value.

Jordonias · 08-09-2006, 07:13 AM

Ok, say for some odd reason I wanted to have a row with 1 column, then a row with 3 columns, then a row with 2 columns.

chicgeek · 08-09-2006, 07:28 AM

Code:

<div style="width:900px;">one column</div>

<div style="width:450px; float:left;">two column</div>
<div style="width:450px; float:left;">two column</div>

<div style="clear:both;"></div>

<div style="width:300px; float:left;">three column</div>
<div style="width:300px; float:left;">three column</div>
<div style="width:300px; float:left;">three column</div>

<div style="clear:both;"></div>

Jordonias · 08-09-2006, 08:16 AM

Quote:

Originally Posted by chicgeek

Code:

<div style="width:900px;">one column</div>

<div style="width:450px; float:left;">two column</div>
<div style="width:450px; float:left;">two column</div>

<div style="clear:both;"></div>

<div style="width:300px; float:left;">three column</div>
<div style="width:300px; float:left;">three column</div>
<div style="width:300px; float:left;">three column</div>

<div style="clear:both;"></div>

Thank you very much chicgeek, I think I understand now.

chicgeek · 08-09-2006, 08:18 AM

No problem.

Let us know if it works out as you had hoped!

daboss · 08-09-2006, 08:30 AM

Quote:

Originally Posted by theChronic

I believe table based sites load slower than a div based site? It seems that div is the new things and tables are on their way out. All the CMSs are trying to get all their followers to make div templates.

yes, that's true especially if the layout is complicated. the code for the table layout alone can be very much longer than css coding...

i used to code exclusively using tables... until i tried to hack a wordpress skin... then i realized that css is really much easier. the only problem with css is that sometimes firefox and ie interpretes them differently and you have to tweak the code over and over again until it appears 'almost' the same in both browsers.

but no looking back, i'm bought over by css now...

chicgeek · 08-09-2006, 08:32 AM

That'll be one soul, please.

Jordonias · 08-09-2006, 08:35 AM

One more problem.

Code:

<html>
<head>

</head>
<body>
<center>
<div value="top" style="width:800px; background-color:red;">
1
</div>
<div value="midbar" style="width:800px; background-color:orange;">
2
</div>
<div value="leftmenu" style="width:100px; float:left; background-color:yellow;">
3
</div>
<div value="content" style="width:600px; float:left; background-color:green;">
4
</div>
<div value="rightmenu" style="width:100px; float:left; background-color:blue;">
5
</div>
<div value="empty" style="clear:both;">

</div>
<div value="bottom" style="width:800px; background-color:red; background-color:purple;">
6
</div>
</center>
</body>
</html>

How would I go about making 3,4, and 5 centered like the rest of them? Ignore the values, its for later use.

chicgeek · 08-09-2006, 08:40 AM

centered? I'm not sure what you mean in this case. Horizontally...? Vertically? Text-align?

And also, from the get go, you should be trying to use an external stylesheet. Give your divs a class (for multiple instances) or an id (for a single instance) and organize your css that way. It will save you oodles of time in the end.

gaz545 · 08-09-2006, 08:43 AM

As the structure of the table in html is much longer than the method of using div's you shall also be penilised by search engines such as google, as there spiders only read a certain amount of lines of code

Jordonias · 08-09-2006, 08:44 AM

I planned on doing that after I figured out how to do it, copy past that into notepad and save it as html and view it. Numbers 1, 2, and 6 are center horizontally, but since i used float:left; it moves 3,4, and 5 to the left side of the page.

chicgeek · 08-09-2006, 08:47 AM

Look at your width values. They are too large. They get knocked to the left because there is no room for them.