[SOLVED] Layouts with Divs Vs Tables - problem with divs is...

[limitphp]

Is using tables for layout outdated?

 

Want two columns?

Yes, you can do a div float left and a div float right.

 

But, below those two columns, if you want to go back to 3 columns or 1 column, any div you put underneath it will go up to the top and will not by default stay underneath the two floating divs.  That is a huge flaw.

 

With tables you don't have to worry about this.

 

Maybe I'm missing something, but for now, I'm sticking with tables.

[Zergman]

im trying to convert to full div layouts now.  Used to be a hardcore table user but the code sometimes got to the point of insane and I couldn't figure it out sometimes.

 

I do admit that pages load quite a bit faster using div but i got a lot of learning to do.  One thing I realized that IE and firefox don't handle div right for me.  using a width of 100% shows properly in IE but in FF, its expanding off the screen by about 4px.

 

Feel the same as you right now trying to figure out the bugs.  Tables were easier

 

Not sure but im right now about 60% div, 40% tables

[limitphp]

im trying to convert to full div layouts now.  Used to be a hardcore table user but the code sometimes got to the point of insane and I couldn't figure it out sometimes.

 

I do admit that pages load quite a bit faster using div but i got a lot of learning to do.  One thing I realized that IE and firefox don't handle div right for me.  using a width of 100% shows properly in IE but in FF, its expanding off the screen by about 4px.

 

Feel the same as you right now trying to figure out the bugs.  Tables were easier

 

Not sure but im right now about 60% div, 40% tables

 

ahh...the reason why div width is not same in IE and Firefox....is because of margin defaults in the body tag in firefox maybe....

 

set this in css:

body {margin:0px; overflow-y:scroll}

 

the y scroll will always make the browser set room for the vertical scroll...this way your width always stays the same....

 

actually...i just figured something out....the reason my div was shooting up next to the other 2 divs I had...was because I needed to set the "clear:both" in the div I wanted to goto the next line...

 

so right now....I'm back to:

all divs for layout...no tables for layout....

 

tables for tabular data of course, though....

 

 

[Zergman]

Thats good to know, thanks for the tip!

 

While I have someones attention and this is all new to me, for people that are 100% div users, are tables still used for keeping structure for data output? 

 

Like what im doing now is placing a table inside a div to keep structure to things.  Page headers with lots of little things or outputting massive data.

 

I've been trying it without, but its a real mess and a headache plus there are things I don't think you could do without tables.... 

[Mchl]

Tables should off course be used for tabular data. That's what they were created for in the first place.

 

"Page headers with lots of little things": avoid tables for that. You can get quite nice results using CSS styled lists.

[Zergman]

Thanks for the advise Mchl.  Good to know im on the right track using tables for what I thought they were meant for.

 

As for using CSS styled lists, thats on the To Do list of learning.

 

I do see the flexability by using css and div layouts though, just not easy changing from the old ways of tables tables tables.

[haku]

But, below those two columns, if you want to go back to 3 columns or 1 column, any div you put underneath it will go up to the top and will not by default stay underneath the two floating divs. That is a huge flaw.

 

With tables you don't have to worry about this.

 

Maybe I'm missing something, but for now, I'm sticking with tables.

 

Well, you are missing something. It's not a flaw, you just aren't understanding the nature of how CSS works. Floating an element takes it out of the flow of the document (which is how it should be - it allows text and stuff to flow around a floated image for example). You just have to learn how to clear these floats. You can use one of these:

 

clear:left;

clear:right;

clear:both;

 

To clear various elements. It doesn't really matter that tables are easier (in fact once you get the hang of CSS layouts, they are much easier and more versatile. Table based layouts are a mess to look at). The fact is, table based layouts are outdated, you won't be able to make as nice layouts with them, and your search engine rankings won't be as good with them. Tables can be used for layout, and if you are an amateur developing sites for fun, then there is absolutely nothing wrong with them if they make you happy. But for anyone wanting to do things professionally, they need to learn to do layouts with CSS, or else in a few years their business is going to fail. Tables are outdated now - they will be even more outdated in five years, and in ten years.

 

CSS basics are REALLY easy to learn. A few hours can do it. Layouts with CSS on the other hand are much more difficult, and can take years to learn (Im still learning, and I've been doing them for a few years now!). But once you get the knack, you will never want to go back to tables, CSS is just so much more versatile.

[Lambneck]

Is using tables for layout outdated?

 

Want two columns?

Yes, you can do a div float left and a div float right.

 

But, below those two columns, if you want to go back to 3 columns or 1 column, any div you put underneath it will go up to the top and will not by default stay underneath the two floating divs.  That is a huge flaw.

 

With tables you don't have to worry about this.

 

Maybe I'm missing something, but for now, I'm sticking with tables.

 

 

Why tables for layout is stupid: http://www.hotdesign.com/seybold/

 

 

 

[dbrimlow]

What Haku should have said is that it takes years to UNLEARN the garbage code we used before CSS.

 

Here is a condensed example of the hard-learned, years of trial and error, yet SIMPLE things I recommend to anyone started css.

 

A table-less "wireframe" layout is quite simple. It's only when you start to jam in a bunch of divs with their own dimensions that things go horrifically awry.

 

Do NOT confuse "divs" with table cells. Do NOT try to emulate table cells with CSS. A "div" is only a place-holder for proper html tags, not a replacement.

 

Learn to use headings, paragraphs and list items and keep them in a logical flow in the markup from top to bottom! This is called using semantic markup.

 

Beat that into your head before anything else.

 

Do NOT EVER leave text alone in a "div", "span" or neither. Text should ALWAYS go into a logical block level container (heading, paragraph, list). Whenever possible toss a class or ID select into a heading, paragraph or ul/ol/dl tags rather than use a "div" - eg:

 

This is what most beginners do:

<div id="box">
<div class="clean1">
heading
</div>, 
<div class="clean2">
A whole mess of text
</div>,
<div class="clean3">
<ul>
<li>this is much</li>
<li>better than</li>
<li> having "divitus"</li>
<li>and code bloat</li>
</ul>
</div>
</div>

 

This is what beginners who "get" the semantic markup bit, but "miss" the divitus bit:

<div id="box">

<div class="clean1">

<h2>heading</h2>

</div>,

<div class="clean2">

<p>A whole mess of text</p>

</div>,

<div class="clean3">

<ul>

<li>this is much</li>

<li>better than</li>

<li> having "divitus"</li>

<li>and code bloat</li>

</ul>

</div>

</div>

 

This is what it took years of unlearning and relearning to finally make life easy - we don't need all the divs:

 

<div id="box">
<h2 class="clean1">heading</h2>, 
<p class="clean2">A whole mess of text</p>,
<ul class="clean3">
<li>this is much</li>
<li>better than</li>
<li> having "divitus"</li>
<li>and code bloat</li>
</ul>
</div>

 

Remember the whole point of CSS is to use LESS code in the markup, not replace all the table bloat with divs.

 

Learn proper HTML and use html 4.01 strict doctype to force you to code html properly.

The ONLY reason to EVER use an XHTML doctype of any kind is ONLY to force teach you to use lowercase tags and end  tags. Since you can do that in html 4.01 anyway (html 4.01 is flexible and things required in xhtml are optional in html), xhtml is unnecessary.

 

Essentially, xhtml 1 and xhtml 2 as used by 99.999% of the world is basically html 4.01 (only with funny closing tags on self closing elements) - if your charset shows a mime type "text/html", you are "serving" html 4.01.

 

The other .0001% who use xhtml CORRECTLY, as an application to parse XML, serving it in the mime type "application/xhtml+xml" are strange, brooding, secretive individuals who intentionally don't want IE of any kind displaying their web pages, thank you very much.

 

 

 

[haku]

I prefer XHTML just because it's cleaner than HTML - forcing all small characters, and all tags to be closed/self-closed. It's too bad that IE doesn't render the proper mime type, but even so, I prefer XHTML over HTML.

[racer x]

Do switch to css layouts. I am so happy I did. Here's a good ref to help you along:

 

http://css.maxdesign.com.au/floatutorial/

 

One for lists:

http://css.maxdesign.com.au/listutorial/

 

[dbrimlow]

I prefer XHTML just because it's cleaner than HTML - forcing all small characters, and all tags to be closed/self-closed. It's too bad that IE doesn't render the proper mime type, but even so, I prefer XHTML over HTML.

 

That was my argument, too, initially. So I understand.

 

It was pointed out to me 2 years ago that basically, due to HTML 4.01's "optional" nature, I could have my markup use the same exact clean all lowercase tags as XHML, anyway.

 

To illustrate how xhtml is really, in essence, html, I simply opened my XHTML pages in Dreamweaver (code view only of course), and ran a find/replace for all closing slash tags " />" to ">".

I then changed the doctype to html 4.01 strict and it worked like a charm - the only difference had been the closing slash.

 

HOWEVER! It was by coding using the XHTML doctype in the first place that got me used to using clean, lowercase markup. So I DO recommend it for beginners if for nothing else but that.

 

The REAL doctype key issue is to use strict and avoid transitional. Transitional was a bad idea right from the start because it gave coders the option of picking and choosing what they wanted to follow or not, as opposed to using the actual version spec. Most of those who use both html 4.01 and xhtml 1.0 "valid" transitional doctypes will be amazed at how poorly their code now validates to the real spec html 4.01 strict (I was). It was embarrassing how out of touch with the spec I was.

 

HTML 4.01 Transitional is really a horrible mishmash of permitting old HTML 3.2 and html 4.0 spec. The fact that it can actually "validate" as HTML 4.01 "Transitional" is ridiculous.

 

The spec for HTML 4.01 is what it is! Strict. Using fonts and inline stying is "deprecated", old table styling tags no longer exist like "height", "align", "valign" etc.

 

The whole transitional concept was well intentioned, to allow coders to take advantage of any new features in the spec, while giving them time to re-code their website to remove elements no longer in the spec at all.

 

But, as usual, it just confused everybody who thought it simply meant that "transitional" was its own valid doctype (because it validates on the validation tool, doesn't it?).

 

It actually promotes ignorance, tag soup and poor coding practice from beginners.

 

Using it while in the progress of actually transitioning a site is necessary for those of us with large static html web pages - I still have @ 70 or so static and 30 or so dynamic pages that use transitional (these formerly used NO doctype, quirks mode).

 

But I have no professional respect whatsoever for anyone who uses transitional doctypes today for new web page/site coding.

 

 

 

[haku]

This site is using a transitional doctype! 

 

But I agree, I only use transitional myself. There are a couple points I don't like about it, one being that form elements have to be wrapped in a div or a p tag, but as you say, it promotes much better coding.

 

As for the HTML-XHTML debate, I can see why using XHTML doesn't matter, but I haven't seen any reasons to actually not use it. When it comes down to it, I think that it's really just a preference, and that they are both essentially just as good as each other.