Tables vs. layers

def1 · Oct 25, 2005

Ok well I have the same site, one with tables and the other with layers.

Similarities-

*Both like fine in ie, firefox, and opera.
*They both accomplish the exact same thing.
*Both dont break up when you higher your text size.
*Both allow me to write as much as I want without splitting cells.

Differences-
*With the tables the white bg follows all the way through leaving only the gray lines on the sides like how there supposed to be, while layers only leave the white bg where the text is.
*When you raise your text size with the tables the white bg will follow the text allowing it to stay readable, while once you reach a certain point on the layers it starts exiting the layer and going onto the gray lines bg.
*The only bad thing about the tables is that the two image links at the top split apart but not a big deal, while the css keeps them intact

Overall I like the tables more because it looks better.

You judge

Tables- www.bumrecords.net
Layers- www.bumrecords.net/test.html

Rowan W · Oct 25, 2005

First of all the appearance of your site isn't simply determined by what tags you use. Just because it looks right when using tables doesn't mean you can't make it look the same with Divs, you're code simply isn't finished/proper to display the layers version how you want it.

Now, the reason your page doesn't look the same with Divs is because your code simply isn't up to scratch. Did you notice that every paragraph tag on the page has "style="text-align:left"" in it? This wouldn't cause any major problems, but it makes the code bloated, difficult to work with and is completely and utterly unnecessary to have.

One reason why the page might not be displaying how you want it to would be because you have 5 absolutely positioned divs that have nothing in them. Divs are supposed to contain content, and yours don't contain anything except co-ordinates and colours.

Divs can do anything tables can plus more, but Divs and their styling take a long time to get used to.

eli03 · Oct 25, 2005

When you raise your text size with the tables the white bg will follow the text allowing it to stay readable, while once you reach a certain point on the layers it starts exiting the layer and going onto the gray lines bg.

There's a solution on this problem, i read it somewhere before in other the forum.

wasistdas · Oct 25, 2005

Consider me an old idiot but I prefer tables. More stability, no prob to PDAs and no toher bells and wistles. I used to use DHTML and CSS very slightly. Layers make you code fat. I refer light coding.

Rowan W · Oct 25, 2005

wasistdas said:
Layers make you code fat. I prefer light coding.

Code:

<table cellspacing="0" class="tableclass">
  <tr>
    <td class="cellclass">Two words</td>
  </tr>
</table>

Code:

<div id="divid">Two words</div>

See what I'm getting at here?

wasistdas · Oct 25, 2005

You forgot id descriptions in CSS.

will7 · Oct 25, 2005

ID Descriptions? Don't you just link to an external .css file with your definitions in?

So, you have to add:

Code:

<link rel="stylesheet_name" type="text/css" href="filename.css" />

To the <HEAD> section. I've only just started using CSS, but so far, even though I have hit a few stumbling blocks, once I get them sorted, I'll be fine.

I prefer CSS myself, except maybe in some cases tables might be better but I haven't experienced any yet

def1 · Oct 25, 2005

What Im getting at is I can basicly do the same thing with tables as I can do with css, so can someone please explain to me whats so great about css. For sure I intergrate css into my websites but overall its tables with css here and there and it looks very good.

What does css do different than tables?

will7 · Oct 25, 2005

I don't know, as far as I can see, it just gives much shorter and cleaner coding and also makes updating much easier by just needing to change one file and it can change the style of the whole site.

Rowan W · Oct 25, 2005

def1 said:
What Im getting at is I can basicly do the same thing with tables as I can do with css, so can someone please explain to me whats so great about css. For sure I intergrate css into my websites but overall its tables with css here and there and it looks very good.

What does css do different than tables?

Why Tables for Layout is Stupid

def1 · Oct 25, 2005

[qoute]It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.[/qoute]

explain that

[qoute]Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web. [/qoute]

explain that as well.

-------------

CSS has its benefits but tables are easier to code. I think CSS is good but I think it should be integrated into table designs and not used as a whole

Rowan W · Oct 26, 2005

def1 said:
[qoute]It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.[/qoute]

explain that

[qoute]Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web. [/qoute]

explain that as well.

1. It's because of the amount of code needed to make different tables look the same. I'm currently working on a site that uses a lot of tables (unnavoidable) and i have to write a completely new table and stylesheet for every page. This takes time and a lot of code. When it comes to updating the look of the site, guess what will happen - I'm going to find a new employer.

2. It's difficult for a screen reader to read a table based layout the way you want it to, because tables don't flow/unfold gracefully (or at all). With a properly laid out web page it's easy to provide the content in a structured layout that can be read 'fluently' by a screen reader. Take CSS Zengarden for example: With styling - Without styling.

You can see how well the unstyled content degrades gracefully down the page, this makes it both easy to modify and easy to read (for those with reading difficulties).

I'm not sure about PDAs and cell phones though, as I don't use them for the web.

Don't forget that writing a basic table could take up 3 or 4 times more space on a html page. This increases file size and makes editing pages difficult because you have to sift through all the <tr>'s, <td>'s, etc...

Oh and by the way, I just did a rough version of your site from the csszengarden template - http://catachandevils.laserforums.com/bumrecords/sample.html

edit: I just viewed the page in IE for the first time and noticed a slight mis-alignment. But you get the idea, it took me about 10 minutes to get to that point.

def1 · Oct 26, 2005

I do want to know how you got it to look like my images on the side, I'd be willing to throw away all those images for text based nav. CAn you tell me how

Ju5T · Oct 26, 2005

Tables.

Rowan W · Oct 26, 2005

def1 said:
I do want to know how you got it to look like my images on the side, I'd be willing to throw away all those images for text based nav. CAn you tell me how

CSS

Code:

#linkList {
	position:absolute;
	top:203px;
	width:198px;
	list-style-type:none;
	border:3px double #bbb;
	border-top:0;
	margin:0 0 0 1px;
	padding:0 2px;
}
#linkList a {
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	display:block;
	background-color:#900F0F;
	margin:0 0 1px 0;
	padding:8px 0 1px 0;
}
#linkList a:visited {
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	display:block;
	background-color:#900F0F;
	margin:0 0 1px 0;
	padding:8px 0 1px 0;
}
#linkList a:hover {
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	display:block;
	background-color:#933F3F;
	margin:0 0 1px 0;
	padding:8px 0 1px 0;
}

HTML

Code:

<div id="linkList">
<div id="linkList2">
<div id="lselect">

<a href="http://csszengarden.com/" title="AccessKey: a" accesskey="a">Home</a>
<a href="http://csszengarden.com/" title="AccessKey: b" accesskey="b">News</a>
<a href="http://csszengarden.com/" title="AccessKey: c" accesskey="c">Artists</a>
<a href="http://csszengarden.com/" title="AccessKey: d" accesskey="d">Reviews</a>
<a href="http://csszengarden.com/" title="AccessKey: e" accesskey="e">Games</a>
<a href="http://csszengarden.com/" title="AccessKey: f" accesskey="f">Message Board</a>
<a href="http://csszengarden.com/" title="AccessKey: g" accesskey="g">About</a>
<a href="http://csszengarden.com/" title="AccessKey: h" accesskey="h">Advertise</a>

</div>

Tables vs. layers

Established Member

Established Member

VIP Member

Established Member

Established Member

Established Member

VIP Member

Established Member

VIP Member

Established Member

Established Member

Established Member

Established Member

Established Member

Established Member

Cortona.org

111116.xyz

DrShephard.com

Fidado.com

Chime.co

Tweak.co

trafficload.com

MineBird.com

GorgeousBeauties.com

Wand.network

Similar threads

We're social

Cortona.org

111116.xyz

DrShephard.com

Fidado.com

Chime.co

Tweak.co

trafficload.com

MineBird.com

GorgeousBeauties.com

Wand.network

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling