Advantages Of Using Tableless Designs For Web Pages

midnitesun

Dec 16 2006, 12:13 PM

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

QUOTE

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

Dec 16 2006, 05:13 PM

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 tasks

And all of that beacouse of tables

hts

Dec 16 2006, 05:50 PM

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

)...

QUOTE

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

Dec 16 2006, 06:21 PM

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

Sprnknwn

Dec 16 2006, 08:09 PM

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

Dec 16 2006, 09:11 PM

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 .

QUOTE

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

Dec 16 2006, 10:57 PM

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

Dec 16 2006, 11:26 PM

http://blog.html.it/layoutgala/
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

Dec 17 2006, 02:42 AM

QUOTE(hts @ Dec 16 2006, 03:26 PM)

)..

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

Thank you!

hts

Dec 17 2006, 08:59 AM

here are some more links to great css-related articles:
1. http://alistapart.com/articles/negativemargins/ - create a liquid layout using negative margins

2. http://www.ilovejackdaniels.com/css_cheat_sheet.png - all css properties, all units that you can use to define size, pseudo-selectors etc...very useful

3. http://glish.com/css/home.asp - some css-only layouts explained
4. http://www.realsoftwaredevelopment.com/200...omplete_li.html - 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

Latest Entries

master_bacarra

Dec 21 2006, 05:49 PM

tables are deprecated? i didn't know that. although i do know that too much nested tables would make loading time a lot slower. well, good thing i'm still using my good ol' kubrick layout from wordpress.

midnitesun

Dec 21 2006, 12:38 PM

you can hide the table and its contents without even using div tags

CODE

same can be applied to tr and td tags too , pretty useful when you dont need a particular peice of for the time being but will need later, so you dont have to go through your code again just when you need it simply remove display:none

matak

Dec 21 2006, 11:05 AM

QUOTE(darran @ Dec 20 2006, 07:56 AM)

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://www.natashathomas.de/english/ 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?

sites like this are example of bad use of tables.

but nobody can say that you should completely eliminate tables from web design, although it would be the smartest thing to do.

another thing that is the prob with designing with css is browser difference. there is no way that someone can design website that looks the same in any browser using css, well not even with tables such a thing is possible...

somebody here mentioned that div's are better couse you can make them disappear with display: none;

well

CODE

<html>
<head>
<title>Layout 1</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="tutorial1" content="table css">
<style type="text/css">
div {
    display: none;
    }
</style>
</head>
<body>
<div>
<table>
<tr>
    <td width="500px" border="0" cellspacing="0" cellpadding="0" align="center">This is my table</td>
</tr>
</table>
</div>
</body>

You can't see the table now

rsf

Dec 21 2006, 04:17 AM

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.

CrazyRob

Dec 20 2006, 02:20 PM

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.

Similar Topics

Keywords : advantages tableless designs web pages

Some Pages On My Site Won't Even Load.. - (6)
Pages Url Set Up Problem - (5)
ok so... im in cpanel making new pages for my website.. (ending the names in .html and saving them
as an html document) but every now and then my pages, such as this one
http://www.have-heart.trap17.com/staff.html will not work if you place the WWW. after the http://
only if you type in http://have-heart.trap17.com/staff.html is there anyway to fix that?
without going in to all my pages and changing the navigation for each page?? ps.it happens both
ways,, somethings i wont be able to acess certain pages if it begins with \
http://have-heart.trap17.com/...

Making Custom Error Pages With Cpanel - Not working properly (4)

I set up the custom error pages using CPanel, but they aren't working properly. I get the
standard error code. CODE The requested URL was not found on this server. Additionally, a 404
Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Plust that little bit on the end. Am I doing something wrong or is it something that needs to be
handled by an admin?...

Pages Not Found? - (2)

Hi all, i'm having trouble finding my webpages, right now its just text and a login doodlie
thing, but i access my files by visiting the page, so i can't see my changes as they happen Has
this happen to anyone else, any thoughts, etc?...

Asp On Trap17 To Make Password Protect Pages - (4)

I was wondering if I could use .asp pages on trap17, because I am currently looking for a login
script and all from my video pages. I've seen a script using .asp, but when I uploaded it and
pointed my browser to it, it showed a download box. Would anyone happen to know of a place I can
find a free login script? I've tried puma , and its great, but when iIview a protected page, I
have to go to the main login page first, then i'm allowed to view the protected page. I
don't want to have to login every single page I protect, and I want two access levels, of ...

No Php Pages Working - (3)

Hi people! I just noticed that none of my php pages are working, they dont have any source so
arent sending anythnig to the browser which is strange as it seems like they are working on the
server because they are detecting if someone is logged in and redirecting accordingly but theres
just no soruce code and no page showing up. My HTML pages seem to be working ok but my site is
dependant on php /sad.gif" style="vertical-align:middle" emoid=":(" border="0" alt="sad.gif" />
Any ideas to the problem or just the server being difficult like computers do? Thanks ps ...

Unable To View My Pages... - Help? (0)

Hi. I just created an account and was able to log into the cPanel successfully. I even uploaded a
new index page and images. However, it isn't letting me view them from the web. I can see them
from the file manager but if I type in the page URL in the address bar of my browser, it just says
that the page cannot be displayed. Is there something I'm supposed to do in order for my custom
pages to start showing up? Please help. Thanks! EDIT: I figured out what I was doing wrong
as far as the pages went, but now I can't seem to get my images to sho...

Cannot Connect To My Webserver - All Pages Give Error Code 500 - repeat, ALL of my webpages are giving Error Code 500! (3)

To any Admin or Mod: This topic can be closed now, the problems seems to have disappeared... I
got a major situation here!!! I was just viewing my site earlier, about ten minutes
before midnight, checking my forums, etc. and there were no problems whatsoever. So I came here to
check my credits (I had 20 when I visited), and do a few more posts. I went back to my site at 10
past midnight, only to find I can no longer view any of my pages! All my pages are giving an
Error Code 500. Why is this? I have not broken any rule or ran out of credits, and th...

Diffrent Error Pages - for diffrent subdomains (4)

Okay, I'm not sure this is the right place for this message, but I was wondering if I can have
diffrent error messages for diffrent subdomains, so mysite.trap17.com/a_file_that_isnt_real, would
yield one error page, where as secondpage.mysite.trap17.com/a_file_that_isn't_real would yeild a
diffrent 404 page?...

Creating Custom Error Pages - For My Domain (9)

Hi, I am running my own Domain here on Trap 17. I am wanting to know how I go ago making Custom
Error Pages. I know that there is a part in the Cpanel to do this, but that only allows text. I want
to add in my site logo etc. Is there a way I can make the page through Frontpage? If so what do I
name the page, for example on a 404 Error. And where would I upload that file to? Thanking you in
advance for your help....

How Did You Learn To Make Web Pages? - (32)

I was just curious how you all learned to make web pages. Did you learn in school or just kind of
pick it up? Did you take a class? Did you buy a book? Did you just figure it out some other way?
I learned on notepad and html. Just from reading on the web. And doing my own coding was very
tedious....

Web Design - Web Pages Look (7)

If your not using a template for everything, is there a well-known site anyone knows. Any
recommended ? Or how to make a template not the GFX but the coding EX: > class= "maintitle"
> To place the buttons, ect. in the right place /wink.gif' border='0'
style='vertical-align:middle' alt='wink.gif' /> ...

One Of My Pages Is Not Working. - (3)

http://niiice.trap17.com in the navigation where it says Misc. i get a blank page and i did put
stuff on it...

404 Error Pages - How do you make them? (1)

Can anyone explain how you make 404 error pages? And what exactly is the difference between those
and splash pages?...

Jsp Support - help Please with JSP Pages (7)

Hi I have problem. i have developed my website in JSP but my JSP pages are not working. When i see
source it shows me the JSP code itself. I think Admins need to enable JSP for me.. please help
me!...

Need Help Uploading Frontpage Pages - can anyone helpe me please?? (4)

I was so glad My application for free hosting Package 2 was approved! I'm now at the cpanel
site...you now http://yoursite.com/cpanel and I have noooo idea what to do next!! I want
to make a site...I have a site saved in Frontpage...so does anyone know how to upload it or
something...I've never did this before so I have no idea. I also would like to work with
HTML....but how do I do this...I mean is there anywhere a place in the menus where I can upload it ?
I'd really appreciate anyone helping me. I couldn't find a help topic anywhere on...

Xoops 2.0 Error In Php - I can't get my pages to load. (2)

Hi, I've recently installed XOOPS 2.0 on one of my subdomains, http://sims2.tatatee.com/html/
and after I'd posted a new entry today, it started showing up a blank index. I got into my
admin area and turned on PHP debugging mode and this is the error message I get: Parse error:
parse error, unexpected ')' in
public_html/sims2/html/modules/wordpress/wp-content/plugins/markdown.php(774) : regexp code on line
1 Fatal error: Failed evaluating code: ''.str_repeat(' ', - strlen('') % )
in public_html/sims2/html/modules/wordpress/wp...

Looking for advantages, tableless, designs, web, pages

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE