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.
The next time you start something new, try putting in a XHTML dtd to force the browser into strict mode: http://www.w3.org/QA/2002/04/valid-dtd-list.html At least I “discovered” that lately and it fixed some stuff that didn’t look like specified even in Opera. Might not solve all your problems, but is worth a try!
I don’t think it’s taboo to use tables, but here’s some reasons:
with tables, the whole table contents need to loaded before anything displays.
with CSS, you can put the navigation at the back of the HTML, yet still have it show up on top/ to the left:
#nav {
position:absolute:
top: 0px;
left: 0px;
width:200px;
}
#content {
position:absolute:
top: 0px;
left: 200px;
}
My, aren't you a handsome search engine...
Yadda yadda!
Also, the content displays instantly and the sidebars show up when they got loaded. Not important for many pages, but kinda neat for huge ones.
I suggest you definately learn position (absolute/fixed/relatiive) and the “float” property. I mean keep looking at it every now and then to let it sink in, not forcing yourself to “get it” in one go.
I don’t think tables are “illegal” in any way. I mean, they’re unbeatable for, uhm, tables of data
Last but not least: http://www.positioniseverything.net/ ‘to explain some obtuse CSS bugs in modern browsers, provide demo examples of interesting CSS behaviors, and show how to “make it work” without using tables for layout purposes.’
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.
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…
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.
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.
which does only work for texts, div align=“center” used to work for everything, images etc.
Now I need to use margin or some other construct I don’t even know yet. I spent an hour yesterday trying to display two images with text underneath next to each other centered on a page. I just couldn’t make it work. (and again the blown versions looked completely different on browsershots)
I use “transitional” because it sounds like “oldschool elements coming through, sorry …”. Did I get that wrong ?
I read that too, and it’s not true. First of all, the same thing applies to CSS. If you have alot of wild/nested stuff with CSS (not unlike nested tables) you will look at a blank page until it’s fully loaded. I’ve seen enough of those. If you use tables and really define all image-widths it doesnt take longer for a table-based page to build. On the contrary, if you have your whole header/navigation on the top in one
this one will be displayed as soon as the
is loaded and rendered.
Secondly, we are in the boradband-time. My pages have a sourcecode of 5-15kb, this loads in an instant.
And this is a prime example of why CSS pages don’t load faster than table-pages. You have your website with all the content, and at the end you tell your browser “oops, there is something that needs to be displayed at the top”. Kinda stupid. And I know the search-engine-arguments, but I am not making pages that compete with 10.000 similar ones.
I am doing this already. I think I didn’t really explain well, I am using CSS for almost everything, text-style, imagestyles etc, etc, and I do have a whitespace-hack in every one. Just not the basic layout.
I know, that’s why I asked
Which again is utter bull. I read something very interesting yesterday while googling on that matter :
What difference does it really make though? Well, here's the HTML for the equivalent table:
| Header |
| Navigator | Body |
| Footer |
And for the same page in CSS:
Header
Navigator
Body
Footer
This is actually something I can live with, I don’t do websites for mobiles or blind people.
But a table does not hinder me from using h-tags and styling them with CSS:
BTW, to see what I mean just take a look at my webpage, its an old one and the approach was not fully right, but it’s abit like I mean : CSS to style how things look and tables to get the layout done. And a search-engine does not really see alot of garbled markup or something.
I will probably just do those pages with tables (because I want them done now and then I give CSS another go.
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.
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.
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.
