creating a tabless design takes forever. i was working on a form with about 100 or more feilds and some fields need to be in a column , row format and i did it all through divs and css. it took me a few days to get it working 100% all this fuss that staying away from tables is the best thing to do. but i noticed when i use it the right way being that setting the table formats into the css file and just useing the regular ol td and tr elements i got that same form done in a matter of about 10 minutes.


aside from a table designed website loads slower that is if exported from a program such as photoshop (bad idea)

if the site was programmed(scripted, etc) with divs and tables wouldnt that work?

how is the tabless story working for you? are you like me or ?

__________________
no signature set

We all come to that point someday. I can remember I was really hating CSS one day and almost went back to tables also. It (CSS) - first in the beginning - never did what I expected.

Nowadays, I (almost) never use tables (except for tabular data) anymore. If you understand the basics of CSS it's a very powerful language and I'm doing a whole design from psd to XHTML/CSS in like a few hours.

Now to your problem; I agree that handling advanced forms with loads of fields/buttons/checkboxes etc is hard to with CSS. Like for my last website I had to make a form with a few input fields next to eachother aligned properly. I have chosen to use tables for that. http://www.leekstermeerwandeltocht.nl/inschrijven/ That's the form, you can scroll down to the table. In my opinion it's just a waste of time to align such fields with CSS. (It's even more or less tabular data. :-p)

I've gathered some links on some CSS forms tutorials:

http://www.alistapart.com/articles/p...ccessibleforms
http://faq.css-standards.org/Forms_Example_Styling
http://www.assemblesoft.com/examples/form/
http://www.webcredible.co.uk/user-fr...ss-forms.shtml
http://www.456bereastreet.com/archiv...form_controls/
http://www.approveddesign.co.uk/about/proposal/

Good luck! (And don't go back to a tables! At least not for your layout)

Another great page:

http://www.smashingmagazine.com/2006...ern-solutions/

There are many arguments for and against tables, but I have to admit, for as advanced as I am, I prefer using tables for layouts. It is personal preference, really. If you create a lovely website with endless functionality, not many people are going to view the source and then decide not to visit your website. As long as it displays correctly, which you have more chance with tables for that, then I don't see a problem.

__________________
The man who comes back through the Door in the Wall will never be quite the same as the man who went out.

Oh no!! Using CSS really has much benefits over using tables.

Read up on this "article" to get convinced: http://www.hotdesign.com/seybold/index.html

You SHOULD use tables on large data results. Thats what they are there for. You should not however use tables to control the layout of the site. People have just gone way to far with this no tables thing.

You are right for coming back to tables. From the sound of it what you were doing would be just plain stupid to do with all pure css.

__________________
iSearchNotes.com - Share College Student Notes | Blog

Not using table for layouts is actually pretty easy once you get used to it. I'll upload some basic layout templates I made later, right now I'm at school.

__________________
Dingo Web Systems > http://www.dingocode.com
My Website > http://www.evanbot.com

Yea all this talk about not using tables is crazy. To keep myself from looking like an idiot when I post answers and question I modify my code so people don't think ill of my table usage.

General layout, ie. header, menu, contents body, and footer are divs. After that, tables inside of tables, with divs inside of those, is what you will find on many of my sites. It saves hours and of 100's of lines of CSS coding. And it is always exactly were I want it. And not screwed up by some cross-browser compatibility issue.

A good balance is my opinion.

Redesigns are easier and less expensive
I do the coding myself, and whilst I am fully able to construct an entire website in CSS, and using tables only for their rightful purpose for tabular data, I find modifying tables to be much easier. That's of course a personal preference and therefore one which I'm unable to argue for.

Bandwidth ain't free
Maybe so, but bandwidth is somewhat abundant these days. The hosting costs are going to be the same for me tomorrow if I switch to purely CSS, as they are today with tables. I don't see how they can make a claim on the bandwidth costs because adding "float" and "overflow" to CSS documents surely makes up for the use of "table", "tr" and "td" for HTML tables, and that's ignoring the other CSS code required to target a specific element. As long as you're not stupid and have tables inside of tables inside of tables.

Hey, these pages all look like each other!
Well, of course I still use CSS to maintain looks. That isn't the argument here. I can format a table the same across every single page using CSS, and when I change it in CSS, it changes globally. This, I feel, is a worthless point.

Write once, use anywhere, for everyone
I don't have much knowledge in this area. I would feel, however, in terms of support for various screen types and browsers, HTML tables is the most compatible. I say that without any such proof though, and so I'm unable to argue convincingly again this point. I've designed websites for browsers before, and for that I configure a sub-domain specifically for mobile devices and code them to a much lower screen resolution.

Google is blind
Sure. Google isn't quite that blind. Google's job as a search engine is to judge a website based on relevancy to a user's query. It's job isn't to be particular over how a webmaster has constructed the website. SEO is a whole new arena, and whilst non-tables may perform slightly better because of the way tables are displayed in HTML, it's marginal. I have several websites that rank very well for some competitive keywords that are coded using HTML tables. One of which is the keyword "cheats" and that website is on page one. Again, their argument here is unconvincing. The amount of time I save coding into HTML, I can concentrate on parts of the website that truly do count towards SEO.

You can still use tables if you need to, just don't use so many of them
Well, quite. My point exactly. What was I arguing for?

A note on the constant mentioning of spacer images though, that's quite silly, in my opinion, because you don't have central control over it. CSS should definitely be used for the looks because then it is all centralised. I feel CSS needs to be more powerful though. I cannot wait for the future versions of CSS where I can do things such as look ahead and look behind, as with regular expressions. That's going to be a while before that gets fully supported, however!

__________________
The man who comes back through the Door in the Wall will never be quite the same as the man who went out.

Yea what he said.

On those spacer images, they are lame. I tried doing it that way once and realized how dumb they were. If you can't get a padding or margin to do the trick (which it is seldom they won't) a will work just as well as a spacer image.

In the end, it usually comes down to personal preference. But any table loving designer cannot ignore the fact that using tables for a layout will cause problems for screen readers that blind people use.

I don't know where you got that number, but for me using DIVS instead of tables requires just a little more CSS.

Here are those layout templates I made that I promised I would upload. Notice the tiny CSS files and easy to read code...

> http://www.evanbot.com/article/no-fr...ut-templates/9

__________________
Dingo Web Systems > http://www.dingocode.com
My Website > http://www.evanbot.com

Actually, that's not true. Screen readers read a page based on how the page was coded. In other words, it reads the content based on how it is in the source code.

Screen readers do not support CSS files. If tables are used, it should be for tabular data as that was what they were designed for.

A page that is designed using a table-less design will display in linear format and be more accessible to a blind person or a person with motor skill difficulties, than would a page made up of tables.

And how do I know this? Well, I'm very knowledgeable in the area of web accessibility and I also happen to be legally blind and rely upon a screen reader to access websites.

If any of you have any questions you'd like to ask, I'd be more than happy to answer them for you, if I am able. :)

I will come back with a reply tomorrow!

I'm just saying: embrace change, don't be afraid of it.

__________________

Not surprisingly, there was a lot of community feedback asking for better layout mechanisms. Actually, people were asking for any decent layout mechanism at all, which CSS has historically lacked. Floats mostly work, but they’re a hack and can be annoyingly fragile even when you ignore old-browser bugs. Positioning works in limited cases, but does not handle web-oriented layout at all well.

Why do we use floats for layout, anyway? clear. That’s pretty much the whole answer. The unique in-flow/out-of-flow nature of floats means they interact with each other and with the normal flow, which means they can be cleared, which makes them useful. Because with clear, we can float layout blocks around and then push other non-floated blocks, like footers, below the floats.

Read full article...

__________________
The man who comes back through the Door in the Wall will never be quite the same as the man who went out.

I'm still using tables. And yes, I've done the hack way, which is to use tables within tables within tables...I just don't really know of any other way of doing it faster, especially since I use Dreamweaver.

I guess my issue is that I cannot conceptually design a site unless I am able to lay it out first in DW, then use DW to resize the table to my liking so it fits the data correctly.

Perhaps you guys have some kind of trick you use which I would love to learn, but I just don't know how one can design sites without some kind of GUI for visual reference...

Editor+Browser+Experience.

I didn't see anybody mention this, but another plus to using CSS over tables is that a strictly CSS based design will render as it is interpreted, therefore providing the client side with visual information much sooner than a table will. A table must interpret the entirety of its contents before it will begin to render.

I have never heard of that before. That is very interesting. My issue has always been this:

I create a table with say 2 rows and 4 columns...2 hours later AFTER I have already configured it properly (cellpadding,colors etc)..I find that I need to create within the ONE of the columns another table that contains 4 rows...

So within DW, I can quickly do that in seconds....

If I were to use CSS, I take it that I would be using DIV to create the tables? I guess I've never figured out how I would be able to quickly do what I need to do above using CSS....

But then again I guess it comes down to experience like you said, I just don't have all that much experience with CSS other than using it for font manipulation....

If you are aware of any good websites on CSS or books, please let me know...


Also, are there any conflicts with the new HTML 5.0 and CSS?
Or even the current HTML 4.0?

Not likely the W3C set the standards for both. If there is any conflict it would be due to a browser straying from the standards W3C has implemented.

As for books just get yourself a quick reference guide, as just knowing what tools you have is the biggest step. They usually have each style and an example or two. And you can just look up how to change the appearance (size, color, position, border, ect.) of any object or text. And, as I recently learned in an embarrassing moment, make sure you update your reference material in a timely manner.

Also you really should get a good grasp of CSS as half the power of Javascript is in its ability to change or set the style of an object or text on an event.

As well you can setup PHP to set different styles based on information that passed to it. So if the user has Safari and X style is different than X Style in Firefox PHP can produce the correct style for each. Of course Javascript can do it also but if you happen to not be as good at Javascript you can use the PHP.

Next you really need to break yourself of WYSIWYG editors. The key to being good at PHP or Javascript is knowing HTML backwards and forwards. You need to be able to name most of the 90 or so HTML tags. And it would be good to know the most commonly used attributes for each. This will help you understand DOM which will expand your skills in Javascript and PHP. And will aid you in learning XML, should you ever need to.

Knowing HTML will allow you to write the base framework for whatever you are doing without having to see it. Now I write all my HTML but I do use my browser to see how it looks (ie. should that be 250 or 260 pixels in width). And it doesn't matter if you have one table or 5 nested tables. Make sure you can hand write it out. I know when I first started web design (in the 90's) I would go to work and during down time I would write out HTML on paper then take it home and try it. And to this day I hand code everything.

So get comfortable will hand coding HTML and to a lesser extent CSS. As your skill level in any other web based languages will depend on it.

And for the nested tables try to limit them. I may like tables still but at most I may nest one table inside another. If you nest too many your code gets hard to follow and you risk not closing tags out and that can take hours to find were you missed a closing tag on a larger project.

Honestly, the first thing I would do in that situation is examine my reasons for creating that kind of complexity and determine what method would be best to simplify the process. Tables or CSS, the less you need to compartmentalize like that the less markup you're going to use and the faster it's going to be -- as well as easier to modify later.

With that said, this example took me about 30 seconds to write;

Rudimentary at best, but the colorful borders should show you that I accomplished your task with very little effort. From that point I have complete control over each DIV element with further refinements such as margins, padding, backgrounds, etc.

It's something that comes with practice, I'm sure. There are some crazy crazy things done with CSS that I couldn't even hope to reproduce at my experience level, but I can guarantee you tables would never accomplish the job. Plus once you include a style sheet with your page, incorporating IDs and Classes, there's just no comparing the cleanliness of the 'code'.

I learned HTML and CSS primarily by dissecting other web sites and having the W3C open in another window, but StumbleUpon search term CSS turns up some snazzy information. Can't go wrong there.