Advantages Of Using Tableless Designs For Web Pages

[midnitesun 0]

since tables are deprecated and not intended to be used for website layouts and future browsers may not support tables i thought of listing a few advantages of using tableless designs for web pages

the first and obviously the most important reason is faster loading time
ofcourse yo all will i think know the fundamental truth - tables load slowly
one way to counter this problem itself becomes a bigger problem, that is to set the width and height of all your table elements , now think how many td open tags you'll be having in a average table based layout ? tons , so having to set all the values explicitly only adds to the page size and thus loading time

There are many experiments that have been done on this topic, I'll point you toward this one that StopDesign did on a remake of the Microsoft website from a tablebased site to a tableless layout. That remake showed a 62% file size reduction of the site, and using their average hits per month for the Microsoft site, calculated that Microsoft would be saving 924 GIGS in bandwidth per day, and 329 Terabytes of bandwidth per year. For any company that pays for bandwidth, these things are important.

search engine optimization

the fact that you can put your most important content at the top of your page without affecting you page layout makes your page better optimized for search engines. for example lets say i have a navigation bar at the left with links that are actually great keywords too, i can move the navigation bar higher up my code wiothut having any affect on my layout because i will be using css to position my navigation bar ,that way search enignes can more clearly find common words throughout your document without having to filter through code, search engines tend to prioritize that have higher content to code ratio , putting all your style elements into an external css stylesheet makes your site highly content based to a search engine.Tableless layouts, as previously mentioned, decrease page size and loading time - another bonus to search engines.

hopefully this article may have helped in getting started on understanding why to use a tableless layout and the benifits so read as much about css as you can here and elsewhere and jumping to tableless design will be just a matter of time

[matak 2]

i agree with you midnitesun that tables are depreciated, but i don't think that they are going to be removed from future browsers beacouse there is to many sites using tables, and removing code is kinda stupid even if there is better code for the same thing. once the code is added and used there is no point in removing it.second thing about tables is that they WEREN'T create for designing whole pages, but just for creating basic page layout.Only thing i will be using tables for design is just ONE table, in which i'll put rest of the CSS code!Why. Well, tables make it easy to center the web site instead if you are using CSS for making pages that look centered.Even that isn't the solution. When you start designing websites from scratch and add CSS worst thing that happens is difference in treating code from two browsers IE and Firefox.I just can't find logical solution why the heck does the same code entered in one browser looks different in other. But then again when you look at the big picture solution is simple. There is no communication between developers of IE, FFox, and Opera couse those 3 of the most used browsers on Internet (except Mac) are totaly different in their structures and treating code.Of course, that someone can say now that there are ways to implement code for both browsers but that makes us (if i count myself as web designer ) just more work to write special code for each browser.Even so i think that maybe nor Microsoft or other developers can't be blamed for that. Reason stands in history of Internet when the war begun between Microsoft and Netscape, and that resulted with different standards for those company's.Now, almost (let's say) 20 years after Microsoft has the profit of billions and other company's earn quite enough (take Google for example). Hasn't the time come for someone to raise the white flag and start to communicate on development of unisex browser which is going to be fully compatible with future standards like CSS3, so that even for 20 years we still wouldn't have the same problem.Another thing that is bothering me is that if programmer even finds some problem with his code (like basic html or css) he isn't going to do nothing to report that problem, he will rather write complicated script that solves it other than maybe trying to change that problems so that others after him wouldn't need to lose time learning new scripts for rather simple tasksAnd all of that beacouse of tables

[hts 0]

tables will not be removed from browsers` engines, as tables are used to display tabular data (that`s why table tags exist - it`s quite difficult and time-wasting to display tabular data with css, and in such a way that they don`t "break" on different resolutions )...

second thing about tables is that they WEREN'T create for designing whole pages, but just for creating basic page layout.

see above-tables are for displaying tabular data, not at all for layout

..every html tag should be used for what it was created

[midnitesun 0]

am i missing a point here ??i totally agree it will take ages for browsers to stop supporting tables ... not only because 90% of the current web sites may be using it , but we cant deny the fact that the tables that were never intended for layout purposes (tables are for data - layout grids are an abuse of the mark-up, an abuse that we?ve come to live with and accept a bit land now it ceems we cant live wthout it too) wont be used in webpage designing in the near future and its not just big sites like hotmail that have switched to pure css , but you would see that many have resorted to css if not before

Edited December 16, 2006 by midnitesun (see edit history)

[Sprnknwn 0]

To people like me, that don?t know much or anything about building structures in css, the things you say seem very reasonable, but how to do it? I mean, do you recommend any good tutorial about... I don?t know,,, learning to replace the common use of tables in web design for a better css use? You know we?ve learn to design with tables and now it?s gonna be hard to change our mind and I suppose that doing the same with css will be much more difficult. I would like to try and see if the differences bettween browsers are so dramatic. It?s not so much time ago that I learnt that tables in html weren?t really conceived to do what they are used to do nowadays and it would be cool to leave them but how to start? I know that it will take ages to change people mind, but these processes must be slow. Some years ago nobody would say that a new browser like firefox would beat explorer or some linux distributions would start to harm seriously the windows business.About the thing that different browsers display the same code in different ways, I think it sucks, someone is not acting according to standars there. The same as if you write a word here and in Tokyo it looks the ame, writing a css code would have to look the same in every browser.

[midnitesun 0]

well i believe saint-michael had been making tutorials on how to design in css, which i am sure will be indeed very good for you to start with .

You know we?ve learn to design with tables and now it?s gonna be hard to change our mind and I suppose that doing the same with css will be much more difficult.

yea it is always hard to leave somthing we are familiar and jump onto unfamiliar territory , but it's not going to be more difficult, infact it is more easy ... i should have been more comprehensive on my original post

[Dooga 0]

The reason I like to use DIV tags is because they seem to be easier to code. If you don't want it to appear, just use "display: none;". For tables you actually have to modify the HTML to remove a section of it. DIV tags are easier to customize and through CSS files, they are certainly my choice of coding.

[hts 0]

http://forums.xisto.com/no_longer_exists/
that is a good place to start - a collection of 40 layouts, only in css (of course, only the skeleton of the page, you will add your own css formatting to the stylesheet )..

[Dooga 0]

http://forums.xisto.com/no_longer_exists/ that is a good place to start - a collection of 40 layouts, only in css (of course, only the skeleton of the page, you will add your own css formatting to the stylesheet )..

Thanks for telling us this! I forgot what "that site" was with all the raw templates.... now I know it!

Thank you!

[hts 0]

here are some more links to great css-related articles:

1. http://alistapart.com/article/negativemargins - create a liquid layout using negative margins

2. http://forums.xisto.com/no_longer_exists/ - all css properties, all units that you can use to define size, pseudo-selectors etc...very useful

3. http://forums.xisto.com/no_longer_exists/ - some css-only layouts explained

4. http://forums.xisto.com/no_longer_exists/ - the complete list of css tools

5. http://css.maxdesign.com.au/ - css resources and tutorials

 

these are the most interesting and useful, methinks, that I have in my bookmarks, under the css category ...

if you want more (isn`t this enough? ), tell me...i`ve got some more

Edited December 17, 2006 by hts (see edit history)

[CrazyRob 0]

i use tables and css for my site. i set the table width in css and to make my page load faster i just use a faster connection. Most webhosts now use 100mbit connections to the internet to it really doesn't matte what you use be it tables or css. But css is easier to use and i use it a lot as i hate using tables all the time but they are usefull as its sets the basic layout for me which i then css over the top.

[Yacoby 0]

and to make my page load faster i just use a faster connection. Most webhosts now use 100mbit connections to the internet to it really doesn't matte what you use be it tables or css.

You have to remember that some people still have dial up, and cannot switch to broadband. I was only able to get broadband 6 months ago, and only at 512Kbit/s (64kb/s). It is always worth making pages efficant as possible to save bandwidth usage.

I use CSS as much as possible for my websites, but you cannot beat tables for displaying data in a formated way, and I doubt browsers will stop supporting it any time soon. The one advantage tables have for layout over CSS is that it is displayed much more consistently in different browsers.

[darran 0]

I must say I am very outdated with regards to web design and I am trying my best to catch up. I am basically doing the backend part of websites in my internship, very very rarely do I even need to touch the graphical part and to my best of knowledge, tables are used very often even on a corporate level, tables are used to structure the page and there isn't any css used unfortunately. Nonetheless, I wish to brush up on my web designing skills and those websites have been bookmarked by me, I will have a look when I get back home.

There is 1 site I go to: http://forums.xisto.com/no_longer_exists/ After reading this topic and also about how much space and time it saves with the elimation of tables, I am under the idea that it is loading heavily on tables and that is the reason why the site is so slow. Can anyone confirm this?

[CrazyRob 0]

it all really depends on the speed of the webhosts servers. tables may take more time to load on some sites as the are bigger thus requiring more bandwidth to load. Just Because css is smaller is size doesn't mean its better ok so you can make nicer things with css but to get a good layout its best to use tables and then css over the top.

[rsf 0]

I'm still using tables in my site because while I can code in xhtml in notepad well, I use dreamweaver to code to save time. And to save time I've been using tables instead of css.I also find that when I do make layouts in css they come up different in IE and Firefox so much so that I cannot get them both to look right. I guess that just means I need to read up on css some more.2.0 of my site will be all done in css except for organizing data (what tables were intended for.