CSS 100% or HTML and CSS?

What's the best way to build a website?
Css is very flexible, but does not show the same on all browsers and all versions of each browser. Html does.
What's best?
A site 100% CSS or a site 95%HTML and 5%CSS ?

 

It is kind of difficult to imagine a website with 100%css and without any html at all . Many web-designers are purists and somehow think that if they will label "100% table-less css design" it makes a difference.

Basically, the answer is do whatever is easier for you. Do you use styles when you write a document in Microsoft Word, for example?

Switching to mostly using css for formatting does require major adjustments to your coding style. And you need to learn all the tricks and hacks and strange things to make the page to look the same in different browsers.

 

Well when you code a site, you try to put as much of it in the css, because it makes the code less cluttered. And don't use HTML use xHTML it loads faster and its better for editing reasons.

 

Adding a slash after <br> so it is <br /> definitely makes your page to load faster. This is the example of purism I am talking about. Show me a page in xHTML that loads significantly faster than its analog in HTML? Is it about potential microseconds difference in parsing time? All this done for buzzwords to say that it is designed to be a "pure xHTML" solution.

 

You need to know what your end goal is. If you are wanting a very flexible site that can be viewed on a variety of platforms without redoing the structure of the page, then I think that doing a CSS design makes that easier. It does take longer to code that though in my experience.

I don't use straight HTML tables anymore and haven't for a long time. If your site is 80-90% designed with CSS and the rest is using HTML for structure then I think you are doing all right.

The big thing is not to get hung up on this issue. Making a site that works is much more important then doing it one way or the other.

 

I agree with you a simple slash is better than css over loading" by the way do have any realy easy how to set up a note pad type web site??? I here this is better than Dream Weaver??? altough many say DW is thee best html editor and better than almost every other?

 

I personally do not believe in table less layouts. I have always been for combining css with tables for layout and most professional templates you will buy do the same.

There is no reason to use only css-p for layout because of cross browser compatibility. Tables will give you the same results everywhere.

Additionally, look at websites like about.com, they use both.

I know people claim that tables are not meant for layout but the thing is that many things in life were never meant for what they are used. Just because something isn't meant for something does not mean it can't be used for the job. If it gives good results, and tables for layout do, then why give yourself a pain using css for layout?

So, I always design using css and tables. Just my opinion and way of doing things.

 

People don't "claim" that tables are not meant for layout. The W3C have laid out the standard for web design right here (http://www.w3.org/TR/WAI-WEBCONTENT/#gl-structure-presentation).

Most notably:

"Control presentation with style sheets rather than with presentation elements and attributes."

Anyway, anything you can do with tables you can do with CSS. It may take a little time learning new techniques, but isn't it worth it when your code and websites become faster and more accessible (and more SEO friendly)?

Also, if you look around at a lot of the more popular template sites these days you will see that companies and people looking for websites are looking for VALID XHTML and CSS cross browser compatible based websites.

Sites like About.com and other big sites are using tables because more often then not it's legacy code and they don't have the drive, need or want to update to better code. Also, more and more big companies are switching to CSS based layouts (ESPN.com for example, and I belive that Yahoo uses mostly CSS based layouts as well.)

 

BULLSHIT!!!

Vertical align dynamic height content centered or bottom? 100% height model with no CSS hacks? True equal column heights when faux columns just won't cut it? ...like say aligning content to the bottom without expanding other columns or worse when you'd need a 250k image in place of three 1k ones? Even when you can approach the desired result it often ends up MORE code and even more REAL hacks than just using a table in the first bloody place.

I am a huge advocate of separating presentation from behavior - but there are a good number of cases where a table is more efficient, less code, and has better cross-browser behavior... ANYONE who writes a HTML accessability device that cannot handle what a 386/33 was able to do under windows 3.1 a decade and a half ago deserves a brick upside the head - hence the reason that whole 'side by side' section of the W3C recommendations is garbage... But then I consider their 'guidelines' and 'recommendations' EXACTLY THAT. THE WCAG IS NOT PART OF THE HTML OR XHTML SPECIFICATIONS. It is, as the subtext of it's header indicates, a RECOMMENDATION, not a hard-fast rule. People seem to be misunderstanding the word 'guideline' the same way some folks seem to miss the meaning of the word 'beta' of late. Oh my god, you mean a beta has bugs?!?!?. Quite frankly when a recommendation gets in the way of delivering content to my users the way I want it to - to hell with it.

AND in terms of being more efficient, less code and better cross browser there are a number of cases where the same could be said about DIV based layouts... Therin lies the problem as your more rabid zealots go completely nutters saying never ever use tables. You know what? **** them. Right tool for the right job, quit trying to shove that square peg into the round hole.

Notice that up above I call it DIV based layouts - I get sick of this CSS vs. Table as it is NOT CSS vs. table. Table elements can be styled with CSS JUST AS EASILY as DIV's. (especially since CSS throws all that cellpadding, cellspacing, border, align and valign crap in the trash!) The arguement is not for CSS but for using DIV's or the existing semantic block tags instead of TABLE.

Between the bullshit myths about what tables can and cannot do, the bullshit "Oh div's can do everything tables can" malarkey, the utter NONSENSE of "tables for layout being a hack" you need a backhoe and two dump trucks to dig deep enough to find any semblence of sanity or even rational thought on the subject.

What do I mean by myths - have a read:
http://forums.digitalpoint.com/showpost.php?p=4053595&postcount=3

and notice immediately after I also put when NOT to use a table.

A LOT of the problem stems from people just overusing tags - people who endlessly wrapped table inside of table inside of table on layouts that only needed ONE table, now nest DIV inside of DIV inside of DIV for things that quite often only need one DIV... and I don't know who's been going around telling people you can only assign classes or ID's to spans and div's, or that whenever you apply certain stylings you have to use certain tags, but I meet said individuals in a dark alley and those of you in the front row will get wet.

It's enough to make me wonder if the whole thing is little more than people being unable to keep track of actually closing all their tags. (which is real fun when you get the people who rant and rave about tables being a hack, but can't be bothered to validate their code)

 

That is why I used css-p and not css because people often forget that css and css-p is very different. It is not css vs tables but css-p vs tables. And I whole totally agree with deathshadow.

 

And you know what? You're still using CSS.

 

this is a really hot topic.

 

css is faster and cleaner but harder to build a website in css than html.

 

It's not that hard once you zero out the margins and padding on everything (with one single style rule), learn to avoid relying on browser defaults (which obviously vary from browser to browser) and how the browsers work, especially if you deisgn with accessibility and usability in mind (without putting so much emphasis on it that it ends up being a crutch rather than an aide).

 

Now that I've learned some simple rules - and wherever possibly separate my content from my presentation, I've found it simplifies the process, not makes it harder. It is just different - no more or less difficult.

I do think that what difficulty there is comes from breaking oneself from even THINKING about what the page is actually going to look like while writing your HTML. It's the biggest mistake people make - but again, I think 99% of web designers have their process backwards.

Semantic minimalist markup for content, THEN Layout in CSS, and only THEN start up your goofy paint program to hang graphics on your layout. The simple switch of working CONTENT FIRST (since it is after all the most important part of the page) does wonders for usability and accessability, especially when compared to tossing together some goofy picture in photoshop then trying to shoe-horn it into HTML then shoe-horn the content to actually fit it.

MAYBE instead of diving for the shoe-horn, one should just get a bigger shoe. (it worked for Khrushchev)

 

should we bang our content on the table in anger?

 

Well. According to modern standards (www.w3c.org), you shouldn't be using tables to create website layout. You should be using CSS. Reasons:

1) Tables loads slower and they cause source code to be cluttered. CSS loads faster and the code is less complicated.

2) Imagine you are going to modify your website just slightly. When you have one or two CSS files that define site layout, you will need to edit just those few files. When you are using tables, then god be with you. You will have to edit almost every *.html file. The bigger the site, the greater amount of time required just to make minimal modifications.

3) CSS gives you more possibilities than tables (yes there are few things that tables are better at but that's just 1%...).

4) There are probably more advantages of CSS over tables but I was writing this just from my head.

 

Wrong, they RENDER slower - being a 386/33 can render a table, that shouldn't even be an arguement.

No, bad coding practices causes the source code to be cluttered. You can make table layouts as clean as purely div based... CLEANER in a number of circumstances.

Since you can use CSS to style a table, that's kind of a wierd thing to say... Since CSS is actually a second file, in terms of actual loading time it should be slower, not faster

One look at holy grail... uhm, no.

Now THIS is the best arguement against a table based layout, but given that sight few DIV based layouts can be re-ordered 100% via CSS anyways unless a lot of forethought went into the markup, it's not as good an arguement as it sounds... If one was REALLY worried about restyling, they probably already adopted SSI/CGI/SGC/PAFNA - even if it's simple stuff like SHTML.

I can rarely think of 'more' - different way of doing the same things perhaps... but not 'more'.

Again, it's more about overusing any one technique and writing clean code... REGARDLESS of what approach you take.

I actually agree that tables aren't the ideal solution in most cases - but MOST of the arguements against tables hold water like a steel sieve. (I hear that's the best kind)

 

When I said "tables load slower"... I meant that table won't show up until it is fully loaded. But divs in css layout will be appearing one by one... so when you have really huge site, it will kinda "load faster" with css. Divs will be appearing one by one from top to bottom so user can already read the website while it is loading. This is case mainly in huge sites where you can scroll down very far bellow end of your monitor.

Of course you won't see difference in speed when you will visit some small blog or portfolio website.

 

read up on table-layout:fixed;