468,119 Members | 1,911 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,119 developers. It's quick & easy.

Oh, wow! Tableless layouts!

I got on the tableless layout bandwagon early on, and thought it was a
really cool way to lay out a page. I don't know why I thought it was so
cool, except I guess I fell for the "oh, cool" talk.

I never did really find out why this is a better way to lay out a page,
except the slogan "tables are for tabular data...", and well, CSS is
the "way to fly".

So I converted my basic blog layout to tableless, and it wasn't all
that hard, really. Only trouble is, it didn't print right. I used to
work at an HP printer call center, and I'd get a fair number of people
complaining that their printer didn't print out some web pages right.
It wasn't until I saw how my table layout would print correctly, but
the tableless layout wouldn't, that I started looking at the print
preview, and lo, the print preview -did- give a true preview. What you
see on the screen is not always what you get on the printer. Often, not
even close. But the print preview on IE and FireFox both showed the
same thing.

So lately, I've been trying out Dreamweaver, and I love it. It really
likes you to use tables, and/or absolutely positioned divs. I've been
messing around with new layouts, and have been trying some I've grabbed
online. Ah, another problem.

OK, when Dreamweaver doesn't display a CSS layout like IE or FF would,
that's Dreamweaver's fault. The layouts I've been finding online, some
it displays accurately, some it doesn't. But it would be nice...

I'm looking for your basic 3 column layout that prints as it displays
on the browser, without kludgey fixes for browser quirks, and still
displays pretty much the same on different 'modern' browsers. I don't
care what it looks like in Netscape 4. One that the HTML code isn't too
intricate. One that's better than a table layout, IOW.

I have yet to find such a beast. There's one that I like, even though
Dreamweaver doesn't display it anywhere near what a browser displays,
it works good on IE an FF, and is pretty flexible. But the HTML code is
absurd. The middle column comes first, then the first column, then the
last column.

All that nesting for something that can be done with 3 rows and 3 td's!
And all that CSS! Dozens of extra lines of CSS and HTML for the same
basic result. The user's experience is no different, the developer's
experience is WAY different.

But I guess all that extra work, loss of clarity, kludging and hacking
and loss of maintainability is the price you've got to pay for doing it
"right". After all, you're "not supposed to use tables except for
tabular data"...

If you're that anal.

Jul 21 '05 #1
6 3540
You mean marking up HTML semantically correct so that it reads like a
regular, unstyled document should? Because that's the idea behind
getting rid of tabluar layout.

It seperates the Styling content from the actual informational content,
allowing you to swap out stylesheets easily without having to change
the physical markup at all.

I fail to see how "If you're that anal." applies to someone who wants
to help _everyone_ be able to read their website, regardless of
browser, disablity or preference. Writing semantic markup _correctly_
will even reduce load times as you should be using less redundant
markup.

I think your problem is that you haven't learned how to efficently lay
out the page without reverting back to nesting divs.

CSS layouts aren't perfect yet, but with every new revision, it's
becoming easier and easier to stop using tables and start using markup
that makes _sense_.

Jul 21 '05 #2
gl***@potatoradio.f2s.com wrote in
news:11*********************@f14g2000cwb.googlegro ups.com:
And all that CSS! Dozens of extra lines of CSS and HTML for the same
basic result. The user's experience is no different, the developer's
experience is WAY different.

But I guess all that extra work, loss of clarity, kludging and
hacking and loss of maintainability is the price you've got to pay
for doing it "right". After all, you're "not supposed to use tables
except for tabular data"...


I've had just the opposite experience. I find tableless layout much
clearer, not kludgy, and much easier to maintain. I only have to
modify one file to change an entire site's look when done correctly.
I do not go so far as to keep everything out of tables. If a table
works best for some things, I use it. For instance, I often find it
easier to line up form input fields with the explanatory text in
tables. I (right or wrong) justify the use to myself by thinking of
the explanatory text and the input fields as tabular data.

To take a layout out of tables and change a large site over to
tableless layout just because "tables are for tabular data" is
somewhat silly IMO, but to change a page here and there as part of
your learning process is playing it smart. To come up with a new
design/layout that does not use tables and implement new pages using
that method eliminates lines and lines of tr and td that you have to
wade through IMO, simplifies reading the source tremendously and
places your CSS in one file to further simplify maintenance.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :(
http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein
Jul 21 '05 #3


Nathan wrote:
You mean marking up HTML semantically correct so that it reads like a
regular, unstyled document should? Because that's the idea behind
getting rid of tabluar layout.
That's no problem with very simple pages with linear structure. But
when
you want say, the good old 3 columns, it gets interesting. A simple
3 column layout with vertical alignment at the top works without any
CSS.
It seperates the Styling content from the actual informational content,
allowing you to swap out stylesheets easily without having to change
the physical markup at all.
I'm fine with seperating the -styling- (fonts, colors, borders) from
the informational content, but changing the -layout- of a page is
often more a part of the informational content than the 'style' of
it.
I fail to see how "If you're that anal." applies to someone who wants
to help _everyone_ be able to read their website, regardless of
browser, disablity or preference.
I mean those who say something flatout, period, always, end of story,
without reason. Another area of 'anality' is with frames. Like you
should never use them, no matter what your purpose. I've seen some
sites make wonderful use of frames.
I think your problem is that you haven't learned how to efficently lay
out the page without reverting back to nesting divs.
Well, that's pretty much it in a nutshell, although I'm not reverting
to
anything. The problem is that nearly all of the no-table layout have
problems that table layouts don't have. Either they don't print right,
or they use way more code, either CSS or HTML or both, or they fall
apart in different browsers without extra, extra effort, or they
look even worse with CSS turned off in the browser.

CSS layouts aren't perfect yet, but with every new revision, it's
becoming easier and easier to stop using tables and start using markup
that makes _sense_.


When a page is a 3 column layout with a header, a two row table makes
enough sense to me. Yes, I'd like to be able to restructure the doc
in a seperate stylesheet, but the ones I've looked at are all so very
different in how they achieve the same effect, even differing in which
order the semantically identical ('left column', 'middle column',
'right
column') come in the HTML code.

I'm just looking for a layout I can use and learn from. Thanks for
your comments.

Jul 21 '05 #4


Uncle Pirate wrote:
I've had just the opposite experience. I find tableless layout much
clearer, not kludgy, and much easier to maintain. I only have to
modify one file to change an entire site's look when done correctly.
I'd like to see some examples.

I do not go so far as to keep everything out of tables. If a table
works best for some things, I use it. For instance, I often find it
easier to line up form input fields with the explanatory text in
tables. I (right or wrong) justify the use to myself by thinking of
the explanatory text and the input fields as tabular data.
That's a perfect example of a table perhaps not making semantic
sense, but getting the job done.
To take a layout out of tables and change a large site over to
tableless layout just because "tables are for tabular data" is
somewhat silly IMO,
I agree. Yet I see so much "shouldn't use tables" without any
reason why, except for 'semantics', which I'm not perfectly clear
on what exactly they mean by that.
but to change a page here and there as part of
your learning process is playing it smart. To come up with a new
design/layout that does not use tables and implement new pages using
that method eliminates lines and lines of tr and td that you have to
wade through IMO, simplifies reading the source tremendously and
places your CSS in one file to further simplify maintenance.


Well, I'm considering just your basic 3col layout. The columns might
have different divisions within, which would still be the case with
a tableless layout. But basically, I don't see the need for rows
and rows and td's all over the place, and would recoil at that sort
of code as well. But it seems that if a page is going to have lots
and lots of different divisions, it's going to be complicated no
matter how you look at it, and I have yet to see a tableless layout
that didn't require nesting of divs, which means getting into the
html to move things around.

But I'm willing to look at an example or three...

Thanks for your comments.

Jul 21 '05 #5
gl***@potatoradio.f2s.com wrote in news:1119029910.494081.249790
@g47g2000cwa.googlegroups.com:


Uncle Pirate wrote:
I've had just the opposite experience. I find tableless layout much
clearer, not kludgy, and much easier to maintain. I only have to
modify one file to change an entire site's look when done correctly.
I'd like to see some examples.


http://alamo.nmsu.edu/computer Some of the rest of the site is done by
others mostly using Netscape Composer and contains lots and lots of
those tr and tds I was talking about. It's horrible to try and read
that code full of font size, b and i elements, etc. Very difficult to
read and make minor edits.

http://abateofnm.org
http://motorcyclefun.org
http://singlesoterocounty.org

These sites are far from perfect as I am still learning a lot too.
Throughout my career which has transformed from computer software
maintenance before our network so it was machine by machine moving into
building a network from nothing to over 400 workstations to web
development. I've always learned best by doing so taking care of
several websites continually trying new things and learning new methods
has been a good thing.

Now, I am learning php and incorporating that. I'm glad I've learned
the HTML and CSS I have because that make the job of writing programs
that output HTML much easier.
To take a layout out of tables and change a large site over to
tableless layout just because "tables are for tabular data" is
somewhat silly IMO,


I agree. Yet I see so much "shouldn't use tables" without any
reason why, except for 'semantics', which I'm not perfectly clear
on what exactly they mean by that.


You shouldn't. But that doesn't mean that you have to rush to "fix"
every old page. That was once pretty much the standard having no other
ways to control layout. But do you really want to create *new* pages
with 10 year old technology?
but to change a page here and there as part of
your learning process is playing it smart. To come up with a new
design/layout that does not use tables and implement new pages using
that method eliminates lines and lines of tr and td that you have to
wade through IMO, simplifies reading the source tremendously and
places your CSS in one file to further simplify maintenance.
Well, I'm considering just your basic 3col layout. The columns might
have different divisions within, which would still be the case with


If there is a need for different sections within a section, by all
means do it. There could even be a need to have a table within a div
with other things.
But I'm willing to look at an example or three...
I gave you three plus a bonus. My weak area is in design so they
aren't real fancy, but they validate (should anyway, I don't check with
every edit) and follow the idea of semantic markup mostly. As I say,
I'm still learning.
Thanks for your comments.


You're welcome.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein
Jul 21 '05 #6
gl***@potatoradio.f2s.com wrote:
I'd like to see some examples.


I've always liked Ben's templates:

http://www.benmeadowcroft.com/webdev...s/spider1.html

--
-bts
-Back from vacation and catching up.
Jul 21 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by eBob.com | last post: by
17 posts views Thread by DaveG | last post: by
1 post views Thread by Thorsten Kaben | last post: by
16 posts views Thread by Rob Nicholson | last post: by
reply views Thread by plselina011 | last post: by
reply views Thread by hobgoodoreneyhb | last post: by
reply views Thread by savare.grove | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.