Forum Moderators: phranque
I've never had any 'formal' training on how to develop websites. I've been doing it on and off for about 10 years, learning as I go, always teaching myself. I've taught myself html, php, sql, some unix stuff, and just basically whatever I've needed to run a website. At first trying to figure out how to make everything go where I wanted it was a tough job. In addition, I never even heard of css until I was years into making basic websites, and my habits had stuck. When I first started I got into the habit of using tables to structure the pages and make them look the way I want because it worked and was very simple.
I haven't changed.
Why? My question is why should I? I'm not trying to be negative or derogatory to the CSS layout crowd with that question either, I'm genuinely interested in hearing why I should switch.
Tables are easy to create, easy to understand, don't break in different browsers... they just work. I know that semantically they're for data and they aren't designed to be a layout element, but there are examples of stuff like that everywhere. Tires aren't made to be swings and AOL CDs aren't made to be coasters, but if they do the job quickly and effectively... why should I care? My visitors will never notice any difference unless they're technical, which most certainly aren't.
In fact, I have a couple very successful websites of which I'm very proud. Both generate income and both use tables for layout. Both look exactly like I want, both do what I want, and both are easy to work on if I need to make changes. I use CSS on each, but only for styling issues so the CSS is pretty basic and easy for me to understand. I would say that I know CSS enough that I can write a stylesheet that will change the way things look, but when it comes to positioning divs and floating things I'm pretty much in the dark.
It's not that I haven't looked into it, but as soon as I start digging into how to replicate a simple table layout in css I get discouraged.
Tables are just so... Simple. Quiet. Unassuming. Comforting.
CSS is Quirky... Unsupported at times, and even when it is, you have to really tie it into a knot to make it work like a table.
I guess it's just that I don't quite understand why many would perhaps consider me to be an amateur simply because I choose to use tables for layout. I'm by no means what I would consider to be a professional or a guru, but I design sites both on my own and at my job... and I think my peers at my job would consider my work to be of professional quality. Then again, they don't see the code. Then again, neither do my visitors.
When the final result is the same, do the methods really matter so much... at least in this case? I'm not interested in hearing why I'm supposed to do it another way, I want to know what I'll quantitatively gain if I switch.
Thoughts?
The W3C. It is a body made up of the largest corporations on the web.
Interesting take. I generally enjoy blaming the corporations :) And they are indeed to blame for a lot of the nonsense going on, but look at a couple of things from a different perspective.
1. We were bitching and moaning when Microsoft IGNORED standards. While for the wrong reason, *aka because Firefox became a threat, they finally joined the table. And this table was about making a standard that the major browser makers followed. If they don't join, then those jerks are ignoring the standards we need so we don't code differently for each browser. If they do join, then those jerks are controlling the agenda and they are to blame for the problems we as developers face.
So OK, let's say they're jerks, how can they do "the right thing?" They're damned either way.
2. I haven't googled this or anything, but as I recall Howkum Lee (probably mangling his name) from Opera invented CSS, or at least was instrumental in helping define the standard. I'm probably off on some details, but the point is, the people who built CSS didn't do it to control the web...that's Microsoft's game. They wanted to provide a way to control every single aspect of the presentation of each element. Padding. Margins. Borders. Etc... that was a lofty goal.
3. I hate that you can't make a layout simply and easily as you can with a table, but is it because of the reason you stated? Namely:
The whole point of the "new standard of the day" is to make web content so complex, only corporations (such as those that control the W3C) can generate it.
I haven't used expressionweb since Frontpage changed the name, but I have used dreamweaver lately...which is supposed to have help from none other than Eric Meyer if I'm not mistaken (again, sorry for not googling before typing)....well that was done in response to major crticism of their product. But that sucker still does a crappy non-intuitive job of laying out CSS presentations in their "View mode".... Their templates may work, but if you can't view them properly, why use them?
If DW still sucks for CSS, then I doubt Microsoft's EW did better...
And the fact that MS's latest IE plans entail THEM having to include each version's rendering engine in the next release of IE, which is an expensive, complicated and convoluted solution that will be at their expense...it just seems more incompetence than a grand plan...at least in this case...
Intentions can be determined by looking at the results. Sometimes I think the real world results of the W3C have become the business of putting you and me out of business (shrug). The only thing the W3C has done, has been to help consolidate power in the hands of the IT elite and discourage competition.
I can sympathize with that feeling too...but I just think it's more that when you put competing interests together, and decide by committee, you become incompetent.
Either way, I agree it's a huge mess...the burden on the developer is enormous...and the medium sized web development companies that can nail web standards have a lot to gain from this...because it's hard to learn this correctly and test in all these browsers..
I wish we could band together and form a new, smaller internet... I have lots of ideas for this, and if we could get a few hundred developers behind it, maybe we the independent can get something started. Brett behind it can start a revolution.
We need new protocols. More secure email protocol built with the spamming Internet in mind rather than friendly universities... More secure IP protocol, where spoofed IP's won't happen because an IP won't be trusted.... Extra protection for domain registration where tasting and auto-registration won't be possible and a real person's name will be attached to each domain... A fork of Firefox where all engines rendering a new CSS-type protocol will have to be certified and perhaps even based on an approved Firefox engine. Who needs so many browsers? Why not one internet, one cross platform open source browser? (The mobile web & accessible web would require a solution too). The newer, smaller internet would be cooler than the current one, and eventually, everyone would want to follow and MS would not call the shots.
Anyway, I have a dream, but I know that it's a fantasy and I've taken this too far off topic so I'll shut up now...
I wanted to say ie instead of aka but I thought it would confuse people ;)
Edit: Of course a couple minutes after writing this I find out MS backed off their IE8 plans [microsoft.com].
[edited by: Clark at 5:51 pm (utc) on Mar. 4, 2008]
I have moved to fully-CSS developed sites after coding tables for roughly 10 years, and granted it took a bit of time to get used to, and the nuances and browser incompatibilities were tough to work around. But, now that I have made the switch and done the rigorous job of learning, I would never go back. I do occasionally for HTML-based emails, however.
I can lay out a site in CSS almost as fast as I ever could with tables, including working out browser inconsistencies. I never use hacks unless it's absolutely necessary (I will admit, I use the Inman footer positioning technique, which is certainly not "best practice" but it works). If you're using a templating system like Dreamweaver templates or a CMS, site changes aren't a huge issue, but my workflow adapts very nicely for using CSS layouts in this environment, too. Even with a templating system, I have to admit that site-wide changes are a ton easier with CSS.
There are really two paradigms for CSS layout: Float-based layout, and Positioning. I was a float-based coder for a long time until I read "Transcending CSS" by Andy Clarke. This has been one of the best books I have ever read and I highly, highly recommend it. It's pretty pricey but well worth the read. He approaches semantics in a very easy-to-understand way and provides great information on how to apply that to your CSS.
I don't have a ton of experience with text- and audio-based browsers. I have heard that tables can be a nuisance for them, but I imagine considering how much of the web is table based, there is a workaround in these browsers for that. That said though, it seems proper and semantically-correct CSS is a more accessible format.
Lastly I will say that my Google PR and search traffic has fared much better since moving to CSS. It seems my sites get crawled faster and earlier, my PR gets ranked faster, and the amount of organic as compared to direct/ad/ppc traffic seems to be much higher earlier on. What once took several months to achieve in traffic trends now seems to happen in an average of half the time. This could be just the evolution of the web and my own experience though, so this is debatable. =)
All in all, it really is a preference. I'm just really glad I made the switch, but it is a rough road. The first few sites you build in CSS will be painful--very, very painful. In the end, I really feel it's worth the effort though.
A number of people have mentioned one of the key advantages of CSS over table-based layouts: flexibility
And it's true, but what no one has mentioned is that when a site is generated server side (PHP, etc...) the same flexibility can be easily achieved regardless of the style of HTML coding.
I've also seen where table using webmasters are regarded as stubborn idiots who will never be true professionals.
One might wonder why these posters, being true professionals, aren't working instead of spending their time on forums trying to create arbitrary standards of competence :-)
Tables are just a solution, as is CSS. Use the appropriate solution for whatever requirements you have.
Ahhhhh, common sense :-)
Myself I try to use DIVs wherever possible but I have no hesitation about using tables if it will save me an hour or two (or more) of cross browser tweaking.
Purists may call it wrong but, fortunately, their opinions are not going to hurt either the ranking or usability of the site.
I wholeheartedly agree that deep nesting of tables is a bad idea.
Though for various reasons I pretty much always do CSS layouts, I do think that the bending over backwards that CSS requires to do simple things indicates that it is still an immature technology. If doing floats and layout in Quark or InDesign were still that arcane and difficult, every print shop would still be using custom solutions and manual typesetting IMHO.
>>but that's a hardwired "design" and is not a separation.
Exactly. No separation = less abstract = easier to learn = lower barrier to entry = rapid spread and great popularity.
Does that make it better? Of course not. But how many people own newspapers? Why, because it's a high barrier to entry. How many people have Facebook profiles? Are Facebook profiles better than newspapers? Of course not, but they are more popular. I think that's what Brett was pointing to when he said "think about it" (my crystal ball was broken, so that's just my opinion, not channeling Brett of course and not meaning to put words in his mouth).
>>but that's a hardwired "design" and is not a separation.
Exactly. No separation = less abstract = easier to learn = lower barrier to entry = rapid spread and great popularity.
easier to learn for whom?
>>lower barrier to entry =
not this time around, last time (again) maybe which is why this debate even still comes up after all these years, now it's just singular webmasters or people in charge of their own who even need think about it.. you use what suits
this time around CSS actually has the lowest barrier to entry, thanks to sites like "facebook, squidoo, bebo" - the barrierto getting your page up there is no longer tables or programming.
we're pretty protected here at WebmasterWorld from the "how to fix my facebook profile" type questions (for which I'm grateful) but there are far more of them than tables, or php programming questions ;)
[edited by: SuzyUK at 10:06 pm (utc) on Mar. 4, 2008]
<table id="main">
<tr>
<td id="top-nav">
</td>
<td id="content">
</td>
<td id="ads">
</td>
</tr>
<tr>
<td colspan="3" id="footer">
</td>
</tr>
</table>
Everything else was done with CSS. Not a bgcolor, cellspacing or cellpadding in sight. And also not a css hack in sight on my style sheet.
And the result? I could actually reduce my style sheet by about 15% in this way and my content to tag ratio, one of the main reasons for going css would be more or less unchanged: ten tr and td tags is no different from ten div tags at the end of the day.
Why is using CSS for layout evil?
What advantages do tables offer (which were essentially a hack to enable complex visual design) over CSS (developed to enable the separation of design from HTML)?
<table>
<tr>
<td align="left">content left</td><td align="right">content right</td>
</tr>
</table>
If they just made that possible this whole discussion would be moot I think.
The site was coded without tables, using the most common solutions (hacks?) for making a 3 column layout work with DIVs... and it was a mess. Even small changes unrelated to the layout would break the layout, I'm sure many here can relate to this.
Because this wasn't something I was going to spend a lot of time on, I implemented a simple table setup similar to the one that esllou posted.
The header remained outside of the table layout (or in other words, perceived load time still looked good) and CSS still controlled all formatting, including cell dimensions.
The result was cleaner source that was actually smaller despite the fact that I didn't make any attempt to compress or reduce it's size.
I could have done the same thing with DIVs (and would have in different circumstances) but it would have taken me three times as long and the end result would not have been superior in any practical way.
Side note: Tables were/are a "hack" in the same way that HTML itself was a "hack".
For some aspects of web design, yes, for sure. But then to get a layout to come out right, there's all kinds of semi-arcane knowledge about getting floats right and so on and so forth.
>>the barrierto getting your page up there is no longer tables or programming.
You weren't there when my wife was pulling her hair out because her perfectly good Wordpress template was completely fubarred because she had the audacity to include a floated image that was taller than the post text.
>>easier to learn for whom?
99% of the people in the world. The evidence is everywhere you look in the world. Keep in mind, I'm originally taking up on Brett's comment about why PHP is popular, not on whether or not styling fonts with CSS is easier than font tags. The connection is that learning simple concrete methods is easier than learning abstract complex methods and, like it or not, methods that require you to know about Tripswitch [webmasterworld.com] (ha! caught you red-handed) and the star hack are arcane and complex. It's hard for me to even see where that's debatable. And it doesn't matter if "that's IE's fault" - that makes no difference trying to get her first site to look halfway decent.
It's almost always harder for people to learn the abstract methods. Looking at a problem abstractly requires that one understands principles and understanding the principles has a higher barrier to entry than copying things discretely and learning them concretely. This is not a CSS/HTML issue, but a basic observation on the way people learn.
One could go on endlessly. I would say this is a fundamental principle of how people learn things. They start with the concrete and then learn how to move up the abstraction ladder. In fact, that more or less describes how the curriculum is structured in every education system I know (principally just the US and Europe). One of the key differences between kindergarten and grad school is the level of abstraction.
So back to the original comment, this just flat out means that if you take someone who has never created anything on the web and has never had any design and programming experience - in other words a total beginner - and ask them to use PHP to create a web page, it will almost either
- take the person a long time to produce that first page
- or that first page will mix PHP and HTML and use <Hx> tags and bold to achieve the text effects they want.
EDIT: My mistake, you wanted content blocks, not floated inline information.
On this note, perhaps at the outset the 'css' term's definition was meant to include the '<div>' tag (although I have yet to find this anywhere), css' practical use is simply styling and positioning. <div>'s and tables are simply frames to which styling is applied.
Today I use tables for my main page structure, and div's within (where their implication isn't too onerous or platform-unstable - for collapsing menus for example). The only + I've found in div-only columned layouts is 'middle content first'; if I have no need for that advantage, tables stretch and expand just fine without the added nesting/styling/tweaking/hacking headaches.
[edited by: Josefu at 7:49 am (utc) on Mar. 5, 2008]
Personally I'm used to implementing semantic markup, so even if the design I come up with might be easier to design with tables initially, I find changes a lot more simple to put into practice later. I think that's already been mentioned, along with the additional bulk and bad SEO practice.
Regardless, I think it's just mostly down to experience.
Learning isn't obligatory, neither is survival.
P.S. Did anyone hear about the implementation of CSS tables in IE8? Sounds interesting.
HTML was designed to make webpages show something fancy compared to plain text, it defined the layout and the content on the same level (how nasty), but at that time, this was fairly enough, nobody thought that 10 years later fancy layouts and shiny websites will be more important that the content it holds (because you do sacrifice content for better layout and for better SEO ranking).
As long as there will not be a technique or some sort of standard for defining bare layout (and don't tell me that it's the hacking of css), there will only be shades of gray, no black nor white.
[edit]found a typo[/edit]
Seriously, may each of us practice the truth as it is revealed to each. Table-abuse is not illegal (yet). Just don't hurt yourself and be sure that the table is consenting.
So, how do you css junkies live with having to constantly edit 2 (or mostly likely more) source files instead of one?
(Rising to the bait... yum!)
Your choice: in-element style attributes, style-element in the head, or separate .css file. Choose whichever minimizes work and maximizes flexibility/maintainability.
...from this discussion I can see why learning CSS positioning is so hard: It's hard to unlearn using tables. It's hard to put that crutch aside and stand on one's own.
I don't expect anyone else to make websites the way I do, but I just wanted to point out that someone's difficulty with CSS isn't always because they have to unlearn using tables.
The abstraction idea is one aspect, I think, but if someone's visually oriented I don't believe it's something they'll necessarily outgrow - or even something that they should outgrow if it's their best mode of operation. I was one of the weird kids who loved word problems in math, because the situation was something I could picture and figure out. I got hooked on science because I fell in love with the periodic table; I could see how the elements in one column would react with those in another column, and understand why it happened. I don't know that my thinking has gotten any more abstract, but I've become a lot more comfortable with ambiguity and complexity. Nowadays I deal with questions like, "Why do 85% of people with this mutation get this type of cancer, but the other 15% don't?", which isn't nearly as tidy as putting sodium and chlorine together and watching the bonds snap into place.
Dealing with complexity is something that has to be learned, too, and IMHO it's much better if someone builds something simple correctly than if they build something complex incorrectly. I'm really tired of online pages that are hard to read/use because the CSS doesn't work with the particular monitor settings or browser I happen to be using (both of which are different at home and at work, so I "get" to compare). And I come across more and more of them every day. I would so much prefer seeing table-based pages that work rather than have someone feel they have to use CSS and build pages that are broken.
[edited by: Beagle at 2:12 am (utc) on Mar. 6, 2008]
CSS and semantic HTML for web page layout is equivalent to Adobe InDesign for print page layout.
Although the web browser equivalent to the Adobe PDF Reader doesn't exist yet, let's not use that as an excuse to settle with MS Excel for print design.
Whether the curtains for the kitchen window are red or blue is presentation. Whether the dining table is glass or wood is presentation. But no matter what the "presentation" or decorating is, the dining room will always be either to the right or the left: the structure of the buildings' rooms is not presentation.
<div> and <span> have no "structural" meaning in the sense that <hn> or <p> do; they only designate some section of a page to which a style (presentation) will be applied. <div id="windows" class="curtains"> tells absolutely nothing about the structure of the room.
CSS is presentation; HTML marks up the structure of a page. Tables are structure, they're not presentation. How many CSS hacks does it take to avoid doing a page's structure in HTML (which marks up structure quite nicely, and is cross-browser compatible) so that the page will work cross-browser? Two CSS hacks? Five CSS hacks?
The whole use of <tables> for page layout structure is a hack. It sounds like people who still use tables for structure and presentation are too content with their hacky tool to switch to and learn the more correct (still hacky) tool.
<div class="room bedroom janes" id="room01"><p>Carpet</p><div class="window" /></div></div>
If you wanted to remodel, you can move Jane's bedroom to the south east of the floor plan, change the color of the carpet, move and resize the window (or hide it altogether), and resize the room all with changes to the CSS file and no chages to the HTML. With javascript, you can even bury the room under the floor and have it appear only if you push button. Can you do that if Jane's room was confined to a <td> in the first <tr> of page?
Both ways has its purpose; To make the bare layout of the website I use tables, when making forms (and I mean more than just a pair of fields) I use tables, but often when making toolbar like controls, help dialogs, captions for images, and many other cases, I'm using divs, because it would be messy with tables. Why to force myself using only one of them? Several posts mention embedded devices like mobile phones; If that's a requirement, I might consider using <div>'s for layout, with media selectors (if that works at all in this case), but until that moment I did not care about this problem, and I'm not subscribed to wireless internet yet, so I'm not affected either ;-)
So, how do you css junkies live with having to constantly edit 2 (or mostly likely more) source files instead of one?
In practice I limit my tables as much as possible. It's to the point where they are present just for columns. The remainder of my site is div's.
I also like tableless because it's much smaller in size than a table layout as far as file size goes. I'm going by my experience converting oSCommerce to tableless. It was a huge difference and the file was no longer cluttered with TR TD tags everywhere. I found it easier to find my place within the tag hierarchy w/o tables.
That's just my two cents.
Go here: [webmasterworld.com...] , cut-n-paste to a new HTML file, and take a look at it in any relatively modern browser. You will like what you see, I guarantee it.
[edited by: encyclo at 10:29 pm (utc) on Mar. 8, 2008]
[edit reason] fixed link [/edit]
