PDA

View Full Version : Dreaded tables


web newbie
11-16-2009, 12:18 PM
I am fairly new to this whole web building thing (have designed them for a long time but only building them myself for a few months) and I need to ask a question (probably stupid) about the 'dreaded' table layout. I use Dreamweaver CS4 - should I lay out sites using just CSS or should it be a combination of CSS and tables??
I am totally confused as to how this works (I have searched threads on here about this, but can't really find an answer). I was setting up sites for some friends using tables to format it (and some css) and they were happy with the way it was working (coming up on 1st page of searches etc) but I have now been told that any table layout in a site will completely wreck it's SEO. So, should I just be doing full CSS sites and totally leaving tables out of it or not?? It is a steeeeep learning curve.:-D
By the way, I got a 'mediaroots' dreamweaver training DVD that was highly recommended to me and they build their sites using tables.....the mystery deepens.
Please help me, I'm desperate!

Corrosive
11-16-2009, 12:35 PM
It is actually really easy to distinguish what you should use where. Basically tables are for tabular data. I.e. anything you'd use a spreadsheet for if you were presenting it in Microsoft Office suite. Here, try this as a description;

http://webdesign.about.com/od/tables/a/aa122605.htm

WotNow
11-16-2009, 12:44 PM
Hi css if definitely worth the learning. You use css for all your layout and design and use tables when you have a table, by that I mean a block of content that is obviously rows and columns.

CSS has other advantages besides being seo friendly. You can use the same stylesheet across multiple pages, allowing you to make design changes globally. Save bandwith. If you use a stylesheet, the sheet will only be downloaded once while browsing a website. And it makes your pages less cluttered.

gentleone
11-16-2009, 12:50 PM
It's good that you asked it :)

CSS-based layouts is the way to go, because tables we're meant to structure tabular data and not lay out a page.
The biggest advantages from CSS-based layouts over table-based layouts is less code in the markup, faster page loading, easy to maintain (you don't get lost as you could get lost in a table-soup) and less server load.

In the beginning CSS can be sometimes difficult, but once you got the hang of it and see that you can style your page what you couldn't do with tables, then you never want to go back to tables.

So my advice just start with it right now... search for some beginners tutorials on the net and.. uhm... get rid of that 'mediaroots' dreamweaver training DVD.

Dreamweaver CS4 is now all about CSS, so just use it!

web newbie
11-16-2009, 12:52 PM
Many thanks for your replies. Can I just ask another potentially dumb question. In order to set up complete sites in css will I have to learn all the coding from scratch or is there a way to do this in DW CS4? I am more of a graphic designer than a programmer and the thought of having to do all the back end stuff scares the hell out of me!

WotNow
11-16-2009, 01:08 PM
Hi I am new in the web design business and self taught and I found joining Lynda.com a valuable resource for learning in all areas. They have many css videos that step you through it and you can go through them at your own pace.

web newbie
11-16-2009, 01:10 PM
Have just found some brilliant tutorials (http://www.tentonbooks.com/videos/Dreamweaver-CSS-Layout-pt1.html) that explain a lot of it very simply for all us 'creative but not terribly techy' people. I am so happy!!!!

gentleone
11-16-2009, 01:14 PM
When I started with Dreamweaver, I've started (like many others I guess) to work only in design view. Now I only work in code view, I know guys it's a very expensive text-editor :) but I stiil use the dreamweaver menu to place for example a div tag, but I never used DW plugins and what I like so much in code view is the code hints. Saves me alot of typing.
If I were you just use the split view so that you can see what something does in your code view and try to figure out what it exactly means.

Corrosive
11-16-2009, 04:09 PM
Agreed. It is a natural progression. I also started in design view and now build in code view whilst still using some of the handy shortcuts with Dreamweaver. I'd do as Gentleone suggests and learn design view (with CSS) and then you'll naturally become inquisitive about what happens in the background or you'll want to use something like JQuery and have to delve into the code anyway. We'll help you learn CSS but most table-based questions are met with stony silence ;)

web newbie
11-16-2009, 04:17 PM
I've just spent the last few hours watching Geoff Blake's brilliant and easy to understand tutorials and I think I will get his DVD which sounds excellent. I don't feel nearly as worried now about converting over to CSS in Dreamweaver and so I will never mention the word table layout again!! Thank you to you guys for your replies.

domedia
11-16-2009, 07:28 PM
Just went through his three tutorials. Pretty darned good. I don't agree with his practice of absolutely positioned DIV's, but he does a really good job of explaining stuff.

I've just spent the last few hours watching Geoff Blake's brilliant and easy to understand tutorials..

lizzieish
11-16-2009, 08:10 PM
Web Newbie just a quick message to say thankyou SO much for posting that link you found! I am an illustrator (not someone who uses illustrator, a person who draws pictures) and have been having a really tough time building my website on Dreamweaver, those tutorials have made it all seem so easy!

I do have a quick question for whoever knows the answer, when creating a navigation bar, do you put it inside a div box so it will sit over the top of another layer? As atm my navigation bar refuses to sit over the top of another image I have on my site.

gentleone
11-16-2009, 08:45 PM
when creating a navigation bar, do you put it inside a div box so it will sit over the top of another layer?
It doesn't have to if you use an unordered list ( <ul> and <li> ) for your menu. If you give the ul and li a class then you can style it as a block element.

As atm my navigation bar refuses to sit over the top of another image I have on my site.
If you have set the image as a background in your CSS then it shouldn't be a problem. It is also possible if you inserted an image in the markup (img scr) but than you have to use position absolute and this is not recommended.

lizzieish
11-16-2009, 09:07 PM
I haven't set it as a background image I was just going to put it in another div. I am SO new at this and my understanding is, that if I put all my images, navigation bar etc in seperate divs then I can put things over the top of each other, move them around and all in all work on site easier.

Is this right?!

domedia
11-16-2009, 09:39 PM
Webpages aren't really built that way.. :-/
I mean, you can do it that way, but it's not really flexible.

If you need further help feel free to start a thread.

gentleone
11-17-2009, 06:47 AM
Images that are part of your layout/design, you set as backgrounds. If they're part of the content/text, then you insert them in the markup.

lizzieish
11-17-2009, 04:46 PM
Cool I think I am slowly getting there, really am learning something new everyday! I don't have anyone around that can help me with this stuff so my only way to learn is via the net on sites like this!