Cascading Stylesheet is disabled in your browser. Please enable CSS and reload this page.
TABLELESS! This is the new word in webdesign. Tableless layouts are taking the web by storm - it is already the subject of much heated discussions around the internet and it poses a threat to how HTML will shape up in the future. I am talking about creating websites that are purly built with HTML and CSS without using the tag at all thanks to and
tags. CSS is a stylesheet which controls a layout's elements such as colours, texts, fonts, paragraphs, spacing, images, size and the list goes on. With CSS you can emulate the looks of a but is it the right way to go? Why would anyone in their right mind use CSS to do this? Read on to find out...
The advantages:
To begin with, tableless layouts are built around the CSS stylesheet. Therefore, its easier to process and compile in a wide range of browsers and compatibility wise its magic how smoothly its rendered in all browsers. Also since the browser is doing all the work through the CSS which is controling the page, the raw HTML source code is much much less than an ordinary page making the page load over 10x faster when put along side ordinary pages.
Another advantage is the fact that CSS is compiled and cached locally on the user's machine, therefore a site needs the user to only view one page and from there onwards, its just a matter of processing the HTML code of each page the user visits and the result is blasted back to the user's screen at blazing speeds.
The most evident advantage though is that one file controls your entire site's layout and design. So you can easily change anything in the layout from a single file - as well as provide different themable layouts to your visitors without having to start all over again. This adds extra convenience because you can concentrate on nothing but content in your pages while the CSS takes care of your design and content arrangements. It can also create customised menus using list boxes, this is also a bonus. However, as with everything else in life there are disadvantages...
The disadvantages:
It can become quiet tricky for the user to deal with two separate languages to control the site, and maintain a good balance between HTML and CSS. This also includes working with two or more separate files to achieve a good balanced design.
Although its good at table emulation such as faking fixed width tables, its not very effecient at relative width tables and cells. CSS cannot handle complex nested layouts where cells are joined and interlinked with other cells - thats where tables dominate the field.
The user will not have complete control over image placements, and layers especially when the browser is resized, where as the tables stand a better chance at achieving this with some help from the NOWRAP attribute.
All in all, while i was working on a new project (with Thomas) i tried desperatly hard to keep the layout 100% tableless. I came up with 3 very different complex 100% tableless layout but the final result couldnt be achieved without having to use the tag. Then i learnt something, its not about NEVER using the tag in your layout, its about finding the right balance. It is better and more efficient to use tables in your layout where necessary instead of using 15+ lines of CSS code to emulate the same functionality only less reliable. That way you will be leaving your site lighter and more organised :idea:
I want to know your views and opinions on this topic. To view examples of tableless layouts i suggest you check out:
www.alistapart.com
www.simplebits.com
www.clagnut.com
Kind of slow to catch on, I wouldn't be calling CSS '...the new word' its been around long enough, people have just been slow to change or remain stubborn. I don't understand this feng-shui business about keeping the balance right between HTML and CSS; what do you mean by this ? :?
I've managed to make at least 5 sites that don't use tables, when you say you needed to use one, what was its purpose ? (let me guess, you wanted it centred vertically... :P )
Other advantages of CSS include: :)
*A single external style sheet can be cached and re-used on every page, unlike the html pages. - This saves time, bandwidth, and ultimately; Money.
*Pages are dense with content rather than code so its much easier to view, understand and edit.
*Search engines will be indexing your content rather than your bulky layout.
The main disadvantage is getting your site to look the same in every browser; mainly its because: IE doesn't support web standards; virtualy every other recent browser does. To undermine this even more 90% of web users etc are still using IE, so until Longhorn delivers a new version, happy troubleshooting.
Something else to take into account is tables were never designed to build/display 'rich media websites'. If you haven't already witnessed the creations from the 'Zen Garden' project see the link within my signature. 8)
All this looks too tricky. Advantages doesn't impressed me but disadvantages ensured me that it isn't a good table replacement. I can show you what negative things I can see:
*Trying to understand the main idea of the site reading the code failed. If you need to understand site's construction you have to browse 2 files: original page and the css file.
*All scripts with falling menu and most of other JavaScript features are based on tables.
* It's hard to work with the site if there are too many details which are all written in css file.
*If there are all ot of pages with little differences you need to keep all this different style's in one file. And this turns css file into a desert where you need to find a small rock.
CSS was designed to simplify html docs to make work with them easier. Maybe I am wrong but still I don't like the idea of table abolition. Time will tell is it good or bad.
Trico what i was saying about the balance between HTML and CSS is to find the most efficient and browser lite way of generating your desired layout. This can be done on either HTMl or CSS so which would you choose would be the balance im talking about ;)
Also, to answer you question, no i can manage to generate a vertical center aligned layout, but the problem with CSS is having mutiple columns that dont break up and degrade during a browser resize. I've tried many ways and all the reference sites i've looked up all couldnt shake off the bug. SIply because the DIV layers would fall under each other rather than stay beside each other permanently. Of course im talking about relative columns here - since you can always use pixel fix to glue layers together.
Another thing i want to bring to your attention is something you suggested yourself. Zen Garden - visit the site and try selecting a small portion of text in IE. Do you see the result? Thats what happens if you try being too abitious with CSS.
The solution is simple, you can use CSS into a table tag to fix all your problems. An example would be something like this:
HELLO WORLD! This is a Tabled CSS Column 1
HELLO WORLD! This is a Tabled CSS Column 2
HELLO WORLD! This is a Tabled CSS Column 3
* where "tablecss" is a style defined in your CSS file. As far as i can see, its still simple, light and user friendly. And most importantly, now your layout is secure and immune to any layout bugs!
Using tags with css style adding I like better. I always use css files, so is it necessary to call this 'new word'?
Q: Why did the XHTML actress turn down an Oscar?
A: Because she refused to be involved in the presentation.
Q: Why was the font tag an orphan?
A: Because it didn't have a font-family.
Q: Why do CSS designers have too many children?
A: Because they employ lots of child selectors.
Q: Why was IE5's 3-metre wide cell in the insane asylum smaller than IE6's 3-metre wide cell?
A: Because the width of the cell included the padding.
here are some geek jokes for you sim :wink:
BlaZe i was referring to CSS "tableless layouts" being the new word (or going to be since its populating the web even more) even though it has been around for a while now. Noxcel, those jokes were just wrong - never use them in public again heheh its for your own safety ;) :)