why can't we be friends (CSS & Tables)

  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

I've seen a lot of articles, posts and suchlike all over the internet where some people are talking about tables, and then always always always someone says:

"Use CSS instead".

Why instead? Why not use both together, I am pretty new to web stuff, but recently I have been doing a lot of layout design and I have found that most of the time, the most logical and simplest method is to use Tables controlled by CSS.

Using this method I have created complex table-based layouts that are controlled by an external CSS file so the whole site can be revamped by altering the one CSS file.

If I am missing something then please tell me, but I don't see why some people say never use tables, or just use per page. Some things just logically suit tables (the forum listings here perhaps) and so why not use them? Of course some things suit CSS much better and so it makes sense to use CSS.

I just think that rather than stating "don't use tables" as a rule, all situations should be analysed as to what is the most suitable tool for the job.

BTW I must say hurrah for CSS as I would be lost without it.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

my method is to use tables for tabular data and usually forms. I use CSS for everything else.

Do what works for you.
:)
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

My thought is this -- I'm sure many of us here and elsewhere have often complained about crossbrowser compatability issues and why code works in some browsers but doesn't in others, ad nauseum (just a quick reading of prior posts in this forum alone will demonstrate that).

As early as at least 1999, if not before, the W3C has recommended NOT to use HTML for presentation, but rather for structure and use Style for presentation.

Read this from the W3C:


http://www.w3.org/StyleSheets/Core/

Specifically this:
Quote:
Most HTML documents are not valid according to the HTML specification. Invalid documents, in combination with the Core Styles, may lead to unexpected results. W3C offers a way to validate documents. Also, for best results, the HTML markup should be non-presentational (avoid e.g. tables for layout, FONT tags, overuse of <BR>, etc.) and structural (e.g. use H1-H6 for headings).


A study of their core style sheets provides a wealth of knowledge.

Another excellent resource to bookmark and follow are the W3C's Recommendations:
http://www.w3.org/TR/#Recommendations


The point is that we cry out for "Standards" to make our lives easier -- and the W3C is taking steps to make that possible. IMHO, the w3c website is the most valuable resource any webmaster has. Admittedly, it's very complex, but when all else fails, go to the source.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Tables are very useful for design layouts (ie 2 columns, 3 colums, 1 row+1row w/ 3 columns) and for laying out tablular data, but in most other cases they are unneccessary.

For instance, the old method to get a photo to float to the right side of the screen was to use a table and set the align to right. Now, you can make that photo a block element and float it right with little more than an id or class tag. Goodbye table tags!

In some cases they are necessary, such as for presenting tabular data, but in many cases you can create table-looking layouts with nothing more than divs.

With the full implementation of CSS2, we might be able to completely do away with tables if I've read things correctly.
  • manuel2283
  • Novice
  • Novice
  • manuel2283
  • Posts: 26

Post 3+ Months Ago

This Website Was Using Tables and FRAMES. You have do to do what ever gets the job done and work.

http://soccer.org/
http://www.xs-engineering.com/

So go figure, some of the biggest design studios use what ever methods are neccesary to do the job.

Download the Code and View for Yourself's
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

gsv2com and manuel2283

My point is you already can do away with tables with CSS2. View source on the 3 column front page at http://www.w3.org -- You won't find a table there. In addition, view source at my friend's 3 column tech resource forum: http://www.stevestechresource.com/str/ -- not a table there either.

Both pages are entirely crossbrowser compatable (with current versions -- I'm pretty certain that old NS 4x versions will have some support issues)

To further prove the point, I decided today (I needed to do it anyway) to change my own company's front page -- http://alaron-nuclear.com and used the standards I described above. Please excuse the extremely basic look -- it's very temporary and I did it quickly and I already decided this evening I'm removing the white borders around the top nav and bottom copyright stuff tomorrow -- that was more of an experiment than anything else. Also, the page really only looks it's best at resolutions 1280x1024 and above (for dial-up users, forgive the long display time on the background graphic -- it's the lowest res I could make it without butchering the quality - but since my company president said use it, I'm using it for now - I'll explain it to him later).

The point is, that I used one of the w3c's core style sheets and XHTML Strict to accomplish the task and didn't have to use a single table either.

I thought the examples you gave, manuel, were both excellent and understand your point, BUT -- it is not the recommended standard to code it that way. That brings me back to my original point. Why don't webmasters/designers adhere to the standard?

Goes back to what you said:
Quote:
So go figure, some of the biggest design studios use what ever methods are neccesary to do the job.


Time is money, so the big guys are going to take the shortest, quickest, easiest route to accomplish the task -- just look at a couple of the big guys, and try running them through the w3c validator --


http://yahoo.com - no doctype -no character encoding -validation result:

Quote:
I was not able to extract a character encoding labeling from any of the valid sources for such information. Without encoding information it is impossible to validate the document.


http://www.cnn.com -- Doctype specified, however 32 instances of this error made this one invalid from the start;


Quote:
Line 185, column 1023: reference to non-SGML character


Here's the best one:
http://www.microsoft.com - No doctype declaration. (These are the guys that wrote the program for the Internet Explorer web browser you are probably using.) here's what the W3C has to say when you try to validate their code:


Quote:
I could not parse this document, because it does not include a DOCTYPE Declaration. A DOCTYPE Declaration is mandatory for most current markup languages and without such a declaration it is impossible to validate this document.


In the end, I go back to what I said in my original mini tutorial -- webmasters all over the world cry out for the standards to make coding web pages easy and viewable by all, but when the w3c is working their you-know-what's off to give us these standards - many are just ignoring them, "because there are easier ways to do this". "or, "Besides, what's more important -- whether I code the page to be compliant, or whether my client's viewers have an enjoyable experience viewing the page" -- and that's what it comes down to -- many take the easy ways out to coding because of time and money and viewer appreciation and could care less about the standards.

As a side-note, this is not to belittle anyone's efforts. It's more of another mini-tutorial on why the standards exist and how they can be used. Added note --The CSS I used is valid, although it currently doesn't validate because I forgot to remove the Topstyle blurb when I imported the core style from w3c -- I'll fix that in the AM.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

If IE was up-to-date you could make <div>s behaive like tables, couple this with other CSS stuff like CSS-P and it would be like your birthday, Christmas, easter, thanksgiving, and a summer holiday all rolled into one!

For a CSS-ONLY site that is reasonably attractive see my site: http://www.alpha-matrix-design.co.uk and tell me what you think?
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Shoot, I can't wait till css's "display" attribute is completely accepted in all browsers. This probably what you're talking about, LazyJim. Right? hmm. Maybe not.

But the display css2 attribute is going to have an enormous amount of power.

Most people seem to think css's use is only in the

a {text-decoration:underline; color:#000;}
a:hover {color:#ccc;}

ability. Good luck on your site ATNO. My front page is made completely without tables also and shows up beautifully on japanese cellphones. Without css, this would not be possible. The inner pages at http://www.gsv2.com/en/ have one table for navigation (and occasionally another for data display), but that can't be done away with... yet.

I'm not sure if my site is 100% w3c compliant yet, but it will be soon. One thing for certain: I am loving the power of css. Check out the gallery program at my site. The green hover borders would not be possible without css either.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

LazyJim wrote:
For a CSS-ONLY site that is reasonably attractive see my site: http://www.alpha-matrix-design.co.uk and tell me what you think?


Not bad. You could even get rid of the img tag of the logo at the top of the screen if you wanted to by simply setting it as the background of the main div or another div and adding a bit of a top margin.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

yeah i s'pose i could, this page was an experiment of many different methods.
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

Yeah I was talking about display with table, table-row, table cell etc. I gave it a go and it was much easier than using floats for layout.
Another great thing will be using adding content using css - allowing you to remove most of the extra nested <div>s we currently need to get CSS layouts working cross-platform, and use advanced selectors to add them in where needed!

the "IE7" patch uses behaviours to emmulate some advanced CSS that IE6 is lacking, maybe this can be some help to get the web sites working with the code we want, then people will hopefuly be impressed and pound Micro$oft to update their bloated browser for real. http://dean.edwards.name/IE7/
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

LazyJim wrote:
then people will hopefuly be impressed and pound Micro$oft to update their bloated browser for real. http://dean.edwards.name/IE7/

No diggity, no doubt! 8) A CSS world is a happy world! :D

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 50 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.