homepage Welcome to WebmasterWorld Guest from 54.237.95.6
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Tables layouts are harder than CSS layouts
No, really, it's true!
Nick_W




msg:1190996
 1:05 pm on Nov 1, 2002 (gmt 0)

Hi all,

In my early web days I spent all my time designing tables based layouts. At first I found it to be an excrutiatingly high learning curve but with all the little tricks and hacks we've become acustomed to I finally got good at it.

Since then I've discovered CSS layouts, which, strangely enough also has an excrutiatingly high learning curve. But, like tables, once you learn all the little tricks and hacks it becomes pretty easy.

Tables revisited

But, just recently I've been doing some work for a print design company whose attitude to the web just makes me cringe. The stuff they give me is so 1996 (chunky buttone, flashing knobs etc) that I've had to do there layouts with tables. Not becuase I can't replicate it CSS but because they just suit a tables layout better. Ghastly people!

The conclusion

Having learnt Tables based layout and CSS layout I can state, categoricaly that CSS is easier!.

More intuitive, less kludgy and much quicker to develope. Many of the CSS moaning brigade I think get there "oooh but it's not supported" stuff from the fact that they don't understand all the little hacks and tricks as well as they understand the tables hacks and tricks.

But, if you're willing to put in the same amount of effort you had to expend to learn tables then it really is much simpler.

Anyone else learn't both (profficiently) and feel otherwise?

Nick

 

4eyes




msg:1190997
 1:31 pm on Nov 1, 2002 (gmt 0)

I knew there was a story behind the recent post on tables Nick :)

I come from the other end.

As a newbie I started in Dreamweaver (well, after a few days getting frustrated with the other stuff out there)

I used 'layers' from the start (badly, in most cases) - but I could throw together a simple 'brochure' site much faster than using tables. Of course, most of this was in-line styles and resulted in pretty awful html - certainly not pure css

Learning about CSS was just a natural development from Dreamweaver's Layers.

With MX the support is better, and there is a free extension that pulls all the in-line styles into the head, where you can cut and paste into an external style sheet.

I usually start with DW for the basic layout, then hand tweak for the tricky bits.

Tables just seem like a difficult route to go - I use them for data thats all.

I suppose if I had persevered with tables at the start, I might be lobbing rocks at css along with the others.

"Use the tools you know"
or
"When the only tool you have is a hammer, every problem looks like a nail"

take yer pick :)

Hagstrom




msg:1190998
 2:36 pm on Nov 1, 2002 (gmt 0)

take yer pick

I don't have a pick - only a hammer :)

danec




msg:1190999
 3:59 pm on Nov 1, 2002 (gmt 0)

Tables just seem like a difficult route to go - I use them for data thats all.

Ah, tables. Data (lists, rows and rows of numbers, etc) is what tables were designed for. I always love it when people say things like "my webpage is pure html/css, except for this table of numbers which is in a table."

:)

lorax




msg:1191000
 4:49 pm on Nov 1, 2002 (gmt 0)

I agree. Tables have always been such a pain to work with. I just lived with them till I discovered CSS. And I'm so glad I did. I won't be going back except by force!

madcat




msg:1191001
 5:28 pm on Nov 1, 2002 (gmt 0)

For sure, CSS layouts are more intuitive than tables. Even if your trapped in a grid made of tables you can claw your way out eventually- once you have a basic understanding of CSS positioning- you'll see all of the time you could have been saving. Not to mention the accessibility benefits- but once again not a major selling point to people for some reason.

RossWal




msg:1191002
 5:29 pm on Nov 1, 2002 (gmt 0)

I've happily made the transition from tables to CSS. Several on this booard were patient with my elementary questions a few moinths back and I thank you.

Like others I still use tables for matrices of data. I also often use tables for data entry forms where I have a lot of text boxes, select boxes, etc. on the screen (I do alot of application development). I find tables are the best way to keeep things nicely vertically left aligned when there are a number of input controls, some of which span more than one column.

Do others still use tables for this kind of layout, or do you do it in CSS? I typically with stuff a table (or two... arghh) inside a div.

Nick_W




msg:1191003
 6:06 pm on Nov 1, 2002 (gmt 0)

Like others I still use tables for matrices of data

That's exactly what table are for ;) No point trying to do tabular data without tables. There's nothing wrong with tables per se, it's just another tool in your kit.

Right tool for the job and all that....

As for forms: I hear ya! Forms and CSS are tricky. But, if you stop trying to lay it out as if it has to be in a table, you can do it.

Also, using <fieldset> and <legend>'s make really attractive forms...

Nick

SuzyUK




msg:1191004
 6:44 pm on Nov 1, 2002 (gmt 0)

I agree..CSS is easier

fortunately although beginning web design in the table layout phase, I never really like the "squareness" of them so I wasn't too heavily into them, but I do like the logic of them where (as stated above) tabular data is required.

Therefore just re-iterating Nick's View that if a table is the right tool for the job, then use one...

I like to say my newer sites are tableless, but that doesn't mean they don't have a table in them, just that the site layout doesn't use tables..

Anyway Nick what's this about <fieldset> and <legend>...tell more

Suzy
:)

Nick_W




msg:1191005
 6:53 pm on Nov 1, 2002 (gmt 0)

Check this out:

[pre]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
form {
width: 80%;
}
form p {
font: bold 14px arial, verdana sans-serif;
}
legend {
padding: 2px;
background-color: #B6CBF7;
color: #000000;
border: 1px solid #666666;
font: bold 14px arial, verdana sans-serif;
}
fieldset {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #666666;
}
.errors {
font: 12px verdana, arial, sans-serif;
color: #CC0000;
}
</style>
<title>Menu Hover Boxes</title>
</head>
<body>
<form method="post" action="">
<fieldset>
<legend>Contact Details</legend>
<p>Name:<br />
<input type="text" size="20" name="name" value="$name" /></p>

<p>Email:<br />
<input type="text" size="20" name="email" value="$email" /></p>

</fieldset>

<fieldset>
<legend>Ask Your Question Here</legend>
<p>Subject:<br />
<input type="text" size="20" name="subj" value="$subj" /></p>

<p>Message:<br />
<textarea cols="35" rows="10" name="msg">$msg</textarea></p>
</fieldset>

<fieldset>
<legend>Send Your Quesiton</legend>
<p><input type="submit" value="Send Now!" /></p>
</fieldset>
</form>
</body>
</html>
[/pre]

Nick

tedster




msg:1191006
 7:56 pm on Nov 1, 2002 (gmt 0)

Thanks, Nick. So, here I am playing 'catch up' again. I've never written even one fieldset or legend tag so far.

For anyone else who's also learning about these tags, I found a nice page at the W3Schools website that lets you play with fieldset/legend code in the left hand side and see the results on the right. It's a pretty nice way to experiment and learn.

W3Schools Fieldset Tryout Page [w3schools.com]

madcat




msg:1191007
 7:57 pm on Nov 1, 2002 (gmt 0)

That's cool Nick!

To add from W3Schools:

<fieldset>
The fieldset element draws a box around its containing elements.

<legend>
The legend element defines a caption for a fieldset.

madcat




msg:1191008
 7:58 pm on Nov 1, 2002 (gmt 0)

Just beat me tedster;)

RossWal




msg:1191009
 8:23 pm on Nov 1, 2002 (gmt 0)

There are always new surprises. Fieldset is cool!

Nick_W




msg:1191010
 8:54 pm on Nov 1, 2002 (gmt 0)

....'aint it just ;)

A little style and you get useability, accessibility and great looking forms!

Nick

Birdman




msg:1191011
 10:53 pm on Nov 1, 2002 (gmt 0)

I was just wondering...what is a table layouot?

Just kidding. But seriously, I'm lucky to have found WW early in my learning stages. I made the switch after hearing all the rave about CSS. I had only done one site, and it was table-based. Of course that site got redone right away.

I still have trouble accomodating NN4, though:(

shelleycat




msg:1191012
 11:12 pm on Nov 1, 2002 (gmt 0)

I've been thinking about this recently becuase I'm currently using less tables and more CSS (for positioning and layout, I've always used styles for fonts and such) including my first all-CSS design.

I think many people start with tables because they come from a word processing background. For someone with no design or computing background, layout concepts such as bold and italic seem perfectly natural because we've all seen them in places such as MS word. And in when creating layout elements in Word we use a table. It's the best way to get borders and lines and suchlike, and most layout type stuff in a word processed document is formatting data anyway. So turning borders on and off and lining up elements using a table seems natural at the start.

However tables give a rigid static design which looks, well like a Word document. There's a certain energy missing because everything lines up one way or another and there just isn't the control over layout that you get using positioning and such like. I think there's a certain mindshift when someone realises that building a webpage isn't the same as formatting a wordprocessing document and that the possibilities are bigger and better. This is when the usefulness of styles become obvious.

This is all based on my personal experience but it generally matches what I've seen my friends doing. I live with a computer programmer who was trained to create user interfaces and he never went through the stage of making webpages like word processor documents (and never used a table inappropriatly), whereas I know someone who took a basic HTML class and she still makes pages that look word processed.

That said, I still have some table based layouts and probably always will. I don't see the point of changing it if it works for the purpose I have in mind, specially when the change would still look the same to the end user. Sacrilege huh? ;)

Nick_W




msg:1191013
 11:19 pm on Nov 1, 2002 (gmt 0)

I think there's a certain mindshift when someone realises that building a webpage isn't the same as formatting a wordprocessing document

Mindshift. Yep, you hit the proverbial nail on the head there. CSS is a mindset.

The sooner people stop trying to impose fixed 'print' ideas on a fluid medium the better.

Sheesh, I'll swear my latest client thinks that what I do anyone could (he intimated as much but I need the cash for now...) before me he had some kid doing it and he's a pretty big player in the Danish graphic desing biz....

Clients: Who'd have 'em? -- Well we'll just see how my affiliate stuff performs after the update. If I even get close to an income this jokers out! ;););)

Nick

copongcopong




msg:1191014
 4:33 am on Nov 2, 2002 (gmt 0)

nice one! <fieldset> & <legend>

i think i need a review of html 4.0.

:)

SuzyUK




msg:1191015
 9:34 am on Nov 2, 2002 (gmt 0)

Yep Thanks Nick_W & Tedster for the <fieldset>/<legend> info

Back to school for me too!

:)
Suzy

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved