Better method? Not as much CSS required..

[Elementax]

Hey folks,

I was just wondering, from a coding perspective, is it good to code the majority of a site in tables and have a lot less need for CSS aligning, etc? In other words, is using photoshop's "Save for Web and Devices" option to set up tables in an html file effective? Obviously I would still need to edit the html file, throw in my own code / text, etc so it isn't all just images, but I would need a LOT less time for coding the CSS, as there isn't much to align because of the tables doing all the work.

So is photoshop's save for web and devices method to create tables an effective method to save time, yet still produce good results, or should I stick to divs and align / configure everything with the css? I definitely love how much time I save with photoshop setting up my slices and creating the tables, because all that is really left are removing images, setting up some bgs, and fixing the main content areas, other than that, most work is done and there is little to no need for a CSS.

Also, as a note, I'm planning on applying them method when coding for Wordpress, etc (If that makes a difference)

Elementax

[Yallow]

Don't use tables for layout purposes unless you in fact are wanting to make a table for a certain set of data. Tables are no longer used for layouts because honestly we have better tools (ie. divs), and quite honestly if you use a table for your layout you will look silly and very amateur. CSS was made for altering layout and that's what we should use it for.

[Elementax]

Don't use tables for layout purposes unless you in fact are wanting to make a table for a certain set of data. Tables are no longer used for layouts because honestly we have better tools (ie. divs), and quite honestly if you use a table for your layout you will look silly and very amateur. CSS was made for altering layout and that's what we should use it for.

I understand what you mean, but in my opinion, you get basically the same results, but save yourself a lot of time when photoshop does up the tables for you. Plus, the inter-browser alignment doesn't seem to be an issue either. Is it possible to maybe use some tables, as well as other tools such as divs for content areas, etc? Like for example, maybe have your footer and header done up in tables, but your body done up in divs?

Elementax

[ralph.m]

You are missing the point of web design by asking this question. The visual result is not the only consideration here. If the code is a mess, it may be slower to download (OK, minor consideration), harder for peole to use (especially blind users, including Google), harder to modify (table layouts are a pain to update), and less meaningful. Tables mean something in HTML, and if you use them for something that is not tabular data, you are creating an mess semantically.

The fact that it may look OK on the outside is like saying it's OK to fix a car with stickytape and glue, because the car still looks OK on the outside. Under the hood, you have a disaster—something you should not be selling to clients.

[Stevie D]

If you look at a typical "layout table" page and a similar design using semantic HTML + CSS, you will usually find that:

• the total volume of code required for HTML+CSS is less than the for layout tables with styling
• because more of the styling in the HTML+CSS is abstracted into the CSS file, this has a much bigger impact on the total byteage downloaded by someone visiting several pages on the site
• because tables are so much more interdependent, it is likely to be slower to render and more likely to jump about during rendering than a pure HTML+CSS page

Not to mention that layout tables are a PITA to maintain, edit and amend, they make a complete mess of accessibility, they are much more difficult to visually repurpose (eg different layouts for printing or mobiles) and they have no business on the modern web. The case for layout tables was lost years ago, and the changes to technology since then have only made the case against them stronger.

If the main reason that you have for wanting to use layout tables is that Photoshop makes it easier to create pages that way ... that's a spectacularly bad reason for doing it. Slice'n'dice went out of fashion with the dinosaurs, because it produces pages that completely fail in a great many situations, are an absolute nightmare to maintain and hog bandwidth like anything.

[Elementax]

If you look at a typical "layout table" page and a similar design using semantic HTML + CSS, you will usually find that:

• the total volume of code required for HTML+CSS is less than the for layout tables with styling
• because more of the styling in the HTML+CSS is abstracted into the CSS file, this has a much bigger impact on the total byteage downloaded by someone visiting several pages on the site
• because tables are so much more interdependent, it is likely to be slower to render and more likely to jump about during rendering than a pure HTML+CSS page

Not to mention that layout tables are a PITA to maintain, edit and amend, they make a complete mess of accessibility, they are much more difficult to visually repurpose (eg different layouts for printing or mobiles) and they have no business on the modern web. The case for layout tables was lost years ago, and the changes to technology since then have only made the case against them stronger.

If the main reason that you have for wanting to use layout tables is that Photoshop makes it easier to create pages that way ... that's a spectacularly bad reason for doing it. Slice'n'dice went out of fashion with the dinosaurs, because it produces pages that completely fail in a great many situations, are an absolute nightmare to maintain and hog bandwidth like anything.

Lol, that rant convinced me to stick to divs, well done. I've always used divs in the past, but have always been annoyed, much like any other web designer, with the inter-browser issues and the amount of time taken. I may just venture into the 960 grid system as that looks like it will save me some much needed time, yet still allow me to produce quality results.

Thanks again

Elementax

[Pamela1991]

I'm still a CSS beginner, but I find it appropriate here in this thread to point to the sticky, Why Switch from Table to CSS layout?

I should also mention that as a beginner with CSS, I find CSS to be much more convenient for numerous reasons, perhaps one very worthy of mentioning here is how easy it is to make changes at a later point. Compare that to what you would have to do if you wanted to make changes later in Photoshop.

[Stevie D]

Lol, that rant convinced me to stick to divs, well done. I've always used divs in the past, but have always been annoyed, much like any other web designer, with the inter-browser issues and the amount of time taken. I may just venture into the 960 grid system as that looks like it will save me some much needed time, yet still allow me to produce quality results.

Hmmm ... not sure that "960 grid" and "quality results" belong in the same sentence without the word "low" between them ...

Why not?

• Fixed width failure – horizontal scrolling for anyone who has less than a 960px viewport. That number was down, but it's going back up again. As more people have 1920px screens, they're wanting two windows side-by-side, which means 960px including browser edge and scrollbars so available width is going to be less than that
• Massively inefficient code in both HTML and CSS (probably worse than layout tables)
• Presentational/nonsensical gibberish in class names and messy structure makes maintenance a nightmare
• Encourages authors to create structure for visual presentation rather than structure for content, which is bad for accessibility and can make it more difficult to repurpose the page for print/mobile.

PS – if you think that was a rant, you should see me when I really get going!

[Elementax]

Hmmm ... not sure that "960 grid" and "quality results" belong in the same sentence without the word "low" between them ...

Why not?

• Fixed width failure – horizontal scrolling for anyone who has less than a 960px viewport. That number was down, but it's going back up again. As more people have 1920px screens, they're wanting two windows side-by-side, which means 960px including browser edge and scrollbars so available width is going to be less than that
• Massively inefficient code in both HTML and CSS (probably worse than layout tables)
• Presentational/nonsensical gibberish in class names and messy structure makes maintenance a nightmare
• Encourages authors to create structure for visual presentation rather than structure for content, which is bad for accessibility and can make it more difficult to repurpose the page for print/mobile.

PS – if you think that was a rant, you should see me when I really get going!

Stevie S to the rescue again! Lol I'm glad you brought those points to my attention because they make a lot of sense; thankfully I hadn't started to develop anything with the grid system yet

Elementax