5-25 tables in web pages

**csg1000** · 05-25-2007, 07:44 PM

what are anyone's thoughts regarding tables in web pages.

We are making a 3 column page and wondering if the way to go is with tables? Site/pages will be linked to a CSS file ..

I think I read and /or heard modern style tries not to use tables for this kind of thing

Content in the columns [divided up] text links..
ie..a little snipt of text which will link to the real content on another page
Kind a-like http://www.newconsumer.com

Except our site is only going to have the 3 left columns.

thanks for any feed back
Sincerely, Stewart

**WebJoel** · 05-26-2007, 09:34 AM

Most assuredly, not TABLEs as the page sited isn't 'tabular data' (e.g., 'like a spreadsheet with comparitive listings').

http://www.hotdesign.com/seybold/index.html

TABLEs are read twice by a browser before loading onto the user's screen, and the table will not render until it is 'read' the second time. This causes the delay that typically occurs when viewing a large columns of table-built layout. Complicate things, --start 'nesting' table-inside-of-table... it's a nightmare for user-devices. And there is all that non-semantic markup (images used for spacers, etc), -which all add up to page-bloat.

The site you cited could be easily created with a vertically-expanding 'wrapper' that contains three columnular DIVs of "height:auto;" so as to 'expand' as any additional DIV topic should be added. And if any column expands 'taller' than the current container DIV, it too 'expands', thus keeping the page together.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>

<style type="text/css">
#wrapper {width:95%; height:auto; margin:25px auto; border:3px dashed silver;}

#left {width:23%; border:1px solid gray; height:auto; padding:10px 6px; float:left;}
#middle {width:46%; border:1px solid gray; padding:10px 6px; height:auto; float:left}
#right {width:26%; border:1px solid gray; padding:10px 6px; height:auto; float:left}

#left div, #middle div, #right div {border:1px solid red; padding-bottom:14px;}
#left div h3, #middle div h3, #right div h3 {margin:5px;}
</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<div id="wrapper">

<div id="left">
<div>
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>

<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>

</div>

<div id="middle">
<div>
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>
<div>
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>

</div>

<div id="right">
<div>
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. </p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. </p>
</div>
<div>
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. </p>
</div>
</div>

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

</body>
</html>

Here is a quick-n-dirty example (took me about 10-mins to write?) of what I mean. Important css is BOLD
Validates, looks exactly the same to IE as to Fx.
As you add new "<div></div>" to any of "#left", "#middle" or "#right" DIVs, the "wrapper DIV" exapnds. Note the 'clearing DIV' at the very end. -Must remain just before the closing of "#wrapper" else the visible dotted silver border 'collapses', as 'floating' removes content from page.

This would work for what you described. Some tweaking to make it 're-size' for smaller resolutions is easily added.

Enjoy.

**ray326** · 05-26-2007, 10:59 AM

I think I read and /or heard modern style tries not to use tables for this kind of thing

As Yoda would say (Star Wars is 30 you know), there is no "try". Modern web pages do not use tables for layout.

**csg1000** · 05-27-2007, 04:14 PM

WebJoel
Your the MAN!! THANKS!!
10 minutes..WOW!! I wonder what you can do in 10 hours ..
because, that is just what we got this other fellow to do and this is all he got done.

I had suggested we wanted something based on http://www.newconsumer.com
except only 3 columns and he took me literally and started to recreate the page.
Said he had to hand code this
http://metazen.org/index.php/site/SampleNav
Well he did a good job so far but, I don't think we can afford the time $$ he takes to do what he does..

We are building a Internet RESOURCE Membership PORTAL for internet marketers and business people.

for the moment, I was wondering maybe you have a clue why after I downloaded a 3 column temp from the DreamWeaver8 temps.
their temp has:
across the top ................. Site Name
below across ....................global link: global link: global link; global link etc...
next space down ..............Page Name
Below that , across ..........breadcrumb; breadcrumb; breadcrumb; breadcrumb; breadcrumb; etc..
Below that .......................search box
Left column or nav column with .........links down
Middle column with graphic placeholders and 4 or 5 sections down with links
Right column ............ the same
Bottom across more text links,,,,,,, about us link; site map link contact us link; Privacy Policy ... etc..
==========
When I open the DreamW temp on my desk top, it comes in fine. But, when I drag it to the folder with the css, and then open it, all the fields just nest below each other straight down the page..
got a clue??

Thanks, Stewart

edit by admin: no soliciting and no contact info permitted on the forum, thank you