Jump to content
ben3001

Tables or Css?

Tables or Css  

39 members have voted

  1. 1. Tables or Css

    • Tables
      6
    • Css
      33


Recommended Posts

I've have recently been browsing a few forums and have noticed people absoloutly hate using tables. If someone uses tables for the layout people do not review the site but the fact that tables ahve been used instead of css.Whats the difference?A site coded via css loads in the same time as a site coded via css. If not quicker due to the fact it does not have to load large style sheets which some people end up creating in css."There is no "real-life" or practical benefits when you start to replace each-and-every-single <table> tag with <DIV> tags and attempt to use full CSS to display your webpages properly across popular browsers. It's one thing to use the regular CSS style to replace the same fonts that will be used all over the place. But it's another when you take little bits and pieces of code out of the page and bury it some huge .css file and then try to figure out and try to remember where they all came from and what each piece of code did 2 months from now"I would love to know what people think, but im already sure of the responses i will recieve. Vote in the poll!

Share this post


Link to post
Share on other sites

;/CSS is the new way and more proper way of making layouts. Tables were never designed to create webpage layouts they were designed to tabulate dataTables are inacessible when it comes to things like web bots and screenreaders so by using css and divs it increases your potential audience. In order to conform with the accesibility standards you need to use divs and css.(may not matter to some but if you ever work on a website for a goverment controled group then your site will need to be accesible to those with disabilities)The css can be faster then tables because if a site uses similar layouts through the entire site then the css does not have to be completely re downloaded each time. it may not matter to people on dsl or cable but some people are on dialup due to where they live *me* i recently re did a site uisng divs and css and i was able to nearly cut in half the load times for me and my 21.6k connection.using tables is lazy. I could design a table layout in a matter of minutes by the time i started using css. Now it takes me longer but im getting quicker and soon it will be as easy as tables. Theres no reason other then being lazy to not use divs and css. Its not like its hard to learn

Share this post


Link to post
Share on other sites
"There is no "real-life" or practical benefits when you start to replace each-and-every-single <table> tag with <DIV> tags and attempt to use full CSS to display your webpages properly across popular browsers.
That is simple not true.When making your layouts with CSS instead of tables it is much easier to read and there is far less code.As far as load times...there is probably little or no difference because the extra time it would take to load the extra styles int the stylesheet would be proportionate to the extra tables code you would have to write, unless of course it has many, many nessted tables, inwhich the CSS layout would probably be more efficient.I understand your arguement, I was in the same place last year when I first was looking at hte issue. A year later I am pro CSS and wouldn't go back to tables. It takes some getting used to, you need to discover the quirks assciated with each major browser when making CSS layouts and understand the methods to get around them. After that it is smooth sailing and you'll be glad you switched.It was the same for me when switching from ASP to ASP.Net...it was a tough battle at first but now that I am there I see the mountain of benefits.

Share this post


Link to post
Share on other sites

Besides the thing already mentioned, there are even more advantages on using CSS layouts instead of tables.Yes. Download times are technically reduced because the positioning data is downloaded once and cached instead of being loaded for every page.Also, tables have to be completely downloaded in order to be displayed while <div>s are displayed immediatly when they are closed (their childs are also displayed when they are closed) which makes the user feel as if the page loads faster while technically speaking tables are downloaded just as quick but only rendered later.There is also the device independence feature of CSS based layouts. You can have multiple CSS stylesheets optimized for different devices. Just imagine how will your favourite site that uses tables would look like on a cell phone for example. It will take you weeks to scroll to the desired part of the page. Using CSS for layout, you can customize the layout for this device while keeping the same XHTML.Accessability basically mens to let the user customize the page while still allowing him to easily use the same functionality and content. With tables, you force single positioning, a lack of logic, etc. and as mentioned, you disable some screen readers to read the content of your site.As for flexibility... it's much easier to see one <div> then to look up the exact coordiates of your content's <td>. When it comes to external CSS stylesheets (the last big paragraph of ben3001's post), that's why W3C's QA suggests that you use semantic class names. So you can clearly see where this belong and what it does, not how it's suppose to look like. Say ".title", not ".BigRedSign" for example.I actually review sites when they use tables and even like some. W3Schools is only the best example of such site. However, I do admit that I like tableless sites A LOT more. It gives a scence of comfort for me as a developer (a strong word for me, but still).By the way, I know this was an expected answer, but hey, it's the truth.

Share this post


Link to post
Share on other sites

Hello.I have had this argument many times with people and I will say it again; I started with tables and found people were just plain having a go at me due to the browser incompatibility as I was an IE6 user at the time. Anyway I looked into web standards and learned that tables were used for tabular Data and layouts aren't tabular data so I looked into XHTML and CSS I had like a 12 image site which I cut into 4 images due to better styling with CSS. This reduced loading time dramtically and I switched to Firefox and found my site looked better with CSS than tables and also loaded faster.I can guarentee most people would rather have a few DIVS than a crapload of tables as the code is much more efficient and clean code which is easier to edit. I would much rather have:

body{font-family: tahoma;}

In an external stylesheet than having a crapload of font tags in HTML like

<font color="blue"></font>

Because that is just plain annoying and cramps up your source code while you could have 6000 different fonts and not cramp up your index source file.

Share this post


Link to post
Share on other sites
Also, tables have to be completely downloaded in order to be displayed while <div>s are displayed immediatly when they are closed
That's not entirely true, it depends on the browser. Opera, for example, will render things as it receives them. If I have a large, dynamic table being filled in, Opera will render the table as the code comes through, it won't wait until it has everything. IE, on the other hand, will only render the page once it has all the data, regardless of if you're using a table or a div.One other thing I don't like about CSS layouts is the rendering performance. When I have to render a heavy CSS page, using most browsers, scrolling especially will not be smooth at all, it looks clunky like it has to constantly calculate positions, etc. That's one major benefit of tables: they have had browser support since very early on, and as a result they work well today. One major beef I have with the people designing CSS is they seem to think that the whole web should be made of div boxes starting in the upper-left corner. Support for centering (horizontally and vertically), aligning page content on the bottom of the screen (footers) etc is sorely lacking.

Share this post


Link to post
Share on other sites
Support for centering (horizontally and vertically), aligning page content on the bottom of the screen (footers) etc is sorely lacking.
Centering a div hortizontally is the same as centering a table (if you are talking about <table align="center">...that is depreciated just like <div align="center">) and tables are just as hard to center vertically.As for footers...I have not had trouble positioning a footer at the bottom of a page.
One other thing I don't like about CSS layouts is the rendering performance. When I have to render a heavy CSS page, using most browsers, scrolling especially will not be smooth at all, it looks clunky like it has to constantly calculate positions, etc.
What are you talking about??? Absolute positioning??? Absolute positioning is not what is meant by a CSS layout. Can you provide a good example of what you mean?You need to face facts...someday you will have to change your code...why not now? W3C has laid out there guidelines for web standards and modern browsers are working toward full support of them. You won't be able to ignore them forever.

Share this post


Link to post
Share on other sites

Nicely put fella I am tired of people squeeling about CSS layouts just cos they carnt be bothered to learn something new.Makes you wonder why they are even in this trade really as things in this trade are changing all the time.I am supprised people with this opinion even use computers, I mean what was wrong with the type writer A? :)

Share this post


Link to post
Share on other sites
Ive seen what someguy is talking about with the unsmooth scrolling, it actualy has to do with the heavy use of transparencies and large background images combined.

Exactly...it happens when people don't know what they are doing. That can happen with any style of coding, programming. It is not he fault of CSS and divs

Share this post


Link to post
Share on other sites

the main reason why i brought up this topic is because one it make great viewing no just kiddening...the thing is i have been haveing a wee problem with my divs and found that i could not get around it.i admit you have all made very valid points, my problem is that i want to keepy my divs that im using but am finidng it hard to keep them centered, its easier with tables but not what i want maybe some one could help/advise.my site is http://medussa2.atspace.com/test2.htmlmy header is perfectly centered no matter what your resoluotion, but i cannot get the other 3 divs centered for the love of my love, i have no idea what im doing wrongcould you help with the soloution if css this would be highly apprecited

Share this post


Link to post
Share on other sites

HiThough this does not directly answer your question I think this layout would work best for you.http://css.maxdesign.com.au/floatutorial/tutorial0915.htmIt has set width divs for the left and right and then fluid for the center div.Even if you dont like the idea of the whole layout you will see how things are done with that one and be able to transfer certain thing to your site.The main idea is float the left div left and set a width, also folat the right div right and set the width.For the center div use margin-left and right to reduce the size and center the middle div.Then wrap the three with a container div. If you take a good look over that tutorial you will soon work out how they make it work.Thanx John

Share this post


Link to post
Share on other sites

I'm sorry. Forgive my denseness. I've been checking through the CSS tutorial and can't find where it shows how to use CSS to set layout of a page (and I'd be very interested in finding it).

Share this post


Link to post
Share on other sites
Check the state of it though if you resize the window  :)

Why what is wrong with it when you resize it?It does as it should set width for left and right div fluid for the middle div.Which is what I explained in my post earlyer.It only messes up if you reuce the size of the window to around 500px, but why would you set your window to that sort of size?And you can set a min width easy enough.I am using a modifyed version for my site my site and am happy with it.I think my site looks good at any width from 760-1280 wide.Well as good as my design skills can look anyways. :)
Sorry, but the link doesn't work for me.

It is the same page just scroll to the top of it and it explains how it works.

Share this post


Link to post
Share on other sites
It only messes up if you reuce the size of the window to around 500px, but why would you set your window to that sort of size?

I often have my windows minimised that size or less.Also, what about those users who have 800x600 resolutions? doesn't leave them much to play with, if they minimise the window a little or open up the favourites on the left hand side then site's layout goes banana's and could be very confusing for them.I'm all for css layouts but there are still some things that bug me.off topic geeze that bike woz fast :)

Share this post


Link to post
Share on other sites

Yeah true true, but you carnt cater for everything well not yet anyways thanx to IE.I would say the range of sizes I cover is as good as it gets for the min.And yes as good as CSS is there are loads of problems with it, most of them stem from the evil IE.If Microsoft would sort IE out then life using CSS would be so much easyer.But that is just not gonna happen they do it on purpose.

Share this post


Link to post
Share on other sites
Yeah true true, but you carnt cater for everything well not yet anyways thanx to IE.I would say the range of sizes I cover is as good as it gets for the min.And yes as good as CSS is there are loads of problems with it, most of them stem from the evil IE.If Microsoft  would sort IE out then life using CSS would be so much easyer.But that is just not gonna happen they do it on purpose.

IE7 will have full CSS2 support nad they have fixed a lot of CSS bugs. It should be out the end of this year (offical release not beta).So once that starts to overtake IE6 hopefully things will get easer.

Share this post


Link to post
Share on other sites

of course, there should be another choice in your poll - imo. At the present state of web browser technology and popularity, a developer is almost left with no options but with the task to gracefully combine the two (tables and css).True, CSS is the way it should be done. But we should all be driving cars that run off of renewable energy sources so that we are not dependant on foriegn oil. That paradigm is not disimilar to the one you address. We all should be coding in CSS but we simply can't if we are forced to deliver a certain user interface that is to be consistant for any user on any browser on any platform.Having said all that, I think a more appropriate poll would have been to ask it in this manner:What do you prefer:a.) Creating sites in CSS and writing CSS hacks to accommodate browsers and operating systemsb.) Creating Sites with tables and be ostersized by fellow coding extremists.c.) With an emphasis more on CSS and less on tables, using them both can be more effective than either one alone.I tend to fit more in the [c] group of people.:)

Share this post


Link to post
Share on other sites

Yeah of course.You can use tables as they do have a proper use(Displaying Tabular Data).It is just that people are now advised against using them for the overall layout of a website as everybody used to.Even then if there is a design you have to make and can only be done in tables then you gotta do it. Though you should alway try not to as the advantages of using CSS should be made use of, you should always design a site knowing the limitations of using a div and CSS layout so you can make a design that works and also know the advantages so you can make it work at its best.But I know that some clients are set on an idea and no matter what you say you wont get them to go with your ideas. Though most clients once they learnt the benifits soon go along with what you say.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...