Are you still using tables?
On trying to install .750 gold and xanthia this week I noticed there is still a heavy reliance on tables.
WHY?
So why? Why is postnuke and the majority of the internet in 2004 still using tables? I can't think of an answer. I am in the process of transforming my website into a fully tableless design, at http://www.letsmakescotlandgreen.org and from using CSS for the last few months I would not dream heading back down the slippery slope back to designing my layout in tables.
The Montego Estate and the 4 Wheel Drive Impreza
So far if I was to imagine comparisons between a table design and a tableless design, well your tables design is like your A reg. Montego estate, old, shit, incapable of handling adverse and unforseen conditions, and extinct while the tableless design through CSS would be a 4wheel drive subaru impreza, does the job, but faster, can adapt to diferent conditions and looks and sounds much sexier.
Action
So what's it gonna be punk, 1990's table design or fully tableless CSS layouts for a new centuary and a new millenium?

The .7x range is tables based and always has been but since .750 is the last revision in this series this doesn't present too much of a problem......

But anyway it's goodbye tables and hello CSS for .8x. Not only are we using CSS a lot in this release there's also work being done on accessibilty (WCAG, WAI etc.) and usability.

-Mark

--
Visit My homepage and Zikula themes.

Cool man. Can't wait to get .8 then it should be a great ride; a ride to the promise land.

Couldn't agree more... The aim with .8x is to present as professional a product as possible in terms of the standards support; XHTML, CSS, WCAG, WAI etc. (enough acroynms there!). This can only help open PN up to a new userbase who care about the quality of the markup and the accessibility of the end product.

It's a huge amount of work though with checking every module template in addition to the themes. Currently only one of the base themes (ExtraLite) is fully tableless) so if you fancied helping out there's a bunch of themes need working on.... ;)

Saying that with the right theme and .750 you can reach xhtml compliance so .750 is a step in the right direction.....

-Mark

--
Visit My homepage and Zikula themes.

Yea I would love to be of any help at all if it improves the transition to a standards compliant and tableless future. I am going to start a project at sourceforge dedicated to tableless design themes for postnuke, although the fact that I am having errors getting xanthia working is delaying my progression. I am still learning CSS and its application and there is a few issues which require a polish. Anyway I reckon a dedicated project allowing the distribution on exchange of brains is definetly the best path to take.

Well if you fancy a chellange then either PostNukeBlue or PostNukeSilver themes will be fun.... Due to the tables usage here they break up as soon as apply any DTD (forcing browsers from quirks mode into standards mode) so both of these need a lot of TLC....

But if your serious about helping then take one and have a go. Obviously the end product doesn't need to be a pixel perfect match but something in the style of the original.

-Mark

--
Visit My homepage and Zikula themes.

Don't say goodbye to tables just yet ;) I can tell you from here in the "bunkers" that browsers are not ready yet for tabless design. At the moment I am forced to use a mixture of tables and CSS to create complex themes as they are impossible to acheive without tables - yes you can get the "3 column boredom" easy enough, but try to go further and you have problems and need to muck around with irritaiting "browser hacks" which will only take you deeper into trouble.

My thoughts on this? When CSS becomes as stable and cross-browser as tables are I will use it. Until then I play with it, but always use tables for the "products" :)

And as always I wonder why, oh why they could not have allowed divs to be set "side by side" like tds - crazy...

PS In saying this, I am not telling you to cease using CSS, far from it! I use CSS for as much as possible and only use tables for the basic layout foundation, the rest of my themes are CSS.

REgards
Lobos

--
-Lobos
Professional PHP Framework Services: Concept, Development and Deployment

Kick me if I am wrong but I am almost certain that you can make tables standards complient...

Regards
Lobos

--
-Lobos
Professional PHP Framework Services: Concept, Development and Deployment

Yes, all CSS could in a couple words limit the design.

I realy enjoy CSS but the problem exists in alot of the existing (for some reason) browsers.

One major site I have noticed and actually I find loads slower now then when they used tables
www.gamespot.com

I have broadband and cannot for the life of me figure why it loads slower, but its a kickass site once loaded.

Lately theres been alot of emphasize on CSS, but again browsers are the real killers.

check http://www.post-nuke.net for a tablefree (and almost WCAG AA/Section 508 compliant) theme

--
regards from germany
..::[Zikula Application Framework]::.. ..::[SEO-Blog]::.. ..::[CMS Sicherheit]::..

Of course... all valid points.... Tables aren't completely dead and will continue to be used for a number of themes until CSS becomes more standardised across browsers.

The goal though is to be able create accessable sites opening PN up to a bigger market. This means that the module output has to be right i.e. tableless unless a table is the correct markup. Then *some* tableless themes can be provided that allow for fully WCAG/WAI compliant sites.

That doesn't stop a whole mass of themes using tables from being available that can exploit tables to thier fullest too. This may be appropriate for some sites but not all.

But that's all we're really talking about; opening up PN to new users who wouldn't of otherwise considered PN an option; cleansing the produced HTML so that the output is well formed and markup used approarpriately (a table for tablular table, a list for a list of items etc.).

I don't think there's anyone that will say 'you've not got enough tables in PN .7x can we have some more'!

-Mark

--
Visit My homepage and Zikula themes.

Yes like most I have seen, ugly as sin LOL ...

By the way, can you get a footer to work with that layout? One that spans the entire 3 columns like the header ;) ?

Regards
Lobos

--
-Lobos
Professional PHP Framework Services: Concept, Development and Deployment

Lobos,

Yes you can get a footer than spans the three column layout. A recent article about negative margins on alistapart outlines the basic methodology for getting the traditional 3 column, header and footer CMS layout going. The extralite theme in the .8x cvs uses this methodology.

There's no doubt theres a learning curve going from tables to CSS. I guess this is mostly becuase people can easily visualise a table structure.

-Mark

--
Visit My homepage and Zikula themes.

I guess I'm behind the times, but I'm pretty certain other people reading this thread are having the same questions I am.

I understand the basics of CSS and can edit an existing stylesheet with ease. I always assumed that CSS was limited to things like font sizes and background colours. Obviously there was more to it that I never used, but I can't seem to understand how CSS could be used to layout a webpage in the place of tables.

Anyone have a tutorial link to get me up to speed? I guess I need a refresher in web basics.

Yo 'Spire 2000'
Indeed I thought along similar lines, a few months ago, but it seems my lengthy ignorance to CSS was unjustified; as it is indeed capable of laying out the design of websites in a way which is arguably superior to that of tables and most definetly has the potential to replace tables.

Some Links.
http://www.csscreato…ion2/pagelayout.php
http://css.maxdesign…al/tutorial0916.htm
http://css.maxdesign…al/tutorial0816.htm

The links are all pretty self explatory innit. The first one is a CSS layout generator, and the other two the best tutorials I have read on the subject, on 2 column and 3 column layouts respectively.

Thanks Mark, I will have to investigate this as the footer was one of the issues holding me back from using this type of model with the traditional 3 column theme structure.

REgards
Lobos

--
-Lobos
Professional PHP Framework Services: Concept, Development and Deployment

Thanks Thevdo. I'm going to check these out right now.

Spire,

CSS is about far more than colors and fonts. CSS allows for full control over the positioning of elements within a page. An element may be a simple, singular tag (an image), a more complex structure (e.g. a form, a table) or a group of elements that serve a single purpose (a header, a news article).

Essentially we identify these elements on a page and apply styles to them. The more complex structures are identified as divisions of a page (the div tag). By identifying and tagging (using either the id or class attribute) each structural part of a page can be positioned with in the page.

All of this requires a basic, working knowegde of CSS so try this site.

For some specifics on CSS layouts the following sites are useful

http://glish.com/css/
http://www.csszengarden.com/
http://css.maxdesign.com.au/floatutorial/
http://www.alistapart.com/articles/negativemargins/
http://www.alistapart.com/articles/journey/
http://www.allmyfaqs.com/faq.pl?Tableless_layouts

Why CSS?

CSS breaks the link between the content and it's presentation. What does this mean? This means that the HTML page contains the logical markup of the content i.e. headings, paragraphs, images etc. But not where these should be positioned on a page.

For a really good example of this in practice see http://www.csszengar…/098/098.css&page=1, http://www.csszengarden.com/?cssfile=/101/101.css&page=1 and http://www.csszengar…/102/102.css&page=1. At first glance you'll see three very different pages... But take a closer look.... View the source of each page and you'll notice it's exactly the same page with different stylesheets applied. This is a really 'in your face' example of the seperation of content and presentation.

Why is this important?

1) Ease of modification - This is less important in the CMS arena since we're working with a database but the prinicpal here is important. If each page contains layout information then you have to update each and every page containing that layout.

As an example let's take a medium sized (100 pages say) handcoded site using a tables based setup. Now let's move one 'block' from the left column to the right. In order to do this we'll need to edit each page containing that 'block' of HTML code. In a CSS layout (as you've seen above) a simple stylesheet change can change the location of any 'block' of content on a page

2) Accessibilty - This is the biggest driver behind CSS based tableless layouts. You and I use a web browser to access our content from the web. This isn't the case for every user. There are many other user agents in use from mobile phones, pdas etc. but there are also a bunch of non-visual user agents e.g. screen readers that take our web content and serve it out in a completely different way to that of a standard browser.

An important factor in accessibility is ensuring that your site functions for these non-visual user agents in addition to the more traditional ones. Although screen readers are getting better and better they still struggle to understand the intent of table when it may of be used for layout or may have been used for content - how does a computer program distinguish the intent that you had when you designed your site.

The misinterpretation of tables (see 3) is one reason for doing away with them for accessibility sakes but there are others. Accessibility guidelines provide a recommended order for the placing of content on a page so that they perform optimially within the sreen reader enviroment - imagine that every piece of text in every left block you had being read back at your before you actually got to the content you where interested in on a page.

Now, as discussed already, CSS breaks the link between content and presentation so we can have the content rendered first in the HTML but laid out between the blocks for visual user agents. Table based layouts inherently tie the layout of the page to the order of content in the markup. So although someone said tables can be made accessible this isn't really true (there are differnet levels of accessiblity).

3) Semantically correct usage of markup elements - I'll sum up this one simply; a table is a table is a table, a list is a list is a list.... etc. To expand on this a little bit.. Each markup element should be used for the purpose for which is was designed i.e. tables should be used to represent tabular data. Lists should be used to present a list of items

Using markup elements for this purposes for which they're designed makes it easy to style the entire site, makes it easier for browers and other user agents to render the resultant markup and ensures that you get the best consistency across all user agents.

Why should we care?

If you know your target audience then you may not. If your only designing a site for a known set of people then you can design the site with them in mind. If this isn't the case then there are many reasons why you should care.

a) If your site is a business site can you afford to turn away customers simply because thier not accessing thier site via the user agent that you deem acceptable.
b) If your site is a public sector (goverment, education etc.) then you have a moral and ethical duty to provide access to content to ALL your citizens, students etc.

In fact there is legislature in a number of countries stipulating accessibilty requirements for goverment web sites so it's important to be aware of this. The most published being the American Rehabilitation Act Section 508.

Summary.

Sorry for the long post (but you asked). This gives you a basic intro to what CSS layouts are from a technical perspective and why thier an important part of modern web development

-Mark

--
Visit My homepage and Zikula themes.

It's something i've have been fighting with for a few months now as well. I could always get a design that looked ok as long as the center column was longer than the blocks otherwise the footer would 'tuck up' under the content and behind the blocks..... This article solves that nicely.

-Mark

--
Visit My homepage and Zikula themes.

Realy good links thevdo

As I spoke with a real good friend through email he had pointed out

as long we keep stiving to make CSS the main use for designing, the browsers will eventually be forced to comply.

I agree strongly with this, I think were headed in the right direction and we definitely have a force to push it with hahaha

Yes there is a lot more to CSS than just using it to format text - if you have a look at this site I am working on :

http://stopkillingchildren.com/ (please don't join for the moment)

And check out the navbar in the top left. This would not be possible without CSS, although it does need some javascript. In fact all these popup features are powered by the popup script I released a short while back.

This site is a mutation of CSS and tables and probably not the best way to do things - but as always I am a slave to formidable deadlines and thus have to quickly slap things together LOL :)

REgards

--
-Lobos
Professional PHP Framework Services: Concept, Development and Deployment

Mark,

Thanks for the help and the links. Yesterday afternoon, I took a few minutes and incorporated some extra CSS in one of the sites I am developing and was shocked at how easy it was to create a class and then define it.

Lobos,

I really like the dynamic look of your site. That menu on the top left is unique and certainly catches your eye. The page took a little bit of extra time to load though, just so you know. At first I thought the page was screwed up but it only half rendered and stuck there for about 5 seconds.

Intersting that this report would appear as I was considering the whole CSS thing. It's a report on a conversion of Microsoft's site from tables to CSS.



Very interesting

I love CSS!

That said, I need to add that, notwitstanding the (lack of) browser compatability issue, you still need to take care how you implement it. For example, that gamespot site mentioned earlier has four (4) external stylesheets which add up to almost 64000 bytes! That's almost 13 seconds downloading style sheets on a 56k modem! Granted none of us (well few of us) tolerate 56k modems, the rest of the world is pretty big and they'll never stick around at a site that seems to never load.

Again, I love CSS and the promise that tables will eventually "R.I.P." but, with 0.8 well behind schedule already, trying to eliminate tables would not be very high up on my list.

Slugger

Sluggar,

However remember that stylesheets can be cached so that's 13 seconds as a one time deal rather than tonnes of additional layout markup being downloaded at each page load. I'm sure that after a very small number of page views your in the positive in terms of bytes downloaded.

Also tables are pretty well eliminated already in .8x. The only place that tables are used outside of non tabular data is the themes that come with .75 (xanthia versions) and Xanthia itself. As soon as .750 is out of the door i've got the tableless versions of PostNuke and PiterPan ready to go.

-Mark

--
Visit My homepage and Zikula themes.

True, but add in HTML, scripts, images, etc. and that first page with a ton of big files can be a mighty big hurdle for slow connections. I've given up on slow loading sites and I suspect I'm not the only one. IMHO, fast is better.

Slugger

There are already some near table-less themes out there - Minimalist comes to mind as one, however I have found that Postnuke isn't the drama it's more the Modules and Blocks which are overladen with nested tables, nest tables, nested tables they sort of make a mockery of CSS based themes.

Cheers
Namtrak

postnuke .750 will have at least some cleanups (e.g. within weblinks and downloads module)...

--
regards from germany
..::[Zikula Application Framework]::.. ..::[SEO-Blog]::.. ..::[CMS Sicherheit]::..

Also a lot of the modules use the PHP-nuke style opentable/closetable functions so if you change these over to styled divs then you can reduce tables substantially via a theme update.

-Mark

--
Visit My homepage and Zikula themes.

Lars, I was probably more thinking of the 3rd party mods etc, which I guess may mean the module/block development guides could probably do with an update post .8 release.

I have been playing with this for awhile now and I have come up with a 3 column model that holds 100% height most browsers - it is also completely fluid; actually with my model it is possible to mimic tables with css2 and also degrade well to IE6 and it's shitty CSS quirks....

The columns are also fluid, unlike many of the other layouts - I think this is a must because sites must look strange at high resolutions with little skinney columns and one huge center coumn LOL

Anyway check it out and tell me if you manage to break it...

www.postnuke.co.nz/css/

--
-Lobos
Professional PHP Framework Services: Concept, Development and Deployment

Lobos,

Seems good in the browsers I tried; firefox .92 and IE6 (XP). There's only one problem with the design as is and that is an accessibility requirement. The main content should be listed first in the source even if it's not positioned that way visually. Think of screen readers and having to work through each left block audibly before getting to the real content of the page - see this reference.

This is the kind of things that i've been meaning when saying that xhtml/tableless/css itself isn't really the end goal but that there are reasons for utilising these technologies above and beyond the technology themselves. There stands to be real benefit for end users and the overall adoption of PN into new markets should PN be able to fully configurable into a accessable web solution.

-Mark

--
Visit My homepage and Zikula themes.

markwest - it is great to hear that PN is focussing more on CSS vs tables. At the moment it takes great effort to make changes to the layouts on PN. As a PN user, I value layouts alot since it gives my site more individuality.

At the moment, I have removed the tables from the mainpage (although, still have not cleared the tables within the blocks). It is not completely finished, but it will take me some time on a personal journey of learning PHP, mySQL and CSS - all in one go!! So I am no expert. See the result :: http://thefazz.com/

I look forward to 0.8

In the meantime, I will continue to tweak and manipulate some of the codes.