MyBB Community Forums

Full Version: The use of tables
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
I would like to raise a discussion on the use of tables. These are obviously very important in a forum software, considering the tabular structure of the information that is stored in the database and displayed to the user. You have a thread, a couple of users and their respective posts, along with the date it was posted on and some other information. It's all correlated and a table helps organizing these things. That's how MyBB currently does it and it makes sense to use tables here. Same thing for pretty much all the areas in the forum.

However I've been thinking about why we have to follow that tabular structure. Look at the forum index, for example. It's essentially just a list of links of all the forums. That's exactly what the forum index is for: list all the forums so users can choose which type of discussion they want to take part in. So far, this sounds like a <ul> to me. Then we added each forum's number of threads and posts, as well as the last post, into a separate column. And that's where we needed the table. But why did we have to put things into their own column? The thread/post count could have been perfectly implemented inline (I don't think it's very important anyway). The last post is harder to fit in, but it doesn't have to be in a table either. I'm sure we could arrange it somehow.

Am I making any sense? Personally, I don't see the index as a table. It doesn't make sense to me. It's just a quick access page to links of all the areas on the forum, with some simple statistics beside it. I'm sure you agree with me on some level if you were able to follow me. And it's not just the index, I think threads need to be redesigned as well. In its purest form, a thread is just a conversation. A user raises a question and others reply to it. Why does this information have to be displayed as a table? We only have two essential pieces of information: the user who posted the message and the message. This doesn't need a table. Take text messaging in iOS for example. That might be a bit of an extreme example since text messages are practically small talk and stuff, but I think it's a great concept that could potentially be ported to the forum software world (in a more robust form of course).

Now, I'm not hating on tables. The index and threads are probably the only places I'd remove tables from. Profiles need to be redesigned as well - they are grossly outdated - but you'll probably have to fit in a table or two somewhere. There are a few more areas I could mention here, but those would unquestionably have to be changed if we were to do this. Everything else makes sense to me. The calendar, the member list, the thread list, search results pages, etc. Those are great examples of tables. They contain a good amount of information and a table is the perfect way to display that information.

Do note this is not just about not using tables in the HTML, but also taking away the table based layout from areas that need to be changed. I realize most of you will probably disagree with me because you're all used to the current model of a forum software and it's really hard to unsee it. Am I wrong? Maybe, I don't know. I honestly think what I talked about here makes a lot of sense. I probably didn't have to write this much to explain my idea, but this is it. This is my opinion. I had to make my voice heard. What do you guys think? Toungue

/rant
The worst thing about tables from a designer's point of view is how gosh darn hard they are to style. You also can't apply jQuery animation effects to tables (one has to first wrap it in a block-level element such as a div). Tables are also cited as being slow - though I've yet to see a true benchmark that proves this commonly stated "fact".

I personally think tables should be used to show tabular data only. For example, a list of statistics should really be in a table. If we don't need tables, don't use them simple as that. Ideally, we should aim to be as semantic as we possibly can.

On the above point about semantics, it may even be more correct to wrap the forum listing in an ol rather than ul seeing as it is an ordered list...
I think having a structure of a forum like MyBB is now would be hard without using tables and the problem is using clean mark-up, semantic class names, and CSS for only style purposes. Forming the column names and such is where tables should be used of course.

Maybe list-items could be the categories..

<ul class="categories">
    <li class="category-name"> 
        <table>

The list-item with the class of category-name could be generated by the name of what the user gives to it. So if the category is name "Announcements", the class would be:

<ul class="categories">
    <li class="announcements"> 
        <table>
No inline-style BS or un-semantic class names, like what MyBB does now:

border="0" cellspacing="1" cellpadding="4" class="tborder"

Everything for style, would be applied via CSS:

. categories {}
. categories li {}
/* If we wanted to get a specific category... */
.categories li.announcements {}

/* Since the parent both have class names, we don't have to give one to the tables */

. categories li table {
	width: 100%;
	border-collapse: collapse;
}

.categories li table tr:nth-of-type(odd) {
	background: #eee;
}

.categories li table th {
	background: #333;
	color: white;
	font-weight: bold;
}
.categories li table td, th {
	padding: 6px;
	border: 1px solid #ccc;
	text-align: left;
}

HTML:


<ul class="categories">
    <li class="category-name">
        <table>
	    <thead>
	        <tr>
		   <th>Name</th>
	    <tbody>
	    <tr>
		    <td>Name</td>



Also, one WTF I see when I was looking at the HTML is the <br> tags used for spacing and the <hr class="hidden"> tags. Never use class names for style-only purposes.

But I'm not a HTML nazi. Maybe someone has a better idea.
My only issue with tables is that they are worse that a ton of divs (IMHO).

For some reason they just always looks like a mess to me when used for layouts Toungue.
I am not against use of tables at all - what does seem to slow the page is the use of nested tables.

Interesting link here: https://developers.google.com/speed/arti...int-events

and here

http://www.vbulletin.org/forum/showthread.php?t=161099 (shame about the software they chose, but a neat article)
(2012-04-21, 06:25 AM)Leefish Wrote: [ -> ]I am not against use of tables at all - what does seem to slow the page is the use of nested tables.

Unless a page has hundreds of lines of tables (or any kind of HTML for that matter) then there is no performance issues using tables. This just for semantic sake.

Here's a few links though.

http://css-tricks.com/semantic-class-names/
http://css-tricks.com/video-screencasts/...ic-markup/
http://html5doctor.com/

Haha I bet Justin is like "STFU already". Jk. I hope you guys take time to focus on the front-end and the UI after getting the back-end worked out though, because it's really important.

Maybe get a web designer to help. If you guys are honestly just programmers, a web designer would help big time.
(2012-04-21, 06:55 AM)kdevs Wrote: [ -> ]
(2012-04-21, 06:25 AM)Leefish Wrote: [ -> ]I am not against use of tables at all - what does seem to slow the page is the use of nested tables.

Unless a page has hundreds of lines of tables (or any kind of HTML for that matter) then there is no performance issues using tables. This just for semantic sake.

Here's a few links though.

http://css-tricks.com/semantic-class-names/
http://css-tricks.com/video-screencasts/...ic-markup/
http://html5doctor.com/

Haha I bet Justin is like "STFU already". Jk. I hope you guys take time to focus on the front-end and the UI after getting the back-end worked out though, because it's really important.

Maybe get a web designer to help. If you guys are honestly just programmers, a web designer would help big time.

We already have two: Justin and Mike. Both are extremely good at what they do. Hopefully both 1.8 and 2.0 will show that fact Big Grin
(2012-04-20, 09:40 PM)Fábio Maia Wrote: [ -> ]The last post is harder to fit in, but it doesn't have to be in a table either. I'm sure we could arrange it somehow.

Vanilla http://vanillaforums.org/discussions uses a nice and modern layout.

IPB http://community.invisionpower.com/ layout is nice too.
(2012-04-21, 11:56 AM)ekerazha Wrote: [ -> ]
(2012-04-20, 09:40 PM)Fábio Maia Wrote: [ -> ]The last post is harder to fit in, but it doesn't have to be in a table either. I'm sure we could arrange it somehow.

Vanilla http://vanillaforums.org/discussions uses a nice and modern layout.

IPB http://community.invisionpower.com/ layout is nice too.

Personally, I dislike Vanilla's layout. IPB isn't too bad, though.
(2012-04-21, 11:56 AM)ekerazha Wrote: [ -> ]
(2012-04-20, 09:40 PM)Fábio Maia Wrote: [ -> ]The last post is harder to fit in, but it doesn't have to be in a table either. I'm sure we could arrange it somehow.

Vanilla http://vanillaforums.org/discussions uses a nice and modern layout.

IPB http://community.invisionpower.com/ layout is nice too.

I worked with IPB before, it's honestly not to bad. The layout is nice.

What Vanilla has right though is it's easy as hell to integrate into existing sites. I hate sites, where theres a /forum and the forum looks totally different from the site itself. lazy designers.

But to be honest, once 2.0 gets on Github, I'm sure that it'll grow nicely and get more popularity. I can't wait to fork and make changes/suggestions.
Pages: 1 2