April 20, 2005

Forums and Tables

I am setting up a forum for all the members of the 9rules Network and remembered the million times that my buddy JC asked me to do a CSS skin for phpBB (the forum software that I will be using). When using CSS and tables it is accepted that tables should only be used when using tabular data (duh right?). However, does forum content equate to tabular data or should it really be done in all CSS?

I think it should be in tables because each data cell represents a specific column in a specific row. That's my indepth scientific explanation.

If the general consensus is that it isn't tabular data and I create a CSS skin, I will make sure to release it to the community in case anybody else wishes to use it. However, if it really should be in tables I don't wish to use a pure CSS layout without tables when it is isn't needed.

Posted by Scrivs at April 20, 2005 01:04 AM

Comments

#1 | Raul Osorio (http://www.alpha84.com)

That's an interesting question. I've become one of the members doing backend work for Satellite Soda and we've come up on this topic as well. It certainly is an interesting debate. So far in my discussions, the concensus is that it might be nice to have a pure CSS layout but it might be going overboard. It should be interesting what others think.

#2 | Kyle (http://www.warpspire.com)

I believe parts of forums should be tabular content (for example, forum listing pages, thread listing pages, member listing pages, etc). However, for the normal "topic view" where you can see individual posts - these should definately not follow table structure. Would you dare put comments from a weblog into a table?

#3 | J.R.

I recently encountered this issue while designing a forum using the Xaraya CMS. For the main page, I choose to go with tables. I also chose tables for the index pages of each different forum. These were the most appropriate for me because I view the data that is displayed on those pages as being best described in a tabular format. But for topics/replies, I chose to go with <h5> and <p> tags nested inside of an unordered list. The information contained within posts just didn't feel right inside of a table because table headers wouldn't have been able to accurately describe the information contained within their associated table cells.

#4 | Justin P (http://www.sacramentoweb.org/)

Maybe it's just me, but I think labeling a forum as tabular data is pretty much pushing the envelope at that notion. Then again, there's lots of different ways a forum can be presented.

Take the one at a popular ASP message board, which is not tabular at all (make sure to drill down to a specific thread). Or on the other side of the spectrum, you've got Scooter BBS literally screaming tables.

Guess it depends on which direction you're headed (or which direction phpBB is pushing you).

#5 | Justin French (http://justinfrench.com)

Oh ___k don't use phpBB. I'd take punBB over phpBB any day, and I've been dealing with a massive phpBB legacy for about 6 months now with one of my clients, and it's just plain awful. Sure, it's a heavy-traffic forum (115 meg DB, 100,000+ posts), but the tables crash all the time, the thing is so hard to skin, the code is awful, the thing uses way too many eye candy images in the UI, and I just plain hate it with a passion. punBB on the other hand is closer to standards compliance, uses text instead of images for most UI stuff, and is lean 'n' mean.

#6 | Zelnox

I messed a bit with phpBB and thought about this point too. I agree mostly with Kyle.

If you want to plan way far ahead and think you'll want to style the forum in crazy ways, then go with CSS (actually, it's more go with lists and divs, eh?). If you just want it to look like a normal forum, then the table makes sense (and less trouble too).

Another thing is if you want to be fancy without tables, it could mean too much extra classes. The code won't be slim anymore.

#7 | Scrivs (http://9rules.com/)

Justin I will look into it.

#8 | Chris Fritz (http://pokefor.greenchu.de/meowth346/)

I definitely agree with J.R.. Unfortunately, many forums have so many comlpex things (avatar, user status, post count, sub-title), which are all stuck in the left of two columns that to reproduce it without tables would take either 1) fun with floats or 2) removing unnecessary parts and redefining how the data is displayed.

One forum I read from time to time uses a table for the post topics listing which is tabularly "Topic", "Posted By", "Date Posted", and "Number of Comments". The actual posts, however, don't need tables.

Their basic syntax is:
<h2 id="ID FOR HASH LINKING">[Post num] Author Date)</h2>
<p class="body">Post</p><hr>

I'd probably go as far as to wrap each message in a <div>, just to associate the elements.

If you compare that to a table that most software uses, often with a table in each table cell, and it's amaing the table-based threads load in under an hour!

#9 | darren (http://dontcom.com)

I use punBB for the New Zealand Web Developers forum.

Its semantic and is valid XHTML/CSS. Why waste your time making a skin for phpBB (which is well bloated) when you can just install this awesome bit of Open Source PHP software. (enough keywords, for ya?)

word.

#10 | Rimantas (http://rimantas.com/)

I once did this, just an quick hack to show fellow developers, how can this be done CSS-way.
Results are at http://rimantas.com/bits/forum/ (keep in mind this was not intented to be bullet-proof or super-semanticaly-clean).
This somehow makes sense, but I do not object table-based forums either.

#11 | Adam Michela (http://www.axentric.com/)

I run AcuraZine.com (pretty damn big forums).

We tried to get going on a redesign of our site (which is based on vBulletin) a few months back, but I got way too frustrated with vBulletin to bother.

I decided to write our own custom package in RoR. In the process I'm facing the same questions as you. Ditch all tables? I'm not so sure yet.

I have to say that I think punbb's layout probably works best. The thread listing is tables... but so what? I'd say that, at least the manner in which the data is typically displayed, is tabular.

I'd be interested to see a complete CSS alternative to a thread listing, so if you want to bother, go for it. I'd venture to guess we'd end up generating more markup trying to do that than otherwise though.

The post view should definately not be tabular though, it's no different than looking at a blog post.

#12 | Peter Flaschner (http://www.peterflaschner.com)

What fantastic timing. I've just about hit the launch button on a phpBB forum, but am now seriously considering my alternatives. Thanks for the tips!

#13 | Adam Michela (http://www.axentric.com/)

Really nice site you've got there Peter.

Don't ruin it with phpBB :)

#14 | Bradley (http://www.bradleysepos.com/)

There will be a degree of CSS any way you look at it, tables or not (you're not going to use font tags, are you??).

So perhaps the question is less philosophical, and more practical. If the page is loaded without CSS, does a tabular layout do justice to the content? Shift thinking: "Is this tabular content" -> "Will tabular format present the content effectively". Two somewhat different questions.

Further, if 95% of your target audience is running CSS-compliant browsers on a desktop machine, then it doesn't matter whether it's styled tables or div layout, from a business standpoint.

From a design/developer standpoint, using tables may stunt future developments, because the tags are hard-coded into the content. But to the same point, it could force a well-needed redesign.

I think you should use UL and LI for your layout. :) Heh...

#15 | Carlos Porto

If you think about it, the comment section here, is a small forum. The code that is spit out for the comments can be re-used for a BB, granted you would still need to tool around a bit more for other details, but its a good basic start for a "standards BB"

#16 | Scott (http://www.scottnelle.com)

The main thread listing for PHPBB is most certainly tabular in my opinion. It has 5 columns (6 if you count the post icon which can be quite useful), each of which display a separate piece of data about a given thread. Sounds like the way the information is presented--in a table--by default is perfect. I would leave them in a table, unless you want to present them in a radically different way.

You could probably make a similar case for the posts themselves being tabular. The data about them isn't typically displayed in a way that is tabular however, at least not the way most people think of it. I would probably go with divs to group information in this case. Actually, there are a variety of ways you could mark up the posts. Dumping them in a table wouldn't be my first choice, however.

#17 | Adam Michela (http://www.axentric.com/)

Deciding whether it's tabular or not is actually an easy concept...

Suppose all the information was in your head, which program would you use to jott it down... Excel or Word? (No you can't pick "none of the above")

Looking at a forum listing, it would most definately be Excel.

Looking at a post, it would most definately be Word.

Simple.

#18 | NeoThermic (http://www.neothermic.com)

This is a rather intresting topic. As you can see from the replies, it really depends on who you ask as to wether it should be tables or CSS. Since I'm of split minds over that, I won't comment either way.

phpBB is mostly able to do XHTML 1.0 without problem, however you'll have problems with BBCode, some of which (lists being the point in question) won't validate for XHTML.

I had this problem when I syndicated my blog from phpBB's tables and used phpBB's BBCode. However, not only did I stick with it, I also wrote up what needs to be changed in a topic on my site. As you can see, there are few changes, but the result is pleasing, and most of all, valid :)

NeoThermic

#19 | James Archer (http://www.fortymedia.com)

Scrivs, using that same logic, shouldn't all these comments be in tables? :)

#20 | ben (http://www.binarymoon.co.uk/)

Since you're now using Wordpress now you should also consider bbpress (bbpress.org) - written by Matt and very css friendly. It's not as mature as punBB but runs the wordpress.org support forums pretty well. Might want to consider minibb (minibb.net) as well.

#21 | Scrivs (http://9rules.com/)

James, I suppose they could be. All blogs back to tables!!!

I know Matt probably produces kickass alpha software I would rather stay away from it and although I appreciate it minimalist roots, it lacks too many features (avatars) that I would want in a forum package.

#22 | Mike (http://www.bluemstudios.com)

I second (or third if I missed one?) using PunBB. It's built with standards in mind and is a very active project. I use it on a couple of my sites and it works great. Plenty of mods and plugins for it, too.

#23 | Ryan Latham (http://blog.unmatchedstyle.com)

Saying that a forum should be considered tabular data is really stretiching the idea of what tabular data truly is. In some loose defintion, I guess how the content of a forum could fall into this category, but in most cases I can not fathom this.

When I think of acceptable use of tables, I think of very few instances. One place I could see a forum using tables is on a memberlist; this I find acceptable becase it all will follow a pattern that can is more suitable presented in a table. Example: Member Name, Memeber Join Date, Member Posts, Member Website will all have like values coresponding below them.

However, I could also see your point as seeing it as tabular data; since I am big fan of theories. Even viewing it as the chaos theory, a pattern begins to emerge in the semingly random; and it will always follow that pattern of disorder. True a entry to a forum will always have similar sections, and the content body will always be the factor that makes it so hectic. If not anylizing the content of the posts body, and just classify it as 'post body' the pattern is complete, and you have managed to tact order to the random.

Of course design standpoint, I think it's pushing it a bit to far. Math guy, I see it all well and good. I guess it comes down to what Darren Aronofsky movie I like the best (and if anyone gets that...you too are a dork).

#24 | Adam Michela (http://www.axentric.com/)

I think the thread listing is the same concept as a member list. Usually it's something like...

Title (always 1 line) | Date | Replies | Views

It's rows and columns. It's a table.

Even if it shouldn't be IN a table. You're probably going to make it look like a table. So it's a table.

Nevertheless, I'd like to see some people go at it in a tableless layout. I'd like the increased flexibility of that.

I'd be more interested in seeing an alternative to table DESIGN, not just markup. If it shouldn't be a table, show me what it looks like when you don't make it look like a table.

#25 | Bradley (http://www.bradleysepos.com/)

Well, I couldn't resist checking back after my first comment. Consider this:

"Anything with paragraphs does not belong in a table."

Look at it another way. Gmail. I like how one can hide or reveal parts of a thread by clicking the message title. I doubt they would've gone tabular for this action.

TABLE>TR>TD = defined hierarchy.
DIV>DIV>DIV = flexible, "undefined" hierarchy.

When the time comes that you want to add a cell, suddenly you have to change the rowspan, and it just gets tiresome to sift through it all. I've done my share of converting tables to divs, and I'd rather not do it ever again. It's boring, time-consuming monkey work.

#26 | Mike Purvis (http://uwmike.com)

I just have to chip in here to say that I agree with JR's view: anything with clearly defined rows and columns is a table, and the rest is floats.

I'm working on a new forum engine based on flat files and symlinks, and I faced this dilemma as well. As long as there's a decent templating engine, it can be whatever it needs to be, but this is what I did for the default case.

#27 | Thomas Isaksson (http://www.thesimsresource.com)

I've been through the "experiment" of converting a vbulletin 3 forum to CSS. All I can say is I had to ditch the idea and make it a hybrid version instead. The biggest problem though in this case was the awkward vbulletin admin system, which basically makes it a b**ch to revamp the forums alltogether.

I agree though that the indexes needs to be tabular, while the actual posts should be styled more like blog comments or similar. Maybe it's time someone redefined the way a forum post looks, so you dont end up with all the clutter that is currently infesting the code.

I dont know how many unnecessary tables I cleaned out from the code on http://forums.thesimsresource.com, but I do know that I had to give up on my vision of a pure CSS forum after a week in the pit :)

If anyone comes up with a more pure CSS forum based on vbulletin I'd love to see it.

#28 | Zeerus (http://webfuziondesign.com)

Hi all,

I'm new to this blog, just surfing in on a link from Stopdesign. Anyway, this link caught my eye because I love using forums, mainly because I haven't started learning PHP yet. Anyway, currently I use InvisionFree (http://invisionfree.com), but I'm also working on an open source threaded forum system. Anyway, it's called aterr, and i'll be making style sheets for it. You may want to check it out sometime, see what you can do for it. here's the URL: http://chimaera.starglade.org/aterr/

- Zeerus

#29 | Josh (http://jooke.net)

My tabular litmus test is typically "If I could sort by one of the <th> items, would it make sense to do so? So in this instance, I think it is pretty clear that the post listings are tabular (sort by date, author, flag to find what you are looking for) but that a linear conversation would be hurt by reordering, and as such is a dialog .

A tabular view of data is one way to look at that data (probably the best, as determined by the designer/author), but content is no lost if you sort it by another parameter.

Although I do like the Word/Excel test (#17), Adam. Encapsulates the distinction quite well. Although i did see a flyer advertising a job description sent out the other day as an Excel spreadsheet...

#30 | Adam Michela (http://www.axentric.com/)

"Although i did see a flyer advertising a job description sent out the other day as an Excel spreadsheet..."

LOL.

I have a business partner like that, he'd design wedding invitations in Excel if he had the chance.

#31 | Joel (http://www.joeloliveira.com)

funny.

I went through this exact same dilemma. A year or so ago I "redesigned" a forum/messageboard I've been coding for years and decided to go all-out CSS. It was somewhat painful. However, in the course of the project it really helped me learn a lot of work-arounds and tricks of the trade - so to that end it was beneficial.

Looking back on it a year later I decided that, No, CSS was *not* the right tool for everything. Just like so many have said above me, the one place where divs/floats/"css" shouldn't be used is on that main thread listing page. "If it looks like a table - it should be a Table." Amen.

There are a lot of tricky items that will pop up when you start going the floating divs route, things I won't get into here. Trust me on this one. I can say, though, that the semantics of a table, and its related properties, will certainly help a person massage and re-factor the nature of that thread list a LOT easier than a whole lotta divs will.

From someone who's been there, done it, and come back out the other side, lemme tell you - don't do it to yourself.

Post a comment


Remember Me?

(you may use HTML tags for style)

Email this entry to a friend








Email information is not stored by us and is only used to send out the email.

« iPod Shuffle Contest | 9rules Network Blog »