Hi, Please can you let me know what is quicker: My website will be using tables/html, but i do like css for certain things. However, what is better/faster loading in the instance: <td width="40" height="113" background="images/back.gif" scope="col"></td> Code (markup): or: <td width="40" height="113" class="back" scope="col"></td> Code (markup): (with the image info in an external css file.) Can you let me know please. This will be used on every page behind the menu if that makes a differnce. It is important that this image is one of the first to load, as it gives the page its layout. Cheers for your help. Regards.
All style and design layout considerations should be offloaded to CSS. HTML should only be used for syntax structure. The way to get the best performance out of your pages is to offload as much to CSS as possible and make your pages validate to W3C's "HTML 4.01 strict" and CSS specifications. A lot of people make use of XHTML, but since MSIE6 does not know what XHTML is this will simply throw MSIE into quirks mode which can have bad side effects. If you can't totally abandon tables and such for design layout, you should at least off load as much as you can to CSS. One benefit to offloading design to a CSS file is that it can become much easier and faster to update design elements.
Cheers guys. @KLB -- when you say "HTML should only be used for syntax structure", does that mean you think i should not use tables at all, or when ever i use an image in a table, i should load it with css? I would really like to try css to build a website, i think it might be too much to change my main website right now, but i would like speed the site up with css. every report i've read has shown css is good -- but not 100% compatible with older browsers. Would it be possible to give me an example of this in css please: <table width="800" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <th width="200" bgcolor="#330066" scope="col"> </th> <th scope="col"> </th> <th width="200" bgcolor="#330066" scope="col"> </th> </tr> </table> Code (markup): Thanks so much if anyone can do this. Regards.
itsall3, neither method is likely to be much faster than the other. The CSS method, however, is more maintainable. Think about when it comes time to change that background image. . . . If you linked to that particular picture in every table cell of every page, then you will have a lot of work to change every one of them--and you are even likely to miss a few. If the graphic was loaded through an external style sheet, however, there would be only one instance of code that you need to change, and every cell of every page, no matter how many pages, would be updated without worrying that you mistakenly missed one or two.
Table should not be used at all for site design/layout. Tables are only supposed to be used for tabular data (e.g. your AdSense stats). The only browsers CSS has problems with don't matter any more. For most sites even MSIE5.5 supports enough CSS to look decent. If you take a look at my site http://EnvironmentalChemistry.com, do things like view pages in "print preview", you can see the power of using CSS to control site layout. It works correctly in all modern browsers and it even works correctly in things like text browsers, dynamic Braille displays and should be very usable in hand held Internet devices that have HTML support. Really, once you ditch tables, a whole new world of web development opens up to you.
IE6 won't go into quirks mode if you use XHTML with an XHTML doctype. It set itself into [almost] standards compliant mode.
The thing is that this is not by design it is by accident as MSIE6 does not know about XHTML. This is why I advice people to stay with HTML 4.01 until MSIE6 is a seriously fading memory. I personally validate my environmental chemistry site to HTML 4.01 strict. The jump to XHTML when I finally make it should be simply a matter of changing the doc type and adding the closing slash to the end of stand alone tags like IMG and BR. Since MSIE6 does not know about XHTML, there are no technical advantages to XHTML unless wants to make use of features not yet supported by MSIE.
Absolutely true. There is no advantage to either over the other when served as text/html, which IE requires. My own coding is in xhtml simply because I also code for an intranet that does use the extensible powers of xhtml as application/xhtml+xml. Rather than switch back and forth on syntax, I stay with xhtml. Oh, and IE7 will have to be buried, too, as it won't support xhtml. IE8? cheers, gary
Oh that sucks. Maybe if MSFT doesn't want to bring MSIE up to date such that it supports modern standards and technologies maybe the other browsers will just bury it like it did Netscape.
Yeah, I don't disagree with you on that, I was just correcting what you said about going into quirks mode. Personally serve my site up as application/xhtml+xml, doctype: xhtml 1.1. Not using any of the extensible features yet. Or serve it as text/html, doctype: html 4.01 strict for non-xhtml browsers.
If you can, try to lower the filesize of that bg image you would like to use. Once they have loaded the bg info from the css once, it is stored in the browser's cache so you only need to declare it once in that one external css style sheet.
CSS is, because the browser will download the CSS file one time and then apply it to all of your pages. You can put the width and height attributes for the table in the CSS file as well. Tables should be used for tabular data rather than layouts. CSS should be used to stylize your HTML structure. It's not as much work as you think. Once you get the styling down, the updating is near effortless. Maybe something like this (untested): CSS: div.wrapper { width: 800px; margin-left: auto; margin-right: auto; } div.thinColumn { width: 200px; background-color: #330066; float: left; } div.mainColumn { width: 400px; float: left; } Code (markup): HTML: <div class="wrapper"> <div class="thinColumn">Left column here</div> <div class="mainColumn">Middle column here</div> <div class="thinColumn">Right column here</div> </div> <br style="clear: both;" /> Code (markup):
Another benefit to css, is that if you require an update, you need only change one field in the css file to make an entire site-wide change. It's that great.