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?
Obviously I don't use tables to design a whole page. Most of the page is made via CSS. Some small parts of the page are made with tables when it makes sense.
Now, I wonder...
[groups.google.com...]
In the first paragraph Bill Gates writes on July 1991: "Several valuable thoughts have come out of these retreats (tables for Word...)"
Is the CSS crowd against tables because tables were first applied in Microsoft Word?
Is there a patent for tables in Microsoft Word?
[edited by: zafile at 8:08 pm (utc) on Mar. 3, 2008]
You have no idea who are visiting your website. You have no idea what browser is accessing your website. You don't know if it's a search engine robot or not.
CSS will allow you to write the page in the order you would like it to be presented to a "spider" or to a text-based browser. CSS allow you to separate "content" from "layout".
After the theory ... I still use table myself.
CCF
One benefit of tables over CSS that I think of:
- Probably more cross browser (as indicated by other users).
If none of the above is an issue for you, I'd say you use whatever you feel comfortable with.
If you're interested in my humble opinion: I used to design with tables, but switched to CSS when I "discovered" it quite a few years ago. I simply found it easier for me to work that way. It fits me. Less quirky (and I use standards doctypes). But I don't mind if tables design fits you. :)
Regarding the "cross browser issue" with CSS, it *can* be a bit tricky, I admit, but recent browser have fairly good support for CSS1-3, and the good thing about CSS is that if a browser don't know of a CSS property, it simply skips it. The contents of a page will always be readable, and that should, in the end of the day, be the most important...
Some would argue that MSIE (especially <7) has less CSS support, and since a good 70% (or something) of the surfers use it, then what use is a CSS styled page? I use Dean Edwards' standards compliance patch for MSIE [ie7-js.googlecode.com] and it does its job so good that I hardly never hesitates on using any "advanced" CSS selectors and stuff. My recommendations.
This topic seems to arouse strong feelings and emotions every time it's brought up. It's a challenge to formulate a neutral and impartial text... Even though I reveal my "choice of camp" I hope no one feels offended by this post. :)
I bought Microsoft Expressions (not a table in sight) as an upgrade to Frontpage 2003. The code generated by Expressions is almost endless compared to Frontpage.
Who/what organisations is driving the changeover to CSS rather than tables and why? Why, most importantly.
[groups.google.com...]
Basically, a Windows user built the help files in Microsoft Word. Then, using a help compiler, the user obtained a help package originally made of RTF documents.
Microsoft Word 1.0 for Windows (1989-1990) had a feature to create tables on the fly. Word 1.0 provided modern formatting capabilities to a table.
The following is a Microsoft Word 1.0 output code for a pretty basic RTF document with just a 2-line, 4-column table:
{\rtf1\ansi \deff0{\fonttbl{\f0\froman Tms Rmn;}{\f1\fdecor Symbol;}{\f2\fswiss Helv;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0
\green255\blue0;\red255\green0\blue255;\red255\green0\blue0;
\red255\green255\blue0;\red255\green255\blue255;}{\stylesheet{\fs20
\snext0 Normal;}}{\info{\author Kenneth Saborio}{\creatim\yr2008\mo3
\dy3\hr14\min55}{\version1}{\edmins1}{\nofpages1}{\nofwords0}{\nofchars0}
{\vern8368}}\widowctrl\ftnbj \sectd
\linex0\endnhere \trowd \trgaph108\trleft-108 \cellx2052\cellx4212\cellx6372
\cellx8532\pard\plain \intbl \fs20 \cell \cell \cell \cell \pard \intbl \row
\trowd \trgaph108\trleft-108 \cellx2052\cellx4212\cellx6372\cellx8532\pard \intbl
\cell \cell \cell
\cell \pard \intbl \row \pard
\par }
Hypertext Windows Help files were distributed in various ways including bulletin boards on the Internet.
Now, my main question is:
Do CSS advocates avoid the use of tables because prior art exists in the Windows Help system?
[edited by: tedster at 10:01 pm (utc) on Mar. 3, 2008]
[edit reason] Fix side scroll [/edit]
There's not enough time to really explain this well. I've had to read a TON of books, articles, code etc to finally come to understand the benefits of CSS and can't do justice in a few paragraphs. But I will address a few points...
quote from lammert:
There is no such thing as a CSS site. There are sites using mainly <table> tags for layout and sites mainly using <div>.
I assume you meant "and css sites mainly using <div>"...
and I disagree with you because the true web standards people do NOT use div to layout their sites. Divs are not the semantic way to layout the sites. There is a good article about that.
Bad:
<div id="someid" class="someclass">A sentence</div>Good:
<p id="someid" class="someclass">A sentence</p>If you do the first one, you may as well use tables to lay out your code.
As for Brett's assertions, I disagree as well. Before the latest changes to the vbulletin code, I knew that code like my back pocket (and will learn the new code soon). I've recoded the whole thing in a similar way as vbseo did (before he came out with his product), but I kept the code for myself rather than release it for public consumption.
So since Brett has built this software from the ground up..I can understand where he's coming from. To build a forum, yes, tables are likely the best way to lay it out and had VB gone CSS, it would have been a nightmare.
And in fact, one of the best known standards authors has a section in one his of well known books that shows how to use CSS to style and make accessible a forum layout...USING TABLES. Which is why I think it's a mistake to dismiss CSS. The standards people are aware what works/is practical and what doesn't and not all are pig headed about it....
However speaking of CMS's... Wordpress is one of the most successful CMS's out there and they use CSS quite well and extensively.
Doing massive sitewide changes in CSS is way easier than table based changes. Changes in my latest project were a pleasure. One file changes a million things. Need to tweak something on an individual page, just create an id or a class.
Client doesn't like standard H1 "look". One file change, all pages affected. Changes become easier than ever.
It is really really hard to get very good at CSS. And it requires more upfront work to get it right. But the advantages once you do so are many. I will never use tables, except for tabular data, again...
Who/what organisations is driving the changeover to CSS
and why? Why, most importantly.
CSS 3 has a thing called columns, which emulate the behavior of tables, but I fear that they will not be cross-browser friendly.
And for anyone who says that tables are just plain dirty and shouldn't be used for that purpose, should look at their very dirty CSS file, that contains hacks galore and a multitude of extra lines just to emulate a table layout.
And I don't get why people are debating tables vs. CSS. You can use both, making the "ease of updating idea" a non-issue.
An oft repeated and repeated half truth. Consider:
Consider the code itself:
I believe that the average site will use more bandwidth under CSS that before. That fact grows with the age of the site.
> After the theory ... I still use table myself.
here here.
> Who/what organisations is driving
> the changeover to CSS rather than tables and why
The W3C. It is a body made up of the largest corporations on the web. Their interests, their control - making it their agenda. 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. 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.
Accessibility for disabled
Another oft repeated half-truth: blind users were browsing the table-and-spacer-gif web in the 90s prior to CSS, and as per WCAG1, if the table linearises correctly it will not be an accessibility problem.
But table-layouts can be inaccessible if they don't linearise correctly. There's a heck of a difference between using one or two tables to layout a page and using multiple nested tables that separate and obscure structure for the sake of formatting.
CSS layout gives you the option of adding advanced accessibility options: zoom layouts, high contrast etc. But CSS layout can also offer poor accessibility by breaking or even hiding content when the text size is increased. YMMV.
delusional fantasy [that's] so far from reality
It's much easier to do site wide design changes with CSS sites.
Sorry Brett, this should have had a 'static site' qualifier. Interesting W3C conspiracy theory, by the way.
Most of my comments on this forum are based on my experiences with one 35 page static site. So, everyone, add salt to taste. :-)
One day -- hopefully tonite -- I'll have some kind of dynamic CMS site to continue my education on for your reading benefit. Gonna try to keep it simple though!
<div id='positionMe'>
<div id='sizeMe'>
your content here using style='...em' for size and position
</div>
</div>
Then do this
<style>
#positionMe{position:absolute; left: ...em; top: ...em; font-size: 100%}
#sizeMe{font-size: ...%}
</style>
To move the content around, change #positionMe -- the em is the font-size of positionMe's parent element.
To change the size of the content, change #sizeMe -- the em used by the content will be the font-size you set here and % is relative to #positionMe's font-size (which is inherited from #positionMe's parent).
Changes to #sizeMe do not affect #positionMe and vise-versa, so positioning and sizing are independent.
This works and it can't be done with tables.
"Site A" might target a certain demographic in the northern territories, where high speed internet isn't readily available .. removing the tables and using css only is the difference between 30k and 6k in page weight.
"Site B" in all of her slothful glory and might, runs (some) css in the head (sometimes) and has numerous tables. No worries then, because the demographics show the region running amok with high speed internet.
Css is handy to have around when changing the colour and basic layout for site hanging on the end of a very large db to the tune of .. oh .. lets say, 200,000 pages+.
Css and tables are just tools for us to use. Neither of them are evil.
Where are the columns? And how would grids of product photos and descriptions be displayed in columns and rows (which are tabular data, BTW) as is commonly done for ecommerce sites?
A grid of product photos would be content: "your content here using style='...em' for size and position". Simply define your table position and sizes relative to the upper-left corner of #sizeMe and instead of using 'px' or 'in' use 'em' instead.
If you are serious about this industry you will learn how to do layout with both tables and css, then you will incorporate them equally or however you see fit. But don't evangelize one or the other until you can do both.
I think that we all want to 1) make production and maintenance as easy and straight forward as possible and 2) add some sizzle. To those ends we all want to use the tools and methods most appropriate to a particular task. Regarding tables vs. CSS for layout: whatever works! But that said (written), I've done things with CSS that are not difficult with tables; they're impossible with tables!
I concur with the opinion that CSS is difficult but worth mastering. My advice is ALWAYS use standards mode (i.e., strict.dtd) and look into developing (or stealing) a base CSS -- I call mine mef_setup.css -- that loads first and that assures cross-browser compatibility (and, hopefully, standards compliance). Beyond that, don't try to apply styles meant for block elements to inline elements (and vice-versa) and you will be well on your way.
Oh, how I feel your pain! last year I built my first all and I mean all CSS site. It took me a month to figure out how to use CSS to lay the template out. There were many days when I just wanted to say screw this I'm using tables. I jsut couldn't do it. I wanted to learn CSS for layout and I'm glad I did. I'm fare from being an expert, like others here I'm self tought. I work part time for a company as their head admin which was a complete accident, but I'm really thankful for it. If I had to get a job base on my credentials, I'd be in the unemployment line.
I'll agree that CSS is a challenge for beginners, but the outcome is well worth the struggle.
Disagree:
- There is a right choice
- With anyone comparing Tables to CSS. CSS is a STYLE sheet, not an element or an object, but a page of definitions for classes, elements, and objects. Don't compare CSS to Tables, you still can apply styles to Tables, instead the argument is comparing Tables to DIVs/Spans.
The truth is there is always the argument that one is faster, one uses less bandwidth, one takes less time to program, etc. But this is not the case. Render speeds are in milliseconds (if that), bandwidth is in bytes, and programming is on a a case-by-case basis. It's the old debate, AMD or Intel? One is better for this... one is better for that.
If positioning stick to DIVs/SPANs, unless of course it's easier to do in a table. Tables do not provide the freeforming flexibility and multi-layer capabilities that DIVs have, however you can still apply styles to them and use them to suit your needs. It's those certain cases where Table-positioning is too hard that you may wish you were using DIVs, though.
As said, this is not the purpose of a data table, but neither was using AJAX for HTML or images. And if you had only used that for its purpose, where would we be? No Google Mail/Maps, or any constantly updated sports scores w/o reloading the page. Basically, anything interactive on the internet, that does not require a page request would fail to exist.
So continue to bend standards while its permissible. Make things easier overall, don't vote party line, vote the best candidate. Tables, or DIVs? I say both.
vol7ron
Then, I started feeling limited, so I purchased Studio 8 with the idea to get some tasks done, thinking that FronPage was my limitation. I also purchased some books. Then I grabbed some code and spent some time on Macromedia’s site, going through CSS tutorials.
Now, I am not sure if I could ever go back. The point is, it was not FrontPage, but tables. Too much work, and not being able to do what I can do today (with CSS). - Shifting right to left, and left to right, up/down, down/up, one template, 200 pages, many times not even touching my template file, but CSS file only -
As already mentioned somewhere above, being able to “read” my site in a text editor like notepad is something worth of thinking. Less code, too.
I’m not saying table oriented folks are wrong. One thing I did notice is that table folks make more calls about “tables vs. CSS”, then CSS people. CSS people seem to be cooler about their way of doing it.
And yes, driving you crazy at the beginning, so easy later - CSS.
The only thing the W3C has done, has been to help consolidate power in the hands of the IT elite and discourage competition.
The W3C isn't the only web standards group out there, however they're one of the most well known and recognized. While I disagree, with your comment I wish it were true.
If the control was in the hand of more corporations and less people, I think prices would be higher and getting a tech job might actually be worth something. Instead, we say it's intellectual property (which doesn't mean much), other than anyone with a computer can learn for free. What do you think would happen if there were a lot more doctors or dentists available? I'm pretty sure the costs would go down. Instead, the power is in the hands of a few that can take 5 mins and charge you $200 to tell you that you bruised your leg or you have a cold.
Meanwhile, some person is spending 4 hours at his computer trying to figure out why there is a memory leakage in the JavaScript for a site that he will charge $55 to the open market.
vol7ron
You can (should) apply styles to table elements (and tbody and tr and ...) but that's not the point, is it? This discussion seems to be about how to control page layout: layout control by way of tables vs. layout control using CSS [1]. It's always seemed to me that controlling layout using tables forces me to design a page from the outside-in. That's unnatural to me and a pain. Using the layout part of CSS, as I outlined in my prior posts in this thread, let's me concentrate on designing (possibly reusable) web page parts and worry about paste up later. In fact, I've been in a client's office reviewing web page layout, and have repositioned and rescaled stuff right in front of them. They were impressed. Doing that with everything frozen in a table -- I want this jigsaw piece over there and I want it 50% bigger -- well... I would have had to go home, work on it and come back in a day or two.
[1] CSS really has two areas of application: 1) embellishments (color, border styles, font-size, font-family, italic, etc.) and 2) sizing and positioning (left, right, top, bottom, height, and width). Embellishments don't have much to do with layout whereas sizing and positioning have everything to do with layout.
I am also genuinely surprised about the number of table users. This makes me have no hesitation in standing and saying ...'I am markd, and I am a table user'.
I tried to keep it down to two tables a day, sneaking one into a project whilst nobody was looking, but people noticed that my layouts were working and my secret was out.
I have tried self-help, 'table substitutes' in the form of <tables> and CSS, but I can't kick the habit. Yes, I even nest and my clients don't know - they just see the results and I keep my guilty secret.
Im an considering checking into the WC3 rehab centre, but Brett's comments keep coming back to me and I feel my life would not be the same without my daily fix of tables.
So there's no hope for me. I guess I will have to keep coming back to WebmasterWorld and sharing my guilty pleasures with others who are similarly afflicted....
However that in itself makes the presumption that just because someone knows php, perl, asp whatever and doesn't know CSS.. that everyone else should too, and it also means programmers, who are not necessarily designers or au fait with CSS or various browsing medias need to know the final expected outcome of the document - instead of getting on with their programming skills.
I can understand why someone who has built something from the ground up and knows every nuance of their baby might like to keep control in ways that they understand, but sorry it doesn't work like that.. anything that's half decent in this world is copied, improved upon and repackaged so choice abounds, to not even offer the choice is somewhat dated!
It seems to me this (programming) side of the argument only applies to those who know programming languages and "design" in the only way they know how, and being as how tables are deeply entrenched that's, usually, what comes out.
ESPN (which is an ancient example btw..) is like many large sites, simply too big to retain the kind of control where they need the programmers to take care of the design too. They can't do that so they need to have the choice to be able to pass the design part of their sites to the correct people for the job so they need to program in classes instead.
Here, on this forum, we have many people who take care of all aspects of their sites and it's only natural that they will stick to what they know.. so I agree with the person that said this "layout" debate cannot be "reasoned" until you know how to do both.
for those that want tables for stability (like e.g. a forum) you can use tables perfectly well WITH CSS for colors design, borders etc (I think that'll be in my epitaph ;)) so you can, indeed should learn both, and choose which bits suit being hardwired into your templates, and which are left open for design choices/changes.
so.. everything comes back to choice and flexibility again
Having spent my whole salaried life in engineering, the concept of fixing sizes and positions by dimensions (pixels or %) seemed perfectly logical to me, not to mention that I cut my teeth on site design before CSS had any wide spread acceptance (possibly before it existed)
Over the years what has worked well for me is to use an external CSS file to define all the common elements such as margins, fonts, header parameters, colours, bullet lists... anything that needs to be consist across all pages.
As for the layout and format of each page, tables rule... simple WYSIWYG usage, easy to manage, cross browser compatible and in this day of high speed internet, who cares if the code has an extra K or so.
Remember the KISS principle... still works. Or the old adage that if it ain't broke, don't fix it.
Who/what organisations is driving the changeover to CSS rather than tables and why? Why, most importantly.
Testimonial:
It does not need any org, just rendering facts.
I come from the table century, used them and abused them.
Nowadays all our works are build upon dynamic content PHP/MySQL generated.
I keep tables for the admin section of each site (CMS admin, users admin etc..)
I use also tables for dynamically generated tabular content.
BUT: My partner is the designer/illustrator/artist/cartoonist that works on the look, fonts etc…
We have a CSS person that translates his visions in pure CCS pages in which ones I insert the content.
I totally honestly may assert that it will need a very complex table system to render that same look and even so I know it will lack the feeling of free flow.
Tables are the wrong tool for the job. Sure, they can kind of do the job...but it's not the best way to go about it. Especially in 2008.
If you had to hammer in a hundred nails and you had a hammer and a rock in front of you, would you use the rock?
Using tables for layout is nothing more than a hack. A hack which exists because in the early days of HTML there was no other way. It also isn't true that tables don't have cross-browser problems.
The attitude of "Hey, use what you want as long as it looks right!" is wrong, in my opinion. People who think this way delay the overall progress of technologies on the web. Instead of using standards which were carefully designed to be foreward compatible you're using stone-age technology which may or may not work with the next browser versions.
