/    Sign up×
Community /Pin to ProfileBookmark

"table-less" Web design: Where to begin?

OK! I surrender!

I just lost an opportunity for a great job because they would have liked to see more of a focus on table-less design.

I’ve read a lot about this approach to web design and implementation. I have been so mired in the use of tables and now I’m petrified that I’ll have to go through a giant learning curve to convert my sites using table sparingly and for their intended purpose (data/results presentations).

I need some guidance on where to start in two forms:

1.) a snippet of code for a page using no tables but with, oh, let’s say 3 columns for a vertical menu, header information and a content area,
2.) web site and books for reference

I think I’m pretty proficient with both the use of CSS and HTML, so there’s no learning curve there. It’s just “How do you start?”

to post a comment
HTML

11 Comments(s)

Copy linkTweet thisAlerts:
@NogDogJul 08.2006 — See [url=http://www.charles-reace.com/]my site[/url] for an example of a table-less 3-column, fixed-width layout (using the "faux columns" technique for the left column).

See[url=http://www.bluerobot.com/web/layouts/]the BlueRobot.com layout reservoir[/url] for some basic examples of two- and three-column layouts.

See www.alistapart.com for all sorts of related articles.

See www.csszengarden.com for inspiration as to what can be done with table-less layouts.

Last - but not least - visit the CSS forum here at webdeveloper.com for lots of info.
Copy linkTweet thisAlerts:
@plattecoducksauthorJul 08.2006 — That's a start. Thanks!

Just one question: On the BlueRobot site; do you notice that when you link to a new page, there is some transient code (or maybe text yet unstyled) before the page is fully loaded and styled? What's the cause of that? Any ideas? I've seen it before on other websites and occasionally when I'm working on a project.

Do you have an idea?
Copy linkTweet thisAlerts:
@NogDogJul 09.2006 — 
Just one question: On the BlueRobot site; do you notice that when you link to a new page, there is some transient code (or maybe text yet unstyled) before the page is fully loaded and styled? What's the cause of that? Any ideas? I've seen it before on other websites and occasionally when I'm working on a project.

Do you have an idea?[/QUOTE]

I don't notice it, but it might be due to the pages using the @import method within the <style> block? I think when you do that the browser may download the stylesheet in the background, so there could be a delay in styling the page, especially the first time you access it (and don't have the stylesheet in your cache yet).
Copy linkTweet thisAlerts:
@the_treeJul 09.2006 — What's the cause of that? Any ideas[/QUOTE]Blue Robot has a nice long article one the [url=http://www.bluerobot.com/web/css/fouc.asp]Flash Of Unstyled Content[/url].
Copy linkTweet thisAlerts:
@plattecoducksauthorJul 09.2006 — Yep; that would be the answer for FOUC. Did some testing here on my machine with several browsers and the author/developer of Blue Robot seems to be correct.

You guys were very helpful. It may not be a daunting task after all. Just somewhat tedious.
Copy linkTweet thisAlerts:
@WebJoelJul 09.2006 — Another way to get familiar quick with TABLE-less design, is by having an endess supply of templates to play around with, build into, destroy, correct (if possible), or if irrepairably damaged, just 'get a new one and start over'...

check out

http://www.strangebanana.com

for free one-of-a-kind d-html templates that are made right before your eyes!

-Joel
Copy linkTweet thisAlerts:
@ray326Jul 09.2006 — Take a pass at the links in my sig.
Copy linkTweet thisAlerts:
@plattecoducksauthorJul 09.2006 — NogDog, sae, the tree, WebJoel, ray326:

You guys are the best. With virtual friends like you guys, well, who needs real ones.
Copy linkTweet thisAlerts:
@plattecoducksauthorJul 13.2006 — Thanks to all who posted on this thread.

There was no "learning" curve, to speak of. Just some peculiar little syntax items that I had never seen in either of my books here on the shelf. I also found some helpful websites not listed here (sorry, I didn't book mark them). They basically explained some syntax of CSS2.

I have converted the home page on one of my sites and from start to finish, it took no more than 45 minutes. One bonus: The size of the files was reduced by at least 50%; great when you don't have to worry about nested tables.

I'm not saying I'll never use tables; there are times when it makes sense. I just won't design my new pages without anything but "table-less" HTML.

Thanks to All.
Copy linkTweet thisAlerts:
@plattecoducksauthorJul 17.2006 — I'm bringing this up again because I have run across a real puzzler. Perhaps someone has encountered this.

I am committing myself to the redesign of a website and eliminating all tables unless they make sense to use. I am using the following as the first line of the file:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Here's the issue: I have a piece of javascript code that serves as the menu. It is a "floating" menu, meaning it moves vertically down the left side of the page as the user scrolls down the page. It is always in view. I've adapted the code to suite this website. It has worked flawlessly for several years.

NOW, the menu is stationary. However, if I comment out the first line it will float as it has always done. Remove the comments and it is stationary. The menu liniks are functional but it won't float. Curiosly, this happens only in IE. Firefox and Netscape still have a "floating" menu.

Anybody seen this before? Is there some other declaration I should use?
×

Success!

Help @plattecoducks spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...