It seems like every time I try to create a pure CSS layout it takes me much longer than if I'd use a table or two. Getting three columns to be equal lengths with different amounts of data seems to require particular fancy hacks, especially when dealing with cross-browser issues.
My Question:
Who are these few tables going to hurt?
Tables seem to work particularly well on tabular data — why are they so reviled in this day and age?
Google.com has a table in its source code, so do many other sites (stackoverflow.com does not by the way).
Since this is stackoverflow, I'll give you my programmer's answer
semantics 101
First take a look at this code and think about what's wrong here...
class car {
int wheels = 4;
string engine;
}
car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;
The problem, of course, is that a bike is not a car. The car class is an inappropriate class for the bike instance. The code is error-free, but is semantically incorrect. It reflects poorly on the programmer.
semantics 102
Now apply this to document markup. If your document needs to present tabular data, then the appropriate tag would be <table>. If you place navigation into a table however, then you're misusing the intended purpose of the <table> element. In the second case, you're not presenting tabular data -- you're (mis)using the <table> element to achieve a presentational goal.
conclusion
Whom does this hurt? No one. Who benefits if you use semantic markup? You -- and your professional reputation. Now go and do the right thing.
Like a lot of things, it's a good idea that often gets carried too far. I like a div+css driven layout because it's usually quite easy to change the appearance, even drastically, just through the stylesheet. It's also nice to be friendly to lower-level browsers, screen readers, etc. But like most decisions in programming, the purpose of the site and the cost of development should be considered in making a decision. Neither side is the right way to go 100% of the time.
BTW, I think everyone agrees that tables should be used for tabular data.
In the real world, your chances of taking one design and totally reskinning it without touching the markup are pretty remote. It's fine for blogs and concocted demos like the csszengarden, but it's a bogus benefit on any site with a moderately complex design, really. Using a CMS is far more important.
DIVs plus CSS != semantic, either. Good HTML is well worthwhile for SEO and accessibility always, whether tables or CSS are used for layout. You get really efficient, fast web designs by combining really simple tables with some good CSS.
Table layouts can be more accessible than CSS layouts, and the reverse is also true - it depends TOTALLY on the source order of the content, and just because you avoided tables does not mean users with screen readers will automatically have a good time on your site. Layout tables are irrelevant to screen reader access provided the content makes sense when linearised, exactly the same as if you do CSS layout. Data tables are different; they are really hard to mark up properly and even then the users of screen reader software generally don't know the commands they need to use to understand the data.
Rather than agonising over using a few layout tables, you should worry that heading tags and alt text are used properly, and that form labels are properly assigned. Then you'll have a pretty good stab at real world accessibility.
This from several years experience running user testing for web accessibility, specialising in accessible site design, and from consulting for Cahoot, an online bank, on this topic for a year.
So my answer to the poster is no, there is no business reason to prefer CSS over tables. It's more elegant, more satisfying and more correct, but you as the person building it and the person that has to maintain it after you are the only two people in the world who give a rat's ass whether it's CSS or tables.
Using semantic HTML design is one of those things where you don't know what you're missing unless you make a practice of it. I've worked on several sites where the site was restyled after the fact with little or no impact to the server-side code.
Restyling sites is a very common request, something that I've noticed more now that I'm able to say "yes" to instead of try to talk my way out of.
And, once you've learned to work with the page layout system, it's usually no harder than table based layout.
I'm of the thought that CSS layout with as few tables as possible is cleaner and better, but I agree that sometimes you just gotta use a table.
Business-wise, it's generally "what's going to get it done the fastest and most reliable way." In my experience, using a few tables generally falls into that category.
I have found that a very effective way to mitigate cross-browser differences in CSS rendering is to use the "strict" doctype at the top of your page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Also, for the dreaded IE6 CSS issues, you can use this hack:
.someClass {
background-color:black; /*this is for most browsers*/
_background-color:white; /*this is for IE6 only - all others will ignore it*/
}
The main reason why we changed our web pages to DIV/CSS based layout was the delay in rendering table based pages.
We have a public web site, with most of its users base is in countries like India, where the internet bandwidth is still an issue (its getting improved day by day, but still not on par). In such circumstances, when we used table based layout, users had to stare at a blank page for considerably long time. Then the entire page will get displayed as a whole in a tick. By converting our pages to DIV, we managed to bring some contents to the browser almost instantly as users entered to our web site, and those contents where enough to get the users engaged till browser downloads entire contents of the page.
The major flaw with table based implementation is that, the browser we will show the content of the table only after it downloads the entire html for that table. The issue will blow out when we have a main table which wraps the entire content of the page, and when we have lots of nested tables. For the 'flexible tables' (those without any fixed width), after downloading entire table tag, browser has to parse till the last row of the table to find out the width of each columns, then has to parse it again for displaying the content. Till all these happens users has to stare at a blank screen, then everything will come to screen in a tick.
If you have a public facing website, the real business case is SEO.
Accessibility is important and maintaining semantic (X)HTML is much easier than maintaining table layouts, but that #1 spot on Google will bring home the bacon.
For example: Monthly web report: 127 million page views for July
Monthly web report: 127 million page views for July
...
Latimes.com keeps getting better at SEO (search engine optimization), which means our stories are ranking higher in Google and other search engines. We are also performing better on sites like Digg.com. All that adds up to more exposure and more readership than ever before.
If you look at their site, they've got a pretty decent CSS layout going.
Generally, you find relatively few table layouts performing well in the SERPs these days.
Keep your layout and your content separate allows you to redesign or make tweaks and changes to your site easily. It may take a bit longer up front, but the longest phase of software development is maintenance. A css friendly site with clear separation between content and design is best over the course of maintenance.
One other thing I just remembered, you can assign a different stylesheet to a page for printing vs. display.
In addition to your normal stylesheet definition, you can add the following tag
<link rel="stylesheet" type="text/css" media="print" href="PrintStyle.css" />
Which will render the document according to that style when you send it to the printer. This allows you to strip out the background images, additional header/footer information and just print the raw information without creating a separate module.
doing a complete revamp of a 15 page web site just by updating 1 file is heaven.
This is true. Unfortunately, having one CSS file used by 15,000 complex and widely differing pages is your worst nightmare come true. Change something - did it break a thousand pages? Who knows?
CSS is a double-edged sword on big sites like ours.
In my experience, the only time this really adds business value is when there is a need for 100% support for accessibility. When you have users who are visually impaired and/or use screenreaders to view your site, you need to make sure that your site is compliant to accessibility standards.
Users that use screenreaders will tend to have their own high-contrast, large-font stylesheet (if your site doesn't supply one itself) which makes it easy for screenreaders to parse the page.
When a screenreader reads a page and sees a table, it'll tell the user it's a table. Hence, if you use a table for layout, it gets very confusing because the user doesn't know that the content of the table is actually the article instead of some other tabular data. A menu should be a list or a collection of divs, not a table with menu items, again that's confusing. You should make sure that you use blockquotes, alt-tags title attributes, etc to make it more readable.
If you make your design CSS-driven, then your entire look and feel can be stripped away and replaced with a raw view which is very readable to those users. If you have inline styles, table-based layouts, etc, then you're making it harder for those users to parse your content.
While I do feel that maintenance is made easier for some things when your site is purely laid out with CSS, I don't think it's the case for all kinds of maintenance -- especially when you're dealing with cross-browser CSS, which can obviously be a nightmare.
In short, your page should describe its make-up in a standards compliant way if you want it to be accessible to said users. If you have no need/requirement and likely won't need it in the future, then don't bother wasting too much time attempting to be a CSS purist :) Use the mixture of style and layout techniques that suits you and makes your job easier.
Cheers!
[EDIT - added strikethrough to wrong or misleading parts of this answer - see comments]
The idea is that Designers can Design and Web Developers can implement. This is especially the case in dynamic web applications where you do not want your Designers to mess around in your Source Code.
Now, while there are templating engines, Designers apparantly just love to go crazy and CSS allows to pull a lot more stunts than tables.
That being said: As a developer, i abandoned CSS Layout mostly because my Design sucks anyway, so at least it can suck properly :-) But if I would ever hire a Designer, I would let him use whatever his WYSIWYG Editor spits out.
Business reason for CSS layout: You can blow away the customers by saying "our portal is totally customizable/skinnable without writing code!"
Then again, I don't see any evil in designing block elements with tables. By block elements I mean where it doesn't make any sense to break apart the said element in different designs.
So, tabular data would best be presented with tables, of course. Designing major building blocks (such as a menu bar, news ticker, etc.) within their own tables should be OK as well. Just don't rely on tables for the overall page layout and you'll be fine, methinks.
*I would let him use whatever his WYSIWYG Editor spits out
I just threw-up a little...
*ahh hello? You don't think the graphic designer is writing the CSS by hand do you?
Funnily enough I have worked with a few designers and the best among them do hand-tweak their css. The guy I am thinking of actually does all of his design work as an XHTML file with a couple of CSS files and creates graphical elements on the fly as he needs them. He uses Dreamweaver but only really as a navigation tool. (I learned a lot from that guy)
Once you've made an investment to learn purely CSS-based design and have had a little experience (found out where IE sucks [to be fair it's getting better]) it ends up being faster I've found. I worked on Content Management Systems and the application rarely had to change for the designers to come up with a radically different look.
Besides being easily updatable and compliant...
I use to design all table based web sites and I was resistant at first, but little by little I moved to CSS. It did not happen overnight, but it happened and it is something you should do as well.
There have been some nights I wanted to toss my computer out the window because the style I was applying to a div was not doing what I want, but you learn from those obstacles.
As for a business, once you get to designing web sites by CSS down to a science, you can develop processes for each site and even use past web sites and just add a different header graphic, color, etc.
Also, be sure to embed/include all reusable parts of your website: header, sub-header, footer.
Once you get over the hump, it will be all down hill from there. Good luck!
:: nods at palmsey and Jon Galloway ::
I agree with the maintainability factor. It does take me a bit longer to get my initial layouts done (since I'm still a jedi apprentice in the CSS arts) but doing a complete revamp of a 15 page web site just by updating 1 file is heaven.
Some additional reasons why this is good practice:
Accessibility - the web should ideally be
accessible by all
Performance - save
bandwidth and load faster on mobile
devices (these lack bandwidth to some
degree and cannot layout complex
tables quickly). Besides loading fast is always a good thing...
When a screenreader reads a page and sees a table, it'll tell the user it's a table. Hence, if you use a table for layout, it gets very confusing because the user doesn't know that the content of the table is actually the article instead of some other tabular data
This is actually not true; screen readers like JAWS, Window Eyes and HAL ignore layout tables. They work really well at dealing with the real web.
I don't think there is a business reason at all. Technical reason, maybe, even so, barely - it is a huge timesuck the world over, and then you look at it in IE and break down and weep.
i actually can see Tables in Stack Overflow on the user page.
It even has heaps of inline styles...
There definitely is. If you are still striving for it, you are not getting it right.
DIV+CSS layout is actually much easier than table layout in terms of maintainability and productivity. Just keep practicing it before it's too early to say that.
Table layout is good too it's just not meant for layouts and have exceptional drawbacks when it comes to minor tuning.
Related
I've made websites before it was really used, and I've made the decision years ago to use CSS to design my webpages. It was a lot of trouble to leave the great tables and try "clearing both" instead.
The question is, after all those years I still have trouble sometimes. And everytime I run into a bad CSS situation I recall the easy way to make cols with "table".
And the more I'm thinking about it, and the less I understand why we dropped the use of table. They are great to design pages, and not every websites need to be 100% W3C conform or have hundreds of page that wouldn't support a change of design because of that.
So yeah, now I'm thinking about going back using tables. Should I do it? Do pro designers actually use tables where they shouldn't use them?
I also stumbled into a grotesque table in the google map API. If google ingeneers are taking that shortcut, why not me?
(sorry for my english I'm not fluent).
EDIT:
lot of response says it's my fault. I considered being pretty good in CSS, started with books of Eric Meyer and have been doing CSS since 2005. I know that the trick width:100%;overflow:auto; works in most case (and also that we didn't have this trick bad then), but I wonder if it would be a bad thing to use tables to quickly do the job on smalls website, like a blog.
I had the same issues when I started dropping tables and using CSS. Sometimes CSS floats can be a pain, there are a few tricky edge-cases that come up when using them for page layout, but you'll learn how to deal with them and it really is worth it. Your code will be 10% of the size and much easier to work with.
Another consideration is CSS floats can be made to work nicely with mobile devices and small screens. Tables can cause real issues with this, especially if you want to add nice touchscreen improvements.
Lots of "pro" designers use tables when they shouldn't. All over the place. But "pro" is often not the same as "good". Tables should only be used for visible tables of data.
Tables still have an important and semantically correct correct usage. That is for the display of tabular data. That is especially useful in envirnments that are DB-centric or that are process a lot of xml with ajax. For general layout they are not appropriate because the cause slow page loading because the browser has to wait for all contents before it can start rendering. CSS should not be difficult. If you are having trouble you should look at how it is being used on sites where you like the design.
The big advantage of CSS is that you can develop a master stylesheet for a site, and then where individual pages need slight variations you can apply overrides or modifications to specific elements without having to change the master sheet.
avoiding table layouts offers up a plethora of benefits but # the end of the day, browsers are still entirely too forgiving (currently) and you can get away with it. if you are wary of going back to them, read up on display:table and css3. it's practically table based layouts, minus the table.
One reason tables are avoided is that the content inside of them does not display until the HTML for the entire table has loaded. With the CSS method, this is not true.
If you really have a lot of trouble with the CSS method, you must be doing it wrong. Consider reading over other people's code to see how to do it better.
6 years later (we're now in 2017) and CSS now has grids and flexbox which should be the easiest way to build a layout without using ugly hacks and without using tables.
I have a friend who wishes to work as a freelance web developer, but insists that tables are the way forwards for layouts.
Several points he maintains in favour of tables:
This is what was taught at the beginning of 10 years of programming & computer science degrees, thus it 'must' be right.
Large companies use tables to achieve 'technical' things (like server side scripting and working with forms)
It saves time.
I have coded him some examples of CSS exactly matching table based layouts, and provided many links to articles explaining SEO and accessibility benefits.
With regards to semantic uses of HTML tags, I have explained at length with examples how tables are great for displaying tabular data but not for general layout.
From the perspective of a client, I have been explaining to him that I wouldn't hire someone using outdated methods as their main strategy for layout. As he is my friend and I wish him every success, I believe it is important for him to gain the best start when pitching for work.
The question again: How can I explain to a programmer that CSS positioning has many benefits over table based layouts?
Show him CssZenGarden. You can't do that with tables.
Designing with tables is really easy. Changing a tables design, such as "Put navigation on the left instead of the top," is anything but.
This is what was taught at the beginning of 10 years of programming &
computer science degrees, thus it
'must' be right.
So were frames and marquee tags. people dont use that anymore for a reason
Large companies use tables to achieve
'technical' things (like server side
scripting and working with forms)
If by 'technical' things he means ugly looking things, then hes right. also as i said, tables are good for tabular data, and you SHOULD use them for that. also, i dont see how server side scripting and forms have anything to do with tables.
It saves time.
Yeah it does, at least initially. if you want your code to be maintainable in the long run, tables will not save you time.
I would say that an approach that uses both tables and divs/css is best.
Tell the programmer to look up accessibility requirements and/or 508 standards. Depending on his target market that should mean it's a requirement.
Otherwise challenge him to a contest. Take a scenario of a potential client that likes the functionality but wants this button moved there, that menu moved here, blah, blah, blah. See who wins.
In your friends defense. If he is targeting small businesses, most of them probably won't know the difference if he uses tables or CSS. They just want a site that works.
It really sounds like your friend is just lazy. He's not going to last as a free lance developer for long if he insists on not keeping up with the technology and trends.
Tables were used for layout because that's all we had. It's always been a hack, they were never intended to do all of the things they were put in to. Surely, most programmers today know the history of HTML enough to know why things were put in place how they were...and that at the time of their invention we had NO idea what the internet would become.
No one put them out as a design mechanism, at least no in the way they ended up. So the argument that "that's how it always was" falls flat there. It was that way because we hadn't come up with the right way yet.
I don't personally think it saves time, either. You spend as much time repeating yourself and typing those irritating tags over and over again, all the while keeping straight how many columns your currently supposed to be spanning.
Table-less design has so many advantages (unless you're displaying tabular data). They are more accessible, easier to manage, (generally) smaller...the list goes on and on.
Anyone who is still holding out is simply either not willing or not able to learn tableless design.
I love this question. It does seem still to be a tough cookie.
I'm a developer, and prefer CSS for everything. first of all
1> This is what was taught at the beginning of 10 years of programming & computer science degrees, thus it 'must' be right. - HA
Table format as I've seen is a presentation thing. Therefore should be removed from the logic.
Working with designers, allowing them to change a tables format at will is a big bonus for the freedom of design.
Tables definitely still have their place in the world but large companies only use them as the techincal team are often met with larger challenges than the choice for a table layout or presentation changes
It can save time, but can later meet other problems, again with redesigns, SEO, accessibility.
I've had the problem when wanting to add another field... inside of <div class='cell'>my new field data</div> POP DONE - you have to fiddle with all manor of table formatting, which is time consuming and tedious -
"Working with designers, allowing them to change a tables format at will is a big bonus for the freedom of design." I don't understand this point, could you elaborate further? I am a designer first and have only been learning web coding to meet my clients web design needs. My friend is a programmer, and needs my design skills to help him gain business.
Well, its my experience, every designer has the right to say "I'd like to move that field slightly to the right by three pixels" - with a table it tough to break out the box. Giving the designer an option to either present something in a table format, or do magic -
For example, today - working with Google maps - its my mind, the route steps (directions you get for turn by turn roads) I saw that as a table and thats it. Later the design scope was changed and it was no longer a simple table format. If I did do table stucture - it would have been a recode on my side or an ordeal on the designers part.
I'm implementing "news" section in asp.net website. There is a list of short versions of articles on one page and when you click one of the links it redirects you to a page with a full article. The problem is that the article's text on the second page will come from database but the articles may vary - some may have links, some may have an image or a set of images, may be differently formatted etc. The obvious solution that my friend have come up with is to keep the article in the database as html including all links, images, formatting, etc. Then it would be simply displayed on the second page. I feel this is not a good solution as if, for example, we decide to change the css class of some div inside this html (let's say it is used in all articles), we will have to find it and change in every single record of the articles table in our database. But on the other hand we have no idea how to do it differently. My question is: how do you usually handle something like this?
I personally don't like the idea of storing full html in the database. Here's an attempt at solving the problem.
Don't go for a potentially infinite number of layouts. Yes all articles may be different but if you stick to a few good layouts then you're going to save yourself a lot of hassle. These layouts can be stored as templates e.g ArticleWithImagesAtTheBottom, ArticleWithImagesOnLeft etc
This way, your headache is less as you can easily change the templates. I guess you could also argue then that the site has some consistency in layout.
Then for storage you have at least 2 options:
Use the model-per-view approach and have eg ArticleWithImagesAtTheBottomModel which would have properties like 1stparagraph, 2ndparagraph, MainImage, ExtraImages
Parse the article according to the template you want to use. e.g look for a paragraph break if you need to.
Always keep the images separate and reference them in another column/table in the db. That gives you most freedom.
By the way, option #2 would be slower as you'd have to parse on the fly each time. I like the model-per-view approach.
Essentially I guess I'm trying to say beware of making things to complicated. An infinite number of layout means an infinite number of potential problems. You can always add more templates as you go if you really want to expand, but you're probably best off starting with say 3 or 4 layouts.
EDITED FROM THIS POINT:
Actually, thinking about it this may not be the best solution. It could work depending on your needs, but I was wondering how the big sites do it. If you really need that much flexibility, you could (as I think was sort of suggested) use a custom markup. Maybe even a simplified or full wiki markup. I'd still tend toward using templates in general, but if you need to insert at least links and images then you can parse for those.
Surely the point of storing HTML with logically placed < div >s is that you DON'T have to go through every bit of HTML you store to make changes to styles?
I presume you're not using inline styles in your stored HTML, and are referencing an external CSS file, right?
The objection you raise to your colleague's proposal does not say anything about the use of a DB. A DB as opposed to what: files? Then it's all the same. You want to screw around with the HTML, you have to do it on "every single record." Which is not any harder than "on every single file." Global changes are a bitch unless you plan for it by, say, referencing an external CSS. But if you're going to have millions of news articles, you had better plan on versioning the CSS as well.
Anyway, the CMSes do what you're thinking of doing. Using a DB is a fine way to go. How to use it would depend on knowing the problem more intimately.
Have you looked into using free content management systems? I can think of a few good ones:
Joomla
Drupal
WordPress
TONS of others... just do some googling.
Check out this Wiki article: http://en.wikipedia.org/wiki/List_of_content_management_systems
I tend to take the academic approach all too often and adhere to strict principles in my development when the reality is that I could have finished the project sooner had I been a little less cautious. I'm looking to find the right amount of practicality.
I want to take the "Zen" approach to designing a site which (in my words) says "Use HTML strictly for content structure, and let the CSS magic do the rest". How practical is this in reality? One of the issues I run into is that I want to develop (make functional) the site first, then come back in and design it later. I know structure-wise how I want the site to flow, but I haven't even begun playing with the CSS layout, graphics, or any of the other designy stuff. What is the right approach here?
It's absolutely practical, and provides infinite benefit. In fact it's exactly what CSS and the separation of content and layout is designed for.
The right approach given the above, is to let different teams get on with the different tasks at hand. That requires (perhaps) an initial graphic design which can be quite rough, and a documented and collaboratively agreed set of naming conventions for things like "#viewport", ".user" etc..
The markup team will usually be backend driven and will usually lead the design team slightly, but they should and must remain flexible enough to change markup where required, or put that in the control of the designers.
This last is just my $.02, but where one person is both roles, again I think you lead yourself with the markup/backend first and then iteratively go to a design stage, then markup, then design, as required.
The approach you want to follow is the right one. Just two things:
If you use a validator for css or html, don't pretend that all your html or css pass the test. Obviously the ideal goal is that everything validates, but at a first stage I think is better not spend a lot of time in validation issues. And remember that no one validator is perfect, and the good way to use it at the beginning is to guide you in the right direction and avoid big mistakes (i.e. put the same id twice in one page, or put block elements inside inline ones...). Then, when the application is at a good stage, you can make your css and html perfect and valid.
Don't design the interface at the end. I think that the interface of the application can give you good directions in how develop your back-end too. So, at your place, I would design the interface first, with html and css, and then I'd start to add functionality to it.
(Sorry for my english, spelling corrections are welcome.)
It can be very practical and you will be suprised how clean your HTML looks. I like using a CSS reset file to help get started, I personally like the YUI reset. Another Zen item to consider is the use of unobtrusive JavaScript. This further separates the different layers of your code. JavaScript libraries, like jquery, prototype and dojo can help with this.
It can be done, and I think your site (and your web design skills, not least) will be much better for it. But it also has a certain learning curve. It requires a more thorough understanding of the XHTML/CSS specs than many people have.
Making sure your HTML can be validated is just the beginning.
Oh, and make sure all browsers run in strict mode when rendering the page.
Of course, you will require workarounds for IE support, but that can be done with several methods.
First, IE supports conditional comments, allowing you to include special CSS stylesheets just to fix IE bugs, which should get you most of the way, without affecting your compliant standard-version of the page.
For some things, you may need a bit of javascript as well, but it shouldn't be necessary for most common functionality.
There are reasons explained in http://www.webdevout.net/articles/beware-of-xhtml against using XHTML today. To summarize, XHTML is not supported unless you serve it as such and if you target older browsers (any IE version is old considering most of its features are implemented when they were still immature and not changed substantially for a while) you have no choice but serve it as HTML.
Unless you don't require features that being XML provides (like SVG, MathML), stick with HTML. You won't have any serious advantage over HTML, be any more semantic, have better CSS support (even less). But you get wider compatibility and your layout will be more predictable (for example table cells can inherit from first cell in the row in HTML, no such thing in XML, not even sure XHTML has any exceptions somewhere).
Validators won't help writing XHTML any more than HTML. Even annoy, if you use a strict one, leaving you wondering what is all the fuss about / in the br tag if you lie and say it is HTML. (Firefox view source shows it bright red if you serve XHTML as HTML). I am sure you can find more examples.
Sure, you can do that, but be prepared that it WILL NOT render under IE. On a recent web project, the majority of our front-end defects were fixing stuff in IE that already worked fine in Firefox. Maybe this will change in IE8, but I doubt it. In some cases we even had to write some javascript that would be executed on IE only to work around things that couldn't be done with just CSS.
while it sounds good in theory you cant create the layout for a site 100% with css. You still need to use some markup so that you have something to apply the css to. That said, you can come fairly close to ideal using this method. I'm constantly amazed at how little markup a true css guru actually requires.
closer the "zen" approach that you are really looking for is xslt. it works by your app generating xml data and then the xslt transforms that xml into html/css. this requires learning xslt and adds another layer of complication to the process of generating a page, but adds the separation you are looking for. In an ideal world the theory is that a programmer only has to worry about generating xml data and then a designer can generate the visuals using that data, however it rarely works that way as xslt is more technical than most designers can handle. Most of the time the programmer ends up generating the xslt which somewhat defeats the purpose.
One approach that works for me is to structure the HTML first, then add some minimal CSS in a tag in the same file (just enough to create the right layout etc). Then once you're happy with the structure, you can pull the CSS out into separate files and / or completely rework the CSS. This strikes the right balance for me - it's still a lightweight process, but it avoids the potential headache of finding and replacing inline CSS.
In theoria yes, in practice, browser differences may force you to add a bit of javascript to deal with the differences.
Now... Benefits of something is different from practicality of doing it. Are you guys forgetting IE or even the pain-in-the-whatever client who wants the impossible done?
I am tempted to say you have to make some exception to the strict DTD that you are using to make it work in a reasonable set of browsers and please your stakeholder for the website/web-app.
I am a standards freak and no one would be more happy than me if it was possible to build a website that doesn't violate even 1 DTD rule. But after 4 years, I just haven't been able to do it for practical purposes.
Sure if I am the one coming up with the requirements for the website I am going to develop, it might be possible, but I have to bend the business rules to accommodate that. Believe me, that's the only way it is possible.
I know that tables are for tabular data, but it's so tempting to use them for layout. I can handle DIV's to get a three column layout, but when you got 4 nested DIV's, it get tricky.
Is there a tutorial/reference out there to persuade me to use DIV's for layout?
I want to use DIV's, but I refuse to spend an hour to position my DIV/SPAN where I want it.
#GaryF: Blueprint CSS has to be the CSS's best kept secret.
Great tool - Blueprint Grid CSS Generator.
There's the Yahoo Grid CSS which can do all sorts of things.
But remember: CSS IS NOT A RELIGION. If you save hours by using tables instead of css, do so.
One of the corner cases I could never make my mind up about is forms. I'd love to do it in css, but it's just so much more complicated than tables.
You could even argue that forms are tables, in that they have headers (labels) and data (input fields).
In the UK and in US there is a legal requirement for favouring CSS layouts over Tables. Both Section 508 (US) and the Disability Discrimination Act (UK) cover accessibility standards for users with limited vision.
In the UK the legislation extends so far as to actually make it illegal to commercially produce a site that impedes the ability of a partially sighted user in the same way that it is now illegal to have a shop with a step to enter it and no way for a wheelchair user to get in - admittedly there have been no prosecutions over website accessibility yet. However I would always go with CSS as it means that your site design is so much easier to maintain in the longer term.
Investing time in learning CSS (I used W3C schools and .Net Magazine http://www.netmag.co.uk) will pay off.
Why tables for layout is stupid: problems defined, solutions offered.
In my opinion, the bias should be in favour of CSS over IE6 - i.e. unless there's an insanely good reason (e.g. your site is only targetted at people using IE6, which would be weird), it's better to 'alienate' people using IE6 rather than people with poor vision and/or automated user agents. Usage of IE6 is decreasing; the latter group is increasing in number. Even if your site doesn't look perfect in IE6, it will probably be easy for those users to read it than a table-based layout will for those who can't see it.
This is a very general question, so it's difficult to answer with specifics. The two books that are excellent resources are:
Bulletproof Web Design, Dan Cederholm
CSS Mastery, Andy Budd
If you only have to spend an hour designing your overall site layout, that's not bad going.
CSS may not be a religion, but it is how browsers interpret HTML for layout. Like it or not, all modern browsers use (some version) of the W3C box model. To continue to rely on tables is continue to rely on a methodology that is just plain wrong in the eyes of the people who design web rendering technology.
I know CSS can seem awfully complicated at times, but I believe it is a necessity in this day and age (trust me, your clients are going to want it).
If you don't feel comfortable taking the time really learn CSS (so it takes you seconds or minutes to position elements...not an hour), then you need to pass the layout work on to someone who knows really knows the front-end.
Yes, there are a lot of problems with the current browser implementations of CSS, but nothing so drastic that you should ever feel the need to return to table based layout. Just sit down and take the time to learn it, like you would any other language or framework.
The best online reference resource I've found is this one:
http://reference.sitepoint.com/css
But it might not hurt to look at a book like Designing With Web Standards which goes a long way in helping you to understand why this stuff is important.
I was also thinking Blueprint was great until I saw YAML (Yet Another Multicolumn Layout). There is an online builder tool which is fantastic. I can get a cool looking multicolumn layout within 5 mins.
After a while you don't even think about it. Using divs with CSS seems like the easier option imo. Plus, you have more freedom when using frameworks such as jQuery. I couldn't imagine doing some of the cool jQuery stuff without using css or divs. If you use tables for style and layout I feel like you miss out on a lot of new technologies and stay stuck in the 90's.
This may be unhelpful but I somehow don't understand all these problems related to CSS. If a newspaper designer would try to embed a movie in the ad page, everybody would agree that he's a bit crazy. But still those same people pine after three-column layouts in HTML. HTML is just not apt to handle this kind of layout well at the moment. Furthermore, multi-column layouts are generally not really well-suited for reading on computer monitors. Aren't there enough viable alternatives?
And by the way, even tables don't offer a good way of implementing a fluent column layout so this is no reason at all to resort to such hacks. Assuming a halfway modern browser (i.e. > MSIE 6), tables don't offer any advantages over clean HTML + CSS that I know of.
I would just use the table.
In my experience, using a table for layout will work the same in all browsers and the CSS will not (especially if you're trying to support IE6). It's just not worth the hours and hours of coding to get a layout to work in CSS when it can be done in 10 minutes using a table.
The other advantage to using tables is that your layout can very easily dynamically size itself to content. Trying to get that done with CSS is a huge nightmare.
I find there are lots of limitations to CSS that just seem to hint the specification designers don't make websites for a living.
Use HTML tables if you can't do it easy in CSS.
Having said that, some of the frameworks do help and it always nicer to do in CSS if you can manage it.
You might be able to find some inspiration here: http://blog.html.it/layoutgala/
A List Apart is a great reference for using semantic HTML, the Holy Grail article is probably one of the best examples. Also, check out CSS Zen Garden for some inspiration on the topic or read Dave Shea's excellent book "The Zen of CSS Design."
You use CSS for layout because not only is it semantically correct but because tables have multiple drawbacks.
Tables are horrible for accessibility because they break almost all screen readers, which in turn gives the visually impaired worthless information because of the way the tables are read.
They also render much slower than their CSS counterparts. Tables have to be drawn twice, once for the layout, and again for the content. This can mean that if you have a remote image or two on a server with a slow connection that your ENTIRE LAYOUT will not render.
Would you use an array to store a dictionary when you have a hashmap? No. And you shouldn't use a table when there's something out there which works better.