Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Tables vs. CSSTables vs. CSS
Previous
 
Next
New Post
11/22/2007 1:17 AM
 

The discussion seems to be moving from either using table or css to... story telling about "how I use css".

Perhaps we can point out the pros and cons of each, anyone?

This probably help Brent to decide himself whether to use Table or CSS in his design :-)

But in my personal experience, CSS rules because I have not had any problems with using CSS.

 


Cuong Dang
Co-founder: Enliven, dnnGallery
LinkedIn | Twitter
I'm the author of DNN and Web Standards Wrox Blox

 
New Post
11/22/2007 3:10 AM
 

I think the direction is clear: use CSS layouts and fall back to the use of tables if you need to. There is no black and white here. Deciding when and for what purpose you should use tables is the difficult decision, which should be made on a case by case basis. All the pro and cons have their merits, but sometimes simple do not apply.

Take speed for instance, I recently had a nasty experience with a pure CSS menu control (accordeon type, unordered lists) from one of the component vendors. My page hierarchy was a bit large (approx 400 pages). So I used this control and it proved to be extremely slow. Each page refresh took a couple of seconds and in admin mode more than 15 seconds! Of course this was due to the javascript that came with it, and not because of the CSS layout itself. It is just one example in which you think you take the right decision, but end up reverting back to something that works in practice (in this case to Inventua side menu, with which I could realize the same behavior with speed, but is table-based).

Peter


Peter Schotman
Cestus Websites voor DotNetNuke oplossingen in Nederland
Contact us for your custom design and skinning work.
 
New Post
11/22/2007 1:00 PM
 

We have played around with complete css skins with no tables in DNN to mostly CSS and just have content panes in table. We generally find the latter most efficient

main problem as far as we are concerned is to be be backward compatable as well as ensuring that the standard During the last 2 years, we have played around with complete CSS skins with no tables, as well as skinpacks which are mostly CSS and just have content panes in table. We generally find the latter most efficient Main problem we found have been backward compatibility as well as ensuring that the standard 5 pane default structure still works, We had issues with some of our totally CSS skins where customers were adding content and third party modules that were fine with default skin, but did cause some issues with third party modules.

Eventually for that particular skin pack we had to also produce an equivalent table skin. So the customer can use the table version if the css causes issues. One that comes to mind is when we have a 3 column Div structure for the content pane and the end user try and put content in all 3 panes. A two column skin with Div is far easier to manage. Now we have learned our lesson and when we produce a mostly xhtml/css skin we still put the content pane structure as table. Most customers are happy with that.

For example you can download the Default DNN skin mostly CSS here. The rest of the free stuff there are Table skins.

Salar

 
New Post
11/22/2007 1:34 PM
 

peter schotman wrote

My page hierarchy was a bit large (approx 400 pages). So I used this control and it proved to be extremely slow.

This appears to be an issue with the module not tables vs CSS.

For speed of display, you would be hard presses to find optimized examples where CSS isn't far faster….

  1. the page is much, much lighter, (by terabytes)
  2. the way browsers render tables will make it appear slower to the visitor (versus progressive rendering),
  3. They often require a single image is in multiple fragments, each adding to the request time.
  4. with caching the first point also dramatically speeds up the rest of your site,

The speed gap really in the learning curve - and understandably so.  People with rudimentary understanding of CSS routinely make the mistake of thinking it is about logistics.  "Table are a faster, pain free way to show my data."  But the core argument for CSS is actually about data presentation

HTML was always intended to be a design neutral language for transferring data.  The tags have meaning, semantic meaning, that helps the viewer understand the nature of the content.  For instance, h1 is meant to convey "first level heading" and that meaning is supposed to be the same on every device.  When you take the tabular data tag TD and make it mean "align right" you break the semantics and create a dialect of HTML.  The longer you keep misusing the tags, the worse the problem will be. Soon you have Ebonics  or another dialect where you need to translate basic words to have all people understand a sentence. 

This is somewhat the case now with IE6 and Firefox et al.   Thankfully, many brilliant people have written the translation dictionaries so you don't have to be fully bi-lingual.

A nice thing about pure CSS is it actually makes programming much, much easier.  You don't have to spend any time worrying about the design: put your content in the appropriate semantic container, allow a designer to move the containers around a little then leave the rest to them.  As CSS is a much easier language to understand the C# so many more people can get the heads around it.  Combine this will the simplicity of the elements and the level of design innovation goes through the roof.

 
New Post
11/22/2007 5:41 PM
 

lancelong wrote

 peter schotman wrote

 

My page hierarchy was a bit large (approx 400 pages). So I used this control and it proved to be extremely slow.

 

This appears to be an issue with the module not tables vs CSS.

That is what I said.

I think you arguments are sound and I really like the links you put in your posts, but as I pointed out in th above example, sometimes there are other factors that come into play which sometimes steer me in an other direction (mostly because of project budgets/deadlines, not to mention my personal learning curve).

Being somewhat (*grin*) flodded with projects, I find it hard to take the time to take a step back and build version 3.0 of my personal skinning framework. Given the fact that I have no control over the content my clients put in the skins I develop (and the state of certain DNN modules), I will probably need a version with content tables and one that can have a pure CSS layout.

Peter


Peter Schotman
Cestus Websites voor DotNetNuke oplossingen in Nederland
Contact us for your custom design and skinning work.
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Tables vs. CSSTables vs. CSS


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out