Written by Liza Kliko

Tableless design has became one of the main requirements in web design during the past 2 years. Templates based on tables are now considered of a lesser value, unless they exhibit extra ordinary abilities of the designer.

Some of the professional coder can’t even imagine going back to the stone age when site’s navigation was not based on CSS and the structure relied on incompatible with most browsers table. Making a tableless template is a lot harder, especially if you want it to pass validation, but the question is, does it worth the hassle?

Let’s try to go on its disadvantages first. The main and the biggest problem that I have encountered while coding tableless templates for others, is that you cannot edit it in WYSIWYG such as DreamWeaver. That’s a one big minus I’d say, especially for those who advanced from Notepad. The problem is, the divisions are unable to “organize” themselves in the same order as in the browser and as a result you see an absolutely messed up page on your Visual Editor and need to refresh the browser and see how each change effects the design.

The second inconvenience (to say the least) is that as most of you know - tableless design is functioning only based on the CSS. Therefore, if you are not fluent enough with Cascading Style Sheet, you are unlikely to get your head around it, modify the template, let alone build one yourself. Basically, you need to be very good with coding, modern coding, in order to produce a well laid out, functional design.

Still and all, there are some advantages as well. For example, tableless design, displays the same in all the browsers, and all Operating Systems. No colour differences or variations in spaces, widths and heights. Moreover, since it’s based on one CSS file which controls the entire website, as a result the pages load faster.

In the end, it’s up to you, weather you want to go into all this hassle of creating a tableless layout or not. It’s modern, new and very “web 2.0″, but should take twice more time to produce.

15 Users Responded in " Tableless vs. Table-based layout "

john said,  

Hi, I am more of graphic designer but I run a media company, I always have to use dreamweaver with tables because codding is something I know nothing about. Is CSS coding hard to learn the basics aswell as the more complex stuff?

Thanks

Rob
Rob said,  

no css coding is very easy to learn…

here’s a site you should check out if you’re interested in learning CSS…

http://www.pixel2life.com/tutorials/CSS_Stylesheets/All/

Sal said,  

I made the switch from tables to pure CSS about 2 years ago. I was hessitant at first thinking that it would be too complex using only CSS, but it wasn’t as difficult as I has antiscipated. I’d have to disagree on your comment about not seeing your design in a WYSIWYG editor. I stared in Dreamweaver with tables and I still use it for my tableless designs, and I’m able to see what I’m creating in the design view. Granted you dont see what images you may be using, as they are generally background images, but you can at lease see the DIVs’ placements.

Bart
Bart said,  

CSS if very easy and it also makes your sourcecode easyer to read. But I always get the idea that every browser uses a different way to display div’s, especially with inherited procentual size and padding. Tables on the other hand are displayed in mostly the same way in every browser.

But what’s wrong with tables in the first place? Using one or two td’s in your page with CSS markup is not going to hurt anyone, and it will also make your source code smaller.

sunjester said,  

i think it depends on the browser you are using, its a pain in the ass to get IE to follow new standards, i always use tables to help me properly layout the base of the site. NOT using tables isnt the way to go, in my opinion.

Mike said,  

I am only new in HTML & CSS. Actually to tell you the truth this is only my 2 weeks learning web designing. The author was true in saying that CSS layout added more time to make than table, of course when using WYSIWYG editor but almost the same time when using text editor.

Let me add one more advantage of using CSS:
1. CSS can place any block content on top of other content and can move or separate block content from other content by using float and absolute positioning. Unlike in using table you cannot place table or cell on top of another table/cell. You have greater control in positioning content using CSS.

To those who want to learn html, it is now time to learn the current standard, whether you like it or not it is the future of web design. I know that it will come a time that more and more elements will be added to greater enhance the power of CSS!

Does anyone agree with me?

I like CSS, very clean code and tables!

Tabular Data, Most of my sites are written in CSS with the odd table or two when new content doesn’t fit the template. Especially in my more complex pages.

All google ads are tabled within a frame. No one recommends frames either, but google uses them, if anybody cared to check the source.

Tables can be manipulated through CSS too! If you want less markup in your HTML, define the attributes of your tables in the CSS file!

Regards

Sal said,  

I think the biggest advantage to using CSS only, is the SEO factor. Separating the content from the design is a huge advantage when it comes to spiders and crawlers going to your site.

Perhaps most designers aren’t keeping SEO in mind and that’s why there’s the debate on tables or no tables. I’ll admit, I use hybrid development when a table here or there is just needed to get the job done, but I’d still say going tableless is a good idea in the long run.

Daniel
Daniel said,  

I agree with rob,Learning css is no big deal all you need to know

is what each property dose.you can even make an
inline element run as a block element with css,
which I need to do last week on my customer’s navigation bar.

I learned Css in two days and it worth using.

it easier to make changes to your webpages.

specialy if you have 200 webpages and you want to change

the styles on all of them and all are running on the

same style sheet, all you need to do is make the change on the external style sheet and the change is done to all 200 of the webpages.

that would take day with a table based design because then you would have to make the change individually
to each webpage.

Oyunlar said,  

I never use tables for my designs, they really restrict what you can do. Check out my css website: http://www.cherez.com

Audi said,  

I hate tables, but I hate cross-browser compliance issues caused by CSS a lot more. I work hard to get my websites look the same in various browsers.

Ace Macleod said,  

Well I’ve been coding ‘web’ for about 14 years now, and I’ve seen trends come and go, but I have to admit that CSS is probably the saviour of the web. I’ve seen designers use nested tables within nested tables. Others have code that is absolutely unreadable!
CSS has really helped people get into the habit of making code that is clean and small. Believe it or not you can code a page using only CSS to make it look 99.9% the same across most of the standards following browsers. You just need to make sure you’re explicit in your CSS definitions. Also once you get into the habit of using CSS, you’ll notice that your ability to code for dynamic content greatly increases. The programs behind the scenes have a much easier time generating content rather than format.

rhlblue said,  

well, i’m making a template for my website right now…..i’m not a pro in coding :(

but i have made most of my design in CSS..i never learned tables before i started designing ( btw…i learned everything from online tutorials).
but now i made some images on photoshop and sliced them…so it gave me a ready made code…which is based on tables…now…my site has 20% tables and the rest is CSS.

so my question is……should i use the ready made codes from photoshop and put them in my design and then place them with the help of CSS or i should put each and every image without tables???

lol maybe it will take me months to fit all the images in place.
And most of all….make them look the same in all browsers!

so what do u say guys ?

thanks

Pingback & Trackback
Pingback from ring-tones  
Pingback from PCS  
Leave A Reply Here

  Username [*]

  Email Address [*]

  Website

Subscribes to this post comments updates

Please Note: Your comment will be under moderation. Don't resubmit please. Thank you.

ss_blog_claim=efbbad16d3c6c923ea0a692128fee51e ss_blog_claim=efbbad16d3c6c923ea0a692128fee51e