Tables vs No Tables
I was asked to do an online test for an interview yesterday where it was asked to create a webpage using CSS and no tables in the html page. Must admit i was stumped as i usually create the basic layout using basic html elements like tables, lists, paragraphs, headings etc with no formatting then use the css to add style. I dont use css for layout. I presume they must use it for layout but I always thought it was best practice when designing to separate layout and style completely?
benf posted this at 10:04 — 13th March 2007.
They have: 426 posts
Joined: Feb 2005
yes, that is what i thought? However, it seems to be fashionable to use CSS layout. For me, in reality, it is far easier to layout a website using tables than farting around with floating, widths...etc. A table just does it. I dont think table layout will ever go away, it is to efficient and easy. However, styleing is excellent using CSS. Lets face it, its called a "style" sheet.
Not a "layout" sheet. I just think everyone has gone mad on separating this from that, when really its just making things more complicated. Unfortunately, most commercial employers require you to layout websites using CSS!
Good Value Professional VPS Hosting
andy206uk posted this at 18:51 — 14th March 2007.
He has: 1,758 posts
Joined: Jul 2002
I don't want to start an argument here, but if you think like that about CSS and CSS based layouts, then you clearly don't fully understand the concept and need for accessible websites.
I've been using CSS layouts for about three years now and I can build sites faster than I've ever been able to using tables. Yes, there's a learning curve but it's worth it because you create light-weight sites, that load faster, are easier for search engines to read and easier for people with visual impairments to use (for instance, text scales better and sites make more sense in screen readers).
Wanna know what convinced me to switch? I did a website for a blind user and when we were discussing the job, he demoed a number of sites in a screen reader for me - they were near impossible to make sense of. Since then I've made accessibility my number one priority - using the right code to layout the site is one of the most important things. If that means I have to spend a bit longer getting it just right, then that's a necessary sacrifice.
Andy
Megan posted this at 13:16 — 13th March 2007.
She has: 11,421 posts
Joined: Jun 1999
Not quite. It's best to separate structure (HTML) and presentation (CSS) (layout is part of presentation). The HTML only describes the structure of your document. What is a header, what is a paragraph, what is a list, what is a table (of data). Therefore, it's best to avoid using elements to do things that aren't their primary purpose.
Some people have overreacted to this principle by assuming that this means no tables at all. Of course you need tables. Tables are important for descrbing relationships between data - just like what you see on the forum home page here.
The easiest way to do it is the one you know how to use. You know how to design with tables so it becomes easier. Once you learn how to design with CSS it may become the easier method.
There will be an article published on A Padded Cell soon explaining some of the reasons why it's good to use CSS instead of tables for layout.
Edit: Here is the article I was referring to - 11 Practical Reasons to use CSS for Layout
Megan
Connect with us on Facebook!
benf posted this at 23:42 — 13th March 2007.
They have: 426 posts
Joined: Feb 2005
What is "a padded cell" is this somehow connected to webmaster-forums.net?
demonhale posted this at 00:32 — 14th March 2007.
He has: 3,278 posts
Joined: May 2005
It is connected... it's the main site area, a compliment per se of TWF...
Megan posted this at 13:05 — 14th March 2007.
She has: 11,421 posts
Joined: Jun 1999
Yes, that's our new content area. We will be merging the sites more closely together.
Here is the article I mentioned in my previous post:
11 Practical Reasons to use CSS for Layout
Megan
Connect with us on Facebook!
ChrisL posted this at 10:24 — 29th March 2007.
They have: 68 posts
Joined: Dec 2005
Thanks for that think Im convinced to start designing this way now. Wont be that hard once Iv done a few sites Im sure.
Mark07 posted this at 11:22 — 29th March 2007.
They have: 4 posts
Joined: Mar 2007
IMO, things keep on changing and one needs to keep himself updated according to the market trends. Previously it was with tables and now its table less designs.There is only one thing in online industry and that is shape in or shape out. This applicable to all including me.
greg posted this at 00:45 — 30th March 2007.
He has: 1,581 posts
Joined: Nov 2005
well, as a noob learning all this, i have to ask
do i learn to use tables in my html/pp files
or use the css file to do it?
which IS the best way? andy mentioned the css method is better for search engines, where i was of the understanding that search engines looked at the end result on a page, i.e. ike the user saw it, ( i know SE's only see text btw)
so how would it be beneficial to SE's either way?
surely they only read the text and links etc?
JeevesBond posted this at 14:47 — 30th March 2007.
He has: 3,956 posts
Joined: Jun 2002
The thing to do is use the right markup for the job. People talk about tables because it's the most commonly made mistake, but the choice is not tables vs. CSS. The choice is correct markup vs. incorrect markup.
What you need to learn is the correct markup for the job, what's a table used for in other places? It's for tabular data, financial figures, spreadsheets and other maths stuff. Using a table for design is a hack (because older browsers didn't make much use of CSS), as Andy pointed out: it causes problems with other technologies.
Am not sure using table base design is a problem for search engines, there's always more code for the search engine to wade through but apparently this doesn't make much difference. Writing well structured pages is important though, using the correct header tags (h1, h2, h3 etc), writing in title tags etc. Google reads heading (and other) tags, weighting the words in them as being more important to the 'meaning' of the page.
I'm no SEO expert though, we need someone like Megan to help us here.
a Padded Cell our articles site!
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.