So I still use tables to design webpages(i know, i'm living in the stone age). I do use CSS to a point. Mostly to set attributes that will be used multiple times on a page or throughout the website. But the layout it still handled completely using tables.
People keep telling me to switch to full CSS design but no one has yet convinced me of why I should do this. I have done some general research and looking at the code of a fully CSS designed page is beautiful in it's neat and orderly appearence. But I've also read that getting a full CSS designed page to display properly across multiple browsers is a real pain, and could take a lot of troubleshooting.
So even though the code looks cleaner, what are the actual benefits for me as the designer? Will it speed up my web building? Will it make it easier for me to design pages? CSS, what have you done for me lately?
Also, as a note, i'm not saying tables are perfect. I've had plenty of times where i've been infuriated by something and have had to add some nested tables to get things to display properly. Or remove a table and do something differently. But will CSS infuriate me less? and save me time?
Posted by fugu13 (Member # 2859) on :
In the long run, CSS will definitely save you time. The time spent to maintain a site with semantic HTML and the design abstracted into CSS is significantly less than that involved in a table-based page.
Some things that tables do relatively easily, CSS has a harder time doing, but the converse is also true. Furthermore, changing the design of a site to do something very different is much, much harder with table based designs.
Here's a site I recently did (it has since been mucked with somewhat by amateurs; sometime when I have time I'll go through and clean it up; All the inline styles and silly stuff like breaks at the end of a paragraph are theirs): http://www.cs.indiana.edu/bringiton/
The HTML is very generic, making it possible to do a complete revamp of the site by hardly touching it, much like the CSS Zen Garden. Not to mention that the semantic HTML makes it completely accessible to screen readers and the like with no additional effort.
Also, that site didn't take me long at all. Most of it was futzing with the image for the banner and doing some tweaking of the logo somebody else made. Writing the HTML and CSS took about an hour (plus little changes to the CSS later to keep background images in alignment with borders). I didn't get anybody to check it against IE until later, but it already worked, since I'd been trying to design a good CSS layout, not replicate a table layout in CSS (the most common reason for needing IE-specific hacks).
Posted by fugu13 (Member # 2859) on :
To give a more concrete example: imagine you had a menu that you wanted to move from one side of your site to another, but keep otherwise intact. In a well designed CSS-utilizing site, that's maybe a couple lines of changes in CSS (and each line's about a word or two, of course). Imagine the fun you'd have changing that in a table.
Posted by Strider (Member # 1807) on :
Well, I admit the Zen Garden is cool.
Posted by erosomniac (Member # 6834) on :
quote:Originally posted by fugu13: To give a more concrete example: imagine you had a menu that you wanted to move from one side of your site to another, but keep otherwise intact. In a well designed CSS-utilizing site, that's maybe a couple lines of changes in CSS (and each line's about a word or two, of course). Imagine the fun you'd have changing that in a table.
Although your other points are valid, I'm not seeing how this is any more difficult to do in a table than with CSS. One involves reordering/positioning an object (in a style sheet, since I'm assuming we're talking about GOOD CSS) and the other involves relocating a column (which can be accomplished sitewide with a find/replace command); either way, it's pretty darn easy.
Posted by fugu13 (Member # 2859) on :
Your menu is a simple column in your table? That's quite unusual. Not to mention, still much harder to deal with in a multi-page site. With CSS, its a tiny change or two in one location. Even with just one column in a table, its a much larger change, and across multiple tables. If each page has slightly different menu code (say, to highlight the current page), suddenly find and replace fails.
And lets hope there aren't specific widths set for the table columns, because then a copy/paste of the column might well result in some odd behavior.
It is not pretty darn easy with tables in any but the sorts of table layouts you don't see on production sites.
Strider: the CSS Zen Garden is not just about being cool, its a demonstration of transformability. That you can take your site, written in simple, semantic HTML, and transform it in the same sorts of ways, potentially without touching the HTML at all.
Posted by Strider (Member # 1807) on :
I get it...doesn't change the fact that it's cool. Posted by fugu13 (Member # 2859) on :
I did say 'not just' Posted by erosomniac (Member # 6834) on :
quote:Your menu is a simple column in your table? That's quite unusual. Not to mention, still much harder to deal with in a multi-page site. With CSS, its a tiny change or two in one location. Even with just one column in a table, its a much larger change, and across multiple tables. If each page has slightly different menu code (say, to highlight the current page), suddenly find and replace fails.
And lets hope there aren't specific widths set for the table columns, because then a copy/paste of the column might well result in some odd behavior.
I'm having trouble imagining a scenario where your menu would be more than a column in a table, even if that column contains a table of its own.
Your other point is valid if you're coding, say, by hand - but it's pretty easy to set a Find & Replace function to copy any content contained between one element and another, including the elements themselves, without leaving the contained content behind.
quote:It is not pretty darn easy with tables in any but the sorts of table layouts you don't see on production sites.
<shrug> Although I made the CSS switch a while ago, I designed business sites for a living for several years prior to that and never had a problem.
Edit to add: So yes, I stand corrected, and it's easier with CSS than tables, but not much.
Posted by fugu13 (Member # 2859) on :
We can make it much pretty easily; now we want to change the menu to lay out horizontally .
Posted by Strider (Member # 1807) on :
ahh yes, BUT, your phrasing implies that you assumed that my comment about the garden being cool showed a lack of knowledge regarding the true purpose of the website or that I didn't understand *why* it was cool. Just because i chose to make a very general comment about the coolness of the site. I am offended and we are no longer friends.
Okay. Question. CSS is done by using <div> tags and the layout is handle mostly using padding and margin attributes in the CSS, right? In the past I've used <div> tags to place something in a certain position on the page. When doing this the element I placed ended up being in two completely different locations in Firefox and IE. Am I going to have this kind of problem coding fully in CSS? Why is there such a difference in the placement of the element?
Posted by vwiggin (Member # 926) on :
Many of your customers may care about search engine optimization. CSS sites are generally much better in terms of SEO and you may have a better chance of landing business accounts if you can design in clean and efficient CSS.
Posted by erosomniac (Member # 6834) on :
quote:We can make it much pretty easily; now we want to change the menu to lay out horizontally [Wink] .
Now THAT is a different story. ^_^
Posted by fugu13 (Member # 2859) on :
Divs are just what you use if you want to express a collective, block level division not better expressed by another HTML element.
The basics of CSS design are, start by writing the HTML semantically. That is, paragraphs are in p tags, Menus are lists. Tabular data is in tables, headings are h# tags, et cetera. After you've done this, choose how you want things to look. Focus on fluid, flexible layouts (ones that can resize and rearrange logically depending on browser window size and font size). To achieve this layout, try to use the position property as little as possible. Instead, try to use margins, padding, floats, and the like. Use relative measurements (%, em) whereever possible.
Why there's a different in placement of the element might depend on a lot of things, so I don't know what was causing it in your case. I should point out its easy to get different placements of elements in firefox and IE with tables without touching CSS, too, but most people have learned how not to do that. CSS design does sometimes result in more startling displacements, though.
Posted by TomDavidson (Member # 124) on :
I'm a CSS guy, myself.
But I'm a little confused by all the mentions here of Find/Replace. Who here is doing site-wide menus with static HTML tables? Even if you choose to do them as tables, isn't it easier to use a server-side include for your table logic?
Posted by fugu13 (Member # 2859) on :
Not if your menus change by page, as is moderately common.
Posted by James Tiberius Kirk (Member # 2832) on :
I always used tables (and almost never used the DIV tag), but the zen garden is what convinced me to switch over. I concur, it is infinitly cool.
I made a page using tables, and just recently remade it using CSS. The CSS code is a lot cleaner; the only problem I had was that I apparently can't set the height of a div to 100% (just used a table nested inside the DIV for that).
--j_k
[edit] on that note, I wonder if I still have both versions of the page. Hmm
![[Smile]](smile.gif)
![[Wink]](wink.gif)
![[Razz]](tongue.gif)