Question To All Webdesigners

I know that a few people here do webdesign for a living, so I feel free to tell a story and ask a question that I would probably get flamed for on any other board.

I have been recently working on some small websites and this time I really wanted to go all the way to valid CSS/HTML but it is driving me crazy. I fiddle around with stuff for hours that I would have done in minutes with tables, my software tells me every five minutes I am using obsolete/wrong markup (when did

become invalid ?), I seem to be unable to properly place a
lately and whenever I test my stuff on browsershots I get atleast five completely blown versions of my webpages, each one more horribly than the next.

I have really tried to read into proper CSS but I am about to give up. You seem to need a different fix or workaround for about anything for every major browser, stuff that works in firefox for me does not work in IE and when I make it work in IE it doesn’t work in firefox anymore.

Which made me think : Why exactly is it so bad to use table-based layouts ? I know how to do it, it looks almost the same in every browser and the people coming to my website surely give a sh** about the technique behind it (and I can live with the odd webdeveloper once or twice a month looking at my code and having a laugh).

So, why exactly is it so urgent und unavoidable to learn CSS and leave tables behind ?

(And if it isn’t, what is the proper !doctype to tell browsers/searchengines “hey sorry, I am oldschool” and avoid all those errors when you test your page ?)

Edit : Oh, and I am not talking about the real oldschool-shit with transparent gifs and such. Just using tables to lay down the basic grid and arrange the elements, including CSS for making things look like they are supposed to. Just not CSS for the actual layout.

people use IE?

sadly, yes. even the majority.

http://www.thecounter.com/stats/2008/February/browser.php

AMEN to that Looza!

Case in point: http://www.markdollin.com/

(pay not attention to me, I’m a complete hack…)

Using tables is bad for the same reasons why using non-free software on linux is bad. I still often do table based or hybrid designs cause CSS designing is often more complicated than neccesary.

Also IE sucks. And now there is two of them! If it works on Firefox it definitely won’t work on IE6 and IE7. If it works on Firefox and IE6 it is definitely broken on IE7. If it works on IE7 and Firefox, it won’t even load on IE 6.

Microsoft should atleast publish some list where they have broken their browser, so I could take it into consideration. I need something to go by. Would do it by the W3C specs but, they apparently don’t apply to market leaders.

You totally lost me there… using tables for stuff like “side nav, top bar, main content” is bad, that is, sub-optimal, but not tables per se…it’s not like they got dropped out of html or anything.

Maybe you’d like to work with a CSS framework instead? Takes a little to learn, but speeds up the site development in the end.

http://www.yaml.de/

Welcome to the battlefield :P

Div design is definately the better option, much easier to read and code. Download a few basic div examples and study how to place the elements.

Anyway you should be able to use tables and still validate, just use CSS instead of table parameters.

Maybe when you validate your stuff, it lets you know which parameter is wrong, then go look up how to do the same thing with CSS.

A reset stylesheet might be good I suppose, for example the margins each browser shows around some tags, like headline tags, is unique to they own likings, so you have to define the margins yourself if you want all browsers to show the same.

Just don’t forget your table skills for when you need to do HTML emails… :wacko:

Yeah yeah, I know. Been developing web for years.

It’s just when you need something weird done quickly, tables are still unfortunately the fastest and most reliable option. Yet the CSS nerds get angry at you and start lobbying you to start div-ing away.

Either way CSS design is sometimes a bitch when you need to do something quickly enough. Hacking for IE takes more time than the actual content/design split benefits you.

Yeah, but we are nice musicians :)

Most of the usual stuff that was common in the old days became obsole.

is just one of them. Also is not allowed anymore.
There are several reasons for that.
HTML is just a language that tells the browser what kind of element it has to display but not how it has to be displayed. So a simple h1 just tells the firefox or the ie that you have a first-headline. The color attribute is possible although not allowed because the STYLEsheet defines how the elements have to look like.

The IE is a pain in the ass. There are some “hacks” available, URLS were mentioned in this thread before but you are right, IE simply sucks. On the other hand the firefox doesn’t accept standards 100%, too.

Tables are complicated and produce a lot of Data. In times of DSL and cable-connections that doesn’t matter anymore but Tables have some other downgrades. First of all the HTML only works in a browser for a computer. Mobile Devices are usually not able to display table-layouts properly. The other thing is that HTML was invented to be for ALL people, even blind ones. If you have a table, you have 3 columns and the text-reader first reads the first column (which is usually the navigation) and then the second one (which is the contents). This is not good, another group of potential users is locked out.

Searchengines usually spider for Semantic HTML. They search for the then for

and so on. The table-stuff is usually stripped out because it produces too much overhead and senseless information.

You should definetely visit css4you.de :) You will wonder what is possible with nice CSS. Or visit my site to see nice hover-effects that were created with CSS only. In oldschool-Times you needed Javascript for that. CSS has more advantages: You can create a print-preview just by loading another CSS-File.

For example the header-pic on trancefish.de - if I want to have a print-preview I just load another CSS and set the header to invisible: The same counts for the navigation: All is done just by changing the css and I don’t have to change any HTML.

http://www.csszengarden.com/tr/deutsch/ is another nice example what happens, if you just change some CSS.

Btw: Here is a complete and searchable CSS-Documentation: http://reference.sitepoint.com/css

For the possibilities inherent with CSS, check out CSS Zen Garden… a place where people make different css stylesheets for the same document… there are some beautiful css hacks there.

That asside, I do use tables fairly often for layout… because I’m not leet enough yet to get CSS to keep my site looking the way I want it to when the browser collapses. Valid XHTML + CSS isn’t flawless either… the dreaded table + rowspan is still needed on several occasions.

IMHO, the best website about CSS is http://www.cssplay.co.uk/

There you can find how to do some common tricks and effects.

Also useful this pdf you can download here: http://www.gosquared.com/liquidicity/archives/33

No, text-align applies not just to texts!


  

  
 ![](blah)  

caption

  

  

  
 ![](blah)  

caption

  

  

  

Yeah it’s crummy, but then again I don’t know what exactly you were trying to do, and besides I’m not exactly a CSS ninja myself uh…

But that puts the browser into “quirks mode”, opposed to “strict” mode. I think it’s easier to get consistent results in strict mode, but I may be wrong.

According to what I read Opera does refuse to center anything but texts if you use text-align. And there we are back at the hacks/workarounds.

That is true, so I guess I will just use the best of both worlds, I can still position the navigation on the bottom of the sourcecode using CSS. Because I can also place a table anywhere I want … :)

I am not really feeling like giving the link to the website I am currently building because it is a horrible mess at the moment, but maybe I will post the link later and ask for hints/ideas about that.

But I’m using Opera right now and it seems to work…?

I use the “minimal tables” principal outlined in this best practice document:

http://developer.apple.com/internet/webcon…bestwebdev.html

I read that somewhere and haven’t really tried it out.

And thanx conner, that’s exactly what I am talking about. Didn’t know there is a name for this.

And btw, one thing that gave me loads of troubles is this :

I want a list of images with a descriptive text. The images are in a vertical list with the description to the right. So I use tables for this and the validator tells me “oh, you are using table-layouts”. Which made me think “why, yes, because it is basically a table of images with descriptions. What’s wrong with that ?” … Strange new world.

You have the wrong doctype declared. If it’s valid it shouldn’t complain.

But on another note, this is how you do it without tables.

  

  
 ![Text](image.jpg)  
  
 Your text goes here  
  
Whatever you want  
  

  

   
  
/*   
Rinse and repeat the above   
CSS bellow  
*/  
  
.thumbnail {  
 float: left;  
 margin-right:10px;  
 /*whatever */  
}  
  
.adjacent {;  
 float: left;  
 padding: 0px;  
 width: 440px;  
 /*whatever */  
}  
  
.clearer {  
 clear: both;  
}