Why Am I Using Css Instead Of Tables??

I know I'm gonna get roasted by purists for this but:

I just spent the last 8 hours designing a simple webpage that, using tables, I could have done in 20 minutes. Yes. 20 minutes. I am not CSStupid or anything, and have control of probably 85% of all the style attribute tags, yet for layout, css really sucks.

The two things of CSS everyone must know:
1. DIVs are block elements, and put a new line.
2. Spans are for side by side, and do not have a block structure.

Beyond this, CSS sucks. Why can we not agree that tables are the best way to layout a page, and CSS complements the table layout nicely? I read hundreds of articles explaining why CSS is better for layouts and positioning, and can see their side, but hands down, tables are infinitely easier to do than CSS.

Case in point; let's say I want to have a header, with three sections. With CSS you need something like this:

<div id="header" style="width:780px;>
<div id="header_left" style="float:left; width:20px">Left Side</div>
<div id="header_middle" style="float:left; width:740px">Middle header</div>
<div id="header_right" style="float:right; width:20px">Right Top</div>
</div>

When your site has a 780px layout, and you want the content centered on the page.

The same thing could be accomplished:

<table width="780" align="center">
<tr>
<td width="20">Left Side</td>
<td width="740">Middle header</td>
<td width="20">Right Side</td>
</tr>
</table>

OK, you're not convinced yet. Well CSS really starts sucking when you want to put items inside one of your divs/spans at different heights. For example you have an icon and the word "RSS", and want both the icon and text to be aligned in the middle of the div. Forget it. You have to spend so much time with vertical-align, margin-top, padding-top, that you give up, not to mention it messes up any other text you have.

I guess CSS is great if you want to be able to modify many similar elements at the same time, like lists, links, blocks of texts, etc. but for getting a professional layout, with elements in the correct position (especially when your site has a fixed layout and want it to appear the same on all browsers), tables are the best way to go.

 

That is simply not true.

You can modify a hell of a lot with CSS. Including making a certain div inline instead of block, or making it so that it doesn't take a new line after it (I always do this, gives me much more control).

So if thats the case then there isn't need for all the floats you have, and your arguement just goes down the pan.

 

I agree with you in that it is easier to design a simple web page with tables. However if you want to design a more complex web page CSS is excellent.

 

Try using your table-based layout in a cell phone or PDA; try using your table-based layout with a screen reader; try using your table-based layout in a text-only browser such as Lynx.

As deathshadow is fond of saying, /FAIL/ /FAIL/ /FAIL/ /FAIL/.

If it can be done with tables, it can be done with semantic markup styled with CSS. It just takes experience, just like it took to make the layout table version in the first place.

 

I'm betting you know HTML better than CSS. Am I right? You can always use both you know...<div><table></table></div>

 

I'll agree with you that Tables are in fact easier to do since they can easily be pulled off in a WYSIWYG editor but they lack accessibility, flexibility and style. They also muck up code and just aren't as efficient as Divs.

The problem with using Divs is that there are many bugs and variations in rendering from one browser to the next; that's where most of the difficulty is. CSS is pretty straightforward once you have a solid grasp of (X)HTML.

 

You either use semantic markup, or you don't. It doesn't matter if the non-semantic markup is layout tables or a steaming pile of DIVs.

 

Tables = email templates
CSS = everything else

They are not:
- Easier (unless you just use that imageready automated generated "markup")
- Less Markup
- More Accessible
- Quicker Loading

The only reason you say it's easier is because you are not proficient with CSS. It is hard to start with, once you master it there is so much more flexibility it's great (not to mention site-wide changes are a breeze)

That's like me saying English is easier than Chinese - the only reason is because I know English better than I know Chinese. Same goes with the Chinese - they'll argue its easier than English!

 

CSS=the easiest way. Aligning divs is wayyyyyyyy easier than having to span rows and cols up and down left and right. I used to do Tables, and it used to take me ages to go back in later and change something.

Get to know CSS and you will be good.

Other than that......... keep in mind that ie sucks. they always need some css tweaks.

 

Not to mention some things are a pain in the ass with tables, such as overlapping elements. They always take lots of time, lots of images, and hence take ages to load.

 

css is better for seo

 

IE doesn't always need tweaks and hacks - only in a few cases. At least for me anyway, but I know what I'm doing with it anyway.

Uhm, NO it's not. Semantic markup can be, but not CSS by itself.

 

Don't get too cocky... you'll sound like me

It's true though - I don't know what everyone bitches about, I rarely have trouble with IE (except those bastard PNG hacks, I hate those!)

 

I remember your PNG hack issues - I even had to bring in Paul O'Brien to help out with that one!

 

PNG hacks hate me

 

This post should answer your question clearly. CSS is so much easier to lay out websites, mostly because it separates design from content. If you have a header section, you make a div with an id of header, then style it in CSS and not with the table width and colspan, etc etc. It separates the design from the content, which is the future of the web.

 

CSS vs Tables are based on one's preference. Both are neither better than the other. However, if you plan to use only Tables or only CSS, then I'll go for CSS since it can do much more than Tables can ever do.

CSS > Tables:
-Loads faster, can be customized easily without tearing through pages.
-Works well with everything, but is horrible at replicating tables completely.

Tables > CSS:
-Tables are easier to organize than bucketloads of DIV layers, and does not break easily when used with 20th century browsers.
-CSS tempts you to spam DIVs like there's no tomorrow.

 

I must say I disagree on multiple points.

- Taking everything into account, CSS has far more pros than cons, so CSS is better (as a generalisation)
- Tables are made for tabular data. CSS is never meant to replicate tables (so you can't compare them. That's like saying a keyboard is bad for eating with and forks are good, therefore keyboards suck and forks rule)
- Yes, tables display better on stone age browsers (that is not a flaw of CSS, that is purely the fact those browsers support tables because thats how things got done back then)
- No, those with divitis love to put everything in a DIV, and even divs inside divs inside another div just to put 1 damn link. CSS has nothing to do with the amount of DIV's that will be on a page

 

Like hell they aren't. CSS and semantic markup blow layout tables out of the water, especially once you learn how to design for the user, rather than a .psd file.

Your first arguement is true, as is the first half of your second, but the second half is patently false.

Again, not true. When using CSS you have to think STRUCTURALLY, not visually. Stylesheets can and often do change between redesigns, but when the Web site has been built correctly, there usually is almost no need to alter the underlying HTML code. This is something that 95% of Web designers and developers actually get wrong because they don't understand how semantic markup and cascading style sheets actually work.

 

Perhaps this will make it easier to understand the division between HTML and CSS.

When I have a psd, I will write out in full the HTML page. It's the skeleton of the site (and also what it will look like to those with styles turn off, on mobile phones, etc) It's not very hard to do because I know exactly how the site will work just by looking at the design.

One page can have the exact same HTML and a completely different look - so much so you wouldn't even be able to pick they used the same HTML. Thus is the power of CSS.

Then, I write the CSS. CSS = all the pretty stuff. So really, comparing CSS and tables shouldn't really be done. It should be comparing semantic HTML with tables. Which basically means comparing good HTML with rubbish HTML. Which basically means tables loses, and badly.

Except for email templates, those damn things make a mockery of the CSS thrown at it!