Why are tables a bad idea for layout? [Archive]

Click to See Complete Forum and Search --> : Why are tables a bad idea for layout?

Andrewpca

10-06-2005, 04:38 AM

ok - i'm just about to begin writing a site.

I have heard it said that tables are a BAD idea for a page layout.

Why is this? Can anyone tell me an alternative?

I know how to write HTML, a little bit of javascript, and am now learning PHP.
I've got absolutely no idea what things like CSS are! I'm writing the site myself to save myself some money in a business start up - so i'm no web developer.

you can see the existing site at www.p-c-a.co.uk

This will be replaed with something aesthetically similar but with a login section and a MySQL database behind it.

So - if someone thinks that tables are a bad idea - best stop me now before I start.

I would value any input...

Thanks
Andrew

ForeverIrise

10-06-2005, 04:46 AM

I have heard it said that tables are a BAD idea for a page layout.

Why is this? Can anyone tell me an alternative?

I've got absolutely no idea what things like CSS are!

There's your first problem. Learn CSS, it give your more control over your layout and it saves bandwidth.

http://www.w3schools.com/css/default.asp

You can also find a bunch of references on the CSS portion of this site. Good luck.

LiLcRaZyFuZzY

10-06-2005, 05:06 AM

http://phrogz.net/CSS/WhyTablesAreBadForLayout.html

LiLcRaZyFuZzY

10-06-2005, 05:07 AM

http://kimihia.org.nz/articles/tables/

Charles

10-06-2005, 05:31 AM

From the HTML 4.01 Specification:Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.http://www.w3.org/TR/html401/struct/tables.html#h-11.1

Andrewpca

10-06-2005, 09:15 AM

ok - I see...I have taken this on board. A style sheet is pretty easy to write and i've done a basic one. just with font colours backgrounds etc etc..

Now....I used tables for positioning columns of text, images, etc etc...

If I don't use tables how do I do this? How do I get something say 2/3 of the way across the page?

You can see my site at www.p-c-a.co.uk

Andrew

LiLcRaZyFuZzY

10-06-2005, 09:22 AM

well, you would use <div> tags for dividing your page in different blocks, e.g. banner/menu/content/footer
use <p> tags for text paragraphs
unordered lists for menus

then you can position your elements by floating them, or "positioning" them

NetNerd85

10-06-2005, 09:30 AM

Use a combination of div tags and tables, limiting yourself to one or the other is a serious mistake.

Andrewpca

10-06-2005, 09:34 AM

ok. I use <div> tages already. and <p> tags. that's all easy enough.
How do I float things though? have you an example of some 'position' coding?
Just one line will give me enough to be able to see how it works.

Thanks.

Brollachan

10-06-2005, 09:48 AM

I *think* it would go as follows...

In the CSS...
.example {
position: absolute;
left:100px;
top:100px;
}

In the BODY...
<div class="example">
INSERT WHATEVER
</div>

Andrewpca

10-06-2005, 09:51 AM

thats great. Thanks.

Andrewpca

10-06-2005, 09:56 AM

oh - one other thing....if I write a style sheet. presumably I save it as a .css do I?
And does it have to have any opening tags like html does?

The Little Guy

10-06-2005, 10:41 AM

Here (http://www.w3schools.com/css/tryit.asp?filename=trycss_float6) is an example of a home page with the code to go along with it. it is fairly easy. you can also edit their code, and update it without saving.

The Little Guy

10-06-2005, 10:48 AM

If your going to write an internal style sheet you would use these tags to enclose the style which go between <hea> and </head>:

<style type="text/css">
The CSS Here
</style>

If your going to write an external style sheet, you dont need those two tags, and then you would put the following code in between the <head> and </head> tags:

<link rel="stylesheet" type="text/css"
href="mystyle.css" />

Charles

10-06-2005, 10:52 AM

LiLcRaZyFuZzY

10-06-2005, 11:11 AM

And does it have to have any opening tags like html does?
nope

LiLcRaZyFuZzY

10-06-2005, 11:22 AM

or (not supported by older browsers, i think)

<style type="text/css">
@import "style.css";
</style>