I have read a number of times that I shouldn't use tables for layout in my web pages. this age old method has suited me fine time and time over. Through my first basic html pages and then incorporating CSS and now with my firts PHP/MySQL pages. So what is the crack. Why is a tableless format using DIV's better. I am always willing to learn a new way of doing things but at the moment I don't seem to have a found a reason. Apart from the Hardcore claiming that tables weren't designed for that so shouldn't be used for that. :huh:


Thanks
Liam

In practical terms, CSS with DIVs makes it easier to change things across teh whole site.

If you have a site with many pages, then if you change the layout you have to make the changes on each page.

Using DIVs in a CSS means you change the CSS and the modification is rippled across the whole site without changes being needed to each page - you simply change the style of teh DIV in teh CSS and off you go.

It's also better for accessibility - i.e. viewing the pages with speech synthesisers, brailers, PDAs, etc.

Tables ARE good for displaying tabular data - but for providing the structural scaffolding for a page, CSS is a better bet.

Tables can easily end up in messy, hard to maintain code.
For complicated layouts it can be a nightmare trying to work out where one table or row ends and the next begins.

What if you want to change the layout? ...you have to re-arrange loads of <td> and <tr> elements until correct, rather than changing a css to sort it which to me is much easier.

tables introduce a lot of superflous code, meaning bigger pages (slower download), though this is less of an issue as more and more people get decent connections. There are still plenty using dial-up.

Tables used to make spidering difficult/unreliable, though I would think the search engines have that sorted now.

Essentially, maintainability.

Okay so I have already built the majority of my first major project using tabular layout. is it really worth me learning the div way and then redoing it all or should I just learn this for my next project.

Thanks

Depends on the scale of the project. If you're talking of 3 or 4 pages that wont change much once built, don't worry.

Otherwise it will be worth a css rework to save yourself a lot of headaches later.

Its a massive project Fully fledged community. Bloody hell I think im gonna cry. The perils of been self taught. You find a way that works but its not always the best way. Grrrrrrrrrrrrrrrrrr :rant: :rant:

Stick with it!
It will get easier ;)

I had the same problems when I moved to CSS a few years ago - took me ages to get in to it but now I love it.

For a project like yours, I think you need it.

I do know the basics of CSS but I only use it for fonts and table formatting etc. Is there a good tutorial that anyone knows of. It does cover it in the book I learnt HTML from (wileys - HTML for Dummies) but only very basic. The W3C tutorials don't ever really seem to do much for me. Don't know why but I always seem to come away from them a little more confused than before I started!!!:huh:

If you're trying to teach yourself, I would just google for the specific bits you want.

If you've got the basics of the whole cascading idea then you just need a reference for syntax of particular properties.

Yeah I probably should do that. Thanks for the advice anyway. Not exactly what I wanted to hear but no point in sticking my fingers in my ears and singing loudly when times get tough (As they very often do while learning any computer language). If I wanna do this I might as well do it right.

This (http://w3schools.com/css/default.asp) is about the best css guide I've seen, there's a site called csszengarden (which seems to be down at the mo') which is the best demonstration of why you should use css, chack it out when it re-appears...

For anyone who is reading this hoping there is a complete tutorial on how to use div for layout........Well there isn't but I have found This Article (http://www.htmlgoodies.com/beyond/css/article.php/3642151) on htmlgoodies.com that has summed it up pretty well to me. Seems I could prob have go just from reading this. I'll let ya know tomorrow when I get home from my crappy job.

There is nothing wrong with tables, for data output and displaying, such as showing a user list, with various infor Username | Email | Website etc..

but for site layouts, where you could end up with tables, within tables over tables etc, then thats where/when you should avoid tables..

keep tables to the simple data displaying use, not the layout/design use..

you CAN do a whole site without tables, my Blog Site for example, on the months (click on one on the right) Thats 'tabulated' data, looks like a table, but is entirely CSS and DiV's (It was to see if i could do it without tables)

however a new site im working on, I use tables for the user list, and the page lists in the admin panel etc...


so yeah, dont avoid tables totally, just dont use them for layout purposes

as for tutorials, once you know the syntax, then http://w3schools.com/css/default.asp is the best thing i can say to use as reference..

just remember, if your using a div ONCE, its <div ID=""> if it will be used more than once (Such as form elements) its <div class=""> in the code, and # and . in the CSS respectivly... This is the biggest pointer I can give you :)

To be honest I know it may seem like a crazy way of doing things, but i do avoid tables within tables by drawing out my site in tabular format on paper. Then I know exactly how many cells i am going to need etc. I find if you use tables within tables getting them to line up is crazy. The main problem I can see with the DIV method is that I use cellspacing a lot in my forums to get the look I want. This seems to me it would be a nigtmare using DIV as surely it would just be replacing many blocks of table code with many blocks of DIV code. See what I mean???:huh:

Edit - I just had a look at the Source for SF - It seems this is mainly tables.

Tables should be used for tabular data. That's the whole reason they are there. If it's not tabular data then it should be handled by CSS. HTML is a markup language - it was never supposed to be there to format but the lines got seriously blurred along the ways. XHTML was developed to try and get people back using the languages properly. CSS is very flexible when you get your head round it and it's definitely worth learning it properly.

I and my other half write pages entirely contained within tables - this is frowned upon but there is one proviso which lets us off - you can enclose your page within a table if it is the only way of getting it to look the way you want it to.

Her site for example has two sidebars of equal width and height, one left, one right. However there is not always the same amount of content in each one, and using divs and spans she is not able to get the two sidebars to the same height (largely because Internet Explorer seems to arbitrarily ignore specified height settings) - so to get them the same height regardless of content, she makes a one-row, three column table, and the two side 'cells' are her sidebars. This is the only way we are yet aware of to achieve this effect.

Mmmmmmm!!! Another side to the argument. Just to confuse me more :hihi: :hihi:

Just Google for "why you shouldn't use tables". Saves me a lot of typing :)

I and my other half write pages entirely contained within tables - this is frowned upon but there is one proviso which lets us off - you can enclose your page within a table if it is the only way of getting it to look the way you want it to.

Her site for example has two sidebars of equal width and height, one left, one right. However there is not always the same amount of content in each one, and using divs and spans she is not able to get the two sidebars to the same height (largely because Internet Explorer seems to arbitrarily ignore specified height settings) - so to get them the same height regardless of content, she makes a one-row, three column table, and the two side 'cells' are her sidebars. This is the only way we are yet aware of to achieve this effect.


this can easily be done using Div's, and CSS if you know what your doing properly, Part of the design aspect should be background images, which can give the illusion of them being the same height, even when they are not due to content, for example, my BLOG the menu stops after the 2 images on the bottom right, but it looks like it extends all the way down, this is only because of the image placed behind it... I could add another column on the left, doing the same, in the same method, without using tables, this would give 3 columns, each with different, and varying height dependant on content..

set your page in a 'main' div, set to the width of the page (either in pixels or 100%), then set the background image of this div... then set 3 internal div's and use float left, with height auto, and width of say, 15%, float left (middle div) with a width of say 70%, height auto, and a float right, with of say 15% if you create your background image properly, then this will show the 2 side bars as dnamic height, regardless of the content in any of the 3 columns..

if you want me to, i can write you some example code, and you can see it working as i mean, just let me know

this can easily be done using Div's, and CSS if you know what your doing properly, Part of the design aspect should be background images, which can give the illusion of them being the same height, even when they are not due to content, for example, my BLOG the menu stops after the 2 images on the bottom right, but it looks like it extends all the way down, this is only because of the image placed behind it... I could add another column on the left, doing the same, in the same method, without using tables, this would give 3 columns, each with different, and varying height dependant on content..

set your page in a 'main' div, set to the width of the page (either in pixels or 100%), then set the background image of this div... then set 3 internal div's and use float left, with height auto, and width of say, 15%, float left (middle div) with a width of say 70%, height auto, and a float right, with of say 15% if you create your background image properly, then this will show the 2 side bars as dnamic height, regardless of the content in any of the 3 columns..

if you want me to, i can write you some example code, and you can see it working as i mean, just let me know
That'd be cool, if you've got time to kill... thanks. :thumbsup:

Would it allow for the following layout requirements? :

Column 1 - 200px wide
Column 2 - no width specified
Column 3 - 200px wide

So that column 2 changes width as your browser window changes size, but 1 and 3 stay constant (and equal in height)?

That'd be cool, if you've got time to kill... thanks. :thumbsup:

Would it allow for the following layout requirements? :

Column 1 - 200px wide
Column 2 - no width specified
Column 3 - 200px wide

So that column 2 changes width as your browser window changes size, but 1 and 3 stay constant (and equal in height)?

Ah. You seek the holy grail:-

http://alistapart.com/articles/holygrail

That'd be cool, if you've got time to kill... thanks. :thumbsup:

Would it allow for the following layout requirements? :

Column 1 - 200px wide
Column 2 - no width specified
Column 3 - 200px wide

So that column 2 changes width as your browser window changes size, but 1 and 3 stay constant (and equal in height)?


yup thats cool, i'll do it tonight or tomorrow when i have some spare time (30 mins or so) and i'll post up a link to the example for you, and i'll zip and post a zip download for you to take a look at too :)

ok RichD Here's your example :)

http://www.clanscf.com/example/index.htm

I have made this so the 2 side columns 'STICK' to the sides of the browser, so unless its resized VERY small, they will always be on the side(s) no matter what size the browser is.. - I did however, only make the side's 120px width (easily changed in style.css) because 200 looked a little too wide ;)

You can add auto text indentation, text wrapping, borders etc on any of the columns if you wish, I did this as a quick example, if this is not quite what you meant then let me know and i'll re do it with what you were meaning :)

its also (in my opinion) simpler than the 'holy grail'

Any ways, have fun, a download link is included... :)

*waves*

From my bookmarks, a couple more 3-column layouts to rip-off be inspired by.

http://www.positioniseverything.net/piefecta-rigid.html
http://www.positioniseverything.net/thr.col.stretch.html
http://www.positioniseverything.net/guests/3colcomplex.html

ok RichD Here's your example :)

http://www.clanscf.com/example/index.htm


Problem with that is that the middle column isn't 'fluid', if the window is resized the content doesn't reorganize to fit the new size, it just shifts downwards, changing from a lovely 3 column layout to a mess. Admittedly in your example you have to make the window pretty small to do that, but with reasonable amounts of content in there it would be a concern.

Problem with that is that the middle column isn't 'fluid', if the window is resized the content doesn't reorganize to fit the new size, it just shifts downwards, changing from a lovely 3 column layout to a mess. Admittedly in your example you have to make the window pretty small to do that, but with reasonable amounts of content in there it would be a concern.

nah, the rest just depends how else you set up the CSS, this was a quick example..

the other reason is because Its the whole browser width, instead of a set %, or number of pixels...

its easily possible if you know CSS ;) -- Im still learning things, and tips, and tricks etc...

I have done this layout on my own page using CSS.

I would appreciate it if people could let me know if their browser has issues...as I have only been developing this one with firefox really.

Okay...

Tables for layout - a definite no no. They weren't designed for this. Really difficult to maintain more than a few pages easily.
Tables for data - of course. This is their purpose. So OK for lists, data presentation etc.

CSS for layout - of course. Like anything new there is a learning curve. It is worth the effort.

One external style sheet can control the appearance of a whole site. If you want to change the appearance - change 1 file and the rest of the site follows!

Learning CSS - Hands on Training by Eric Meyer. This is a good beginner's book for CSS. Eric Meyer is an acknowledged guru with regard to CSS and has written several books. The HoT one is fairly new and definitely worth a look. Build Your Own Website The Right Way Using HTML & CSS by Ian Lloyd is also an excellent book. I've used both and dip in when I need to clarify something. You can get both from Amazon.

Browsers - Don't get me started! IE has a number of CSS irregularities in it!! The most compliant browser is probably Firefox. However when you are designing it is worthwhile testing on several browsers to make sure you do not get unusual results. I usually test on Firefox, Safari, Netscape, IE 5.2.3 (Mac), IE 7 (PC), Camino and Opera. I use FF2 as the main testing browser and then tweak if necessary when I've tested on the others. The beauty of CSS of course is that you leave the source of the markup alone and just change the CSS.A common problem is the 'peekaboo bug' in IE (still not fixed in IE7). The other thing of course is that users can set their browsers to use their own style sheets (tho' few do)

I have converted to CSS so I sound like an evangelist, but compared with the coding for tables its dead straightforward. You don't need 1 pixel gifs to stop cells collapsing!

Have a look at the Zen garden - but remember these guys are not newbies!:D

http://www.csszengarden.com

Oracle

because they really suck

I and my other half write pages entirely contained within tables - this is frowned upon but there is one proviso which lets us off - you can enclose your page within a table if it is the only way of getting it to look the way you want it to.

That proviso doesn't let you off at all. Just because you enclosed your whole page in a table makes no difference to if you made the entire layout using tables. Really don't understand your logic on that one...anyways....

Strangely no-one seems to have missed the whole accessibility thing. This isn't just partially-sited etc people, google's robot is a disabled user, it doesn't want to fully comprehend your layout and it prefers if your code is done correctly and also semantic as well.

One very important thing is to use a Strict doctype, Transitional is just what it says and shouldn't be used. Whether you use HTML or XHTML is up to you but pleeeeeeeese use Strict!!

Testing...well I check in the latest version of Opera, IE6/7 and Firefox, no access to Safari yet and if you code correctly then your site will gracefully degrade in older browsers so your site is completely usable if not as pretty :)

Another thing I just thought of is page weight. All your styling info is in a css file which gets loaded on the first hit and then cached by the browser. Just think of all those tables, trs, tds etc you don't need. If you're good you don't need half as many divs as you think either. By using tags correctly you can make very nice code, i.e. use header tags, don't do things like <div class="header">Some header</div>

Go for it :) It's worth it and if you want to work as a web developer some agencies won't even call you for an interview if you're still using tables.