Layers vs Tables...!

**M.Zeb Khan** · May 12, 2004 09:14

As Layers are easy than Tables, because we can easily Drag them due to our requirements, i thought i will USE Layers in my new site, but just want to know that Layers are good or Tables are good.....??

**Rincewind** · May 12, 2004 09:29

Layers - New modern and the way forward for web design

Tables - How people uses to do it.

There is an on going argument about which is best. But if your just starting out - go for layers.

**vgarcia** · May 12, 2004 09:31

Never say layer again. It's as dead as Netscape 4.

If you're talking about CSS vs. tables, I'll choose CSS almost every time. When I won't choose CSS, I'll choose tables+CSS, and that's pretty rare.

**M.Zeb Khan** · May 12, 2004 09:38

Originally Posted by vgarcia

Never say layer again. It's as dead as Netscape 4.

If you're talking about CSS vs. tables, I'll choose CSS almost every time. When I won't choose CSS, I'll choose tables+CSS, and that's pretty rare.

But, I think 80% users use Internet Explorer I guess!
I have'nt experience with CSS

**fatnewt** · May 12, 2004 09:58

Then learn CSS. There are plenty of resources here to help you along the way.

**Rincewind** · May 12, 2004 10:23

I have'nt experience with CSS

If you have made layers already, then you have used CSS already.

And I'll say Layer. Though the <layer> tag went out of use a long time ago, the use of a <div> tag, or some other element, allong with css to possition it and set a z-index is a layer. It may not be in <layer> but it is still a layer.

CSS is an over used term. A style sheet on it's own doesn't do anything. It is the combination of a style sheet and, in this case the <div> element that makes the effect of layers. But it is perfectly posible (and IMHO prefferable) to not use layers or tables. Rather use the flow of the page and float deffinitions to create the layout. Example, the w3c home page. Thus when discussing layouts, you have to distinguish between more than just Tables and CSS. You need to define what from of CSS and how that CSS is being used. Not all CSS layouts use absolutly positioned div tags. (absolutly positioned div tags with a z-index value - what a mouthfull. I'll just say "layer" instead)

**Paul O'B** · May 12, 2004 11:55

Hi,

Layers (as produced by Dreamweaver) are almost as bad as using tables.

They just swap inflexible table cells for inflexible absolutely positioned elements with tons of inline code.

With css the presentation should be separated from the content so inline styles are definitately a non-starter

As Rincewind mentioned above its better to let the page flow and elements can follow each other logically. Of course this does take practice and learning to achieve but it is worth it in the end.

I also agree with Vinnie that if a design can't be done in css then either change it or use a basic table + css. However I haven't needed to use a table for so long now that I've practically forgotton how to use them.

Paul

**M.Zeb Khan** · May 12, 2004 19:35

ok, Thanks for replies..

But my 1 site has used layers many many times, now what i do with that site

? is there any tool which will convert it to Tables, ??

I am trying on Dreamweaver to Convert it but i am getting the following message :

Originally Posted by Dreamweaver error

The file can not be made compatilbe with 3.0 Browsers because it contains nested layers

Now what should i do ...??

**Paul O'B** · May 13, 2004 00:04

But my 1 site has used layers many many times, now what i do with that site

? is there any tool which will convert it to Tables, ??

Don't convert it to tables!

Convert it to proper css - there are no real shortcuts other than learning how to do it properly

.

(BTW Dreamweaver won't convert your layers to tables unless you have designed the page without the layers overlapping. As for version 3 browsers - don't bother about them.)

If you post your code we can give you some pointers

Paul

**M.Zeb Khan** · May 13, 2004 02:17

Here is the Code Mr. Paul

**momos** · May 13, 2004 05:13

3 important remarks already:

first loose the "<font>"-tags
second put all styling-attributes in your CSS-files
put the links to your stylesheets in the head section of your html-file

Do this already and if I have the time I'll give some more pointers...

**M.Zeb Khan** · May 13, 2004 05:22

Thanks momos!!

Waiting For more Pointers........

**Paul O'B** · May 13, 2004 06:01

Hi,

Inline with the suggestions made above

Move stuff like this :

div id="Layer1" style="position:absolute; width:477px; height:13px; z-index:2; left: 290px; top: 18px; background-color: #658FD1; layer-background-color: #658FD1; border: 1px none #000000">

Into a format like this :

Code:

div id="Layer1" >content etc...</div>

by putting the styles in your css file :

Code:

#Layer1 {
position:absolute; 
width:477px; 
height:13px; 
z-index:2; 
left: 290px; 
top: 18px; 
background-color: #658FD1; 
border: 1px none #000000 
}

If you are going to use a table then style as much as possible using css.
[code]
<table width="100%" border="0" cellspacing="0" cellpadding="0" bordercolor="#000000" bgcolor="#000000" height="95"><
[code]
change into :

Code:

<table id="example" cellspacing="0" cellpadding="0">

Then the ccs can be :

Code:

table#example {
width:100%;
border:1px solid #000; 
background:#000;
height:95px;
}

If you want to get rid of the tables altogether then the easiest thing to do is to start from scratch with a clean slate. This will be easier than converting existing tables.

Hope that helps.

Paul

**M.Zeb Khan** · May 13, 2004 07:11

Thanks Paul , for the Good Info...

I have saved this Topic on "Save As.." once i will back to home, i will work on it and i will change my content to that design...

tell me please this will Speed up my Pages...

As www.batkhela.com take time on loading via Dialup Connections but its Fast on other connections like "BroadBand"...

**momos** · May 13, 2004 07:17

When reworked, post your new code for an other review, so we can help some more...

**ronaldb66** · May 13, 2004 07:23

In relation to this subject, perhaps an interesting article by Andy Budd: "An Objective Look at Table Based vs. CSS Based Design".
The comments on the piece are worth while reading, too.

**Nick** · May 13, 2004 15:28

Just a quick fact, users using IE still make up for 90% of the hits on my site :\

**vgarcia** · May 13, 2004 16:43

Originally Posted by Possibility

Just a quick fact, users using IE still make up for 90% of the hits on my site :\

IE can understand CSS layouts as long as you don't get too creative with advanced properties and selectors.

**thafish** · May 14, 2004 00:35

This is quite the interesting thread. I just want to add that I followed the advice of this site a couple of weeks ago and redesigned my website without tables. It worked great in IE, but mozilla and netscape ignored my positioning on certain parts. for example: left:150px was ignored whether it was absolute or relative. I did not try a float, I also noticed that netscape doesn't like negative z-index so I fixed that and still had positioning issues so I gave up and created a simple table instead. I want to work without tables, but I am still new to this concept. Nonetheless, CSS is definately amazing when netscape isn't being crabby.

**mmj** · May 14, 2004 00:55

"layer" is a concept that DreamWeaver uses. It is a bit like <div> in that each layer in DreamWeaver will correspond to a <div> element in the code somewhere. This is a DreamWeaver-only concept though and is not part of HTML.

Tables and <div>s have different functions, which are almost completely exclusive. That is, in some situations it would definitely be better to use <div> and in other situations it is definitely better to use tables. Only very rarely is there a situations where it is not obvious which to use (and in many cases, this means you shouldn't use either).

A table should be used for data that needs to be organised in rows and columns. For example, if you've ever read a technical book you will see some illustrations with names such as "Table 1.3". It is for presenting data in rows and columns. Think "spreadsheet".

A <div> is used in conjunction with CSS for controlling the presentation of an element on screen. It gives you very powerful controls over positioning of the element. A full description of using CSS would take too long - read our CSS book!

In the past, it has become customary for people to use tables for the purpose of layout. This is for very good reasons. Firstly, it is much easier in a WYSIWYG editor to visualize layout in tables than divs all over the place (although DreamWeaver has recently got very good at the latter). Secondly, although CSS has been with us since 1996, you could not until recently rely upon browsers to support CSS properly, and there was no alternative.

Now, however, CSS is fulfilling the purpose for which it was intended way back in 1996. The problem now is that many people are still in the habit of using tables for layout, which means that browsers and other clients can still not rely on a table containing tabular data.

**Paul O'B** · May 14, 2004 01:10

Hi,

Originally Posted by thafish

It worked great in IE, but mozilla and netscape ignored my positioning on certain parts

Well (without sounding too harsh) that's probably your fault becaues you didn't understand what you were doing

.

If you posted your problem on the forum here we could have sorted you out in seconds

CSS does have to be learned properly first before you can apply it which is why a lot of people say it doesn't work. I can never get tables to work or do what I want but I don't say that its the tables fault - it's my fault because I can't be bothered to learn how to do it properly ( I don't need to anyway because I can do it in css anyway

.

CSS is just another useful tool in the webdesigners toolbox and should be applied correctly and in the correct situations. Sometimes the layout may be easier with a table and suit the job in hand then that is fine. However with a bit of thought (and knowledge) most designs can avoid nested tables and be accomplished with css.

Not to say that CSS is perfect - It's concept is good but its the browsers implementation of it (specifically IE) that causes most problems. Life would be much easier if it worked cross browser straight out of the box - but it doesn't, so we have to live and work with what we've got.

As an aside the last few people who admonished my 3 col css designs sent me table layouts to do the same thing as my 3 col layouts and in fact their tables worked in less browsers than my designs did.

Only time will tell I suppose

Paul

**thafish** · May 14, 2004 10:41

I know it is my fault, I am very happy to admit when I make a mistake, I am still a rookie at this stuff, but I am getting better. Anyway, I will put the layout back together using css without tables and I will look for help this time rather than trying to do it myself. Thanks for being here for us newbies.

**hulksjedi** · May 15, 2004 20:13

Tables are for data only. Layers are for design. The tables are originaly made for data and not for design.

;-)

**Dark Tranquility** · May 16, 2004 03:17

Originally Posted by hulksjedi

Tables are for data only. Layers are for design. The tables are originaly made for data and not for design.

;-)

The only layers I really enjoy using are those of Photoshop

for HTML, nothing compares to <div> tags

**hulksjedi** · May 16, 2004 09:11

Originally Posted by Dark Tranquility

The only layers I really enjoy using are those of Photoshop

for HTML, nothing compares to <div> tags

Sorry! i mean DIV tags. And if you use photoshop, i recommend you to use Fireworks MX, its a better soft for webdesign

User Tag List

Thread: Layers vs Tables...!

Thread Tools

Display

Layers vs Tables...!

The table debate

Bookmarks

Bookmarks

Posting Permissions