0

I've been thinking about this for a few days and wondered which would be the better layout option for making a forum: Tables or Divs?

Now to be specific, there are a few criteria here:

  1. It will be in the familiar tabular presentation most forums use, such as the phpBB default theme.
  2. It must be able to be responsive, ie if you want columns to be hidden at certain screen sizes, the whole row must be clickable, etc.
  3. It must be easily re-stylable for custom skins.

My initial thought is that tables tend to have issues in responsive layouts, and the typical forum layout can be accomplished via divs, though they may require somewhat hacky approaches depending.

Is there really a benefit to either format? Would a Table layout be easier for a search engine to crawl? I'm trying to avoid too much opinion based points such as preference of divs over tables, unless there is a really strong case for it.

EDIT

There seems to be come confusion as to my question so I'm going to clarify. My question is not about the website format in its entirety. In fact, the project this is for is utilizing bootstrap. My question is: are there advantages to using tables for the Forum layout, ie where the forum categories are listed, the threads are listed, etc. These things are practically tabular data. What about tables for that. It's not purely data, but it is still somewhat tabular in its nature.

Once again, my question is not to discuss the merits of Tables for web page layouts, as the "Possible Duplicate" suggests.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
sharf
  • 2,123
  • 4
  • 24
  • 47
  • 1
    [This has been heavily discussed often](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) – misterManSam Oct 16 '14 at 01:02
  • 1
    There is no reason to use tables for layout in 2014. A typical forum layout can easily be achieved with CSS and divs / HTML5 elements such as `
    ` / `
    ` / `
     – misterManSam Oct 16 '14 at 01:05
  • @misterManSam I've updated my question as there seems to be confusion as to what I am asking. I am NOT asking about using tables for web page layouts. – sharf Oct 16 '14 at 04:07

4 Answers4

2

maybe just flex-box ?

A Complete Guide to Flexbox

Hovhannes Sargsyan
  • 1,063
  • 14
  • 25
2

This may just be my personal opinion, but I think tables were made to structure data. Yes, there was a time when tables were heavily used for layouts but I guess we're all glad that those times are over.

Your site should be semantically correct, not only syntactically. I think this sentence sums it up pretty well:

"Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables."

http://www.w3.org/TR/html401/struct/tables.html

There are UI frameworks that do the job very well (in fact Bootstrap's column oriented approach is very close to a table) and I am quite sure that you will achieve the desired look using semantically correct tags. I am not a SEO specialist but I think that tables are not what you're shooting for in case of crawler friendly semantics.

Fred
  • 3,324
  • 1
  • 19
  • 29
  • Tables and spacer.gif oh boy! – Christina Oct 16 '14 at 02:31
  • Thanks for the info, but I've updated my question. It is NOT about using tables for web page layouts (in fact, I'm using bootstrap), it's about tables specifically for forum features, like categories, thread lists, etc. – sharf Oct 16 '14 at 04:11
  • That doesn't make it any better. Without knowing anything about your design mockups it's almost impossible to help you. Otherwise I'd say: If you're trying to list something, use a list. And no - just because most forum designs resemble tables that doesn't mean that they are tables. A table is for structured data. A forum design is a layout. And not everything with rows and columns is a table. – Fred Oct 16 '14 at 13:12
  • 1
    That is precisely the point of my question, most forum designs, that represent tables DO use tables for their layouts. Are there any merits in that, or are they just being lazy/using old methods? – sharf Oct 16 '14 at 15:26
  • I'd say it's the latter. Layouts for forums are like legacy code. Imagine thousands of forum themes breaking with a version change. Nobody would want that. Btw: phpBB uses lists. It might look like a table, but it's a styled list. – Fred Oct 16 '14 at 16:06
  • Exactly, yet IPB and Zeta Boards use tables. I don't want to go down the road of tables and make something new out of an old and inferior method. However, NEW releases/versions of forum software still use Tables and I want to know if there is a good reason for it that I should consider. – sharf Oct 16 '14 at 18:24
  • What do you want to hear? "Go ahead - use tables!"? Forums are a little bit like the grandparents of the internet. They've been one of the first around and they are one of the last to change (yet there are still mailing lists..). There is simply nothing right with tables for layout and listing purposes and web technology has advanced far enough that there is no need to use "easy" tables anymore. – Fred Oct 16 '14 at 23:18
  • I'm not looking for permission, if I wanted that I would not bother posting on SO. I want to know why some NEW and some big players in forum software are using tables. What, if any, are the merits for this particular kind of layout. What I've gathered from your comments is that it may be for legacy support or "easier". That is all I am looking for in an answer. – sharf Oct 16 '14 at 23:30
1

It depends on the level of browser support that your looking for. Flex-box only works in IE 10 and above. There's options like display:table-cell (to attempt to make the element behave like a td table element), but again it has limited browser support for older browsers.

Tables should be kept for tabular data, and not used for layout, especially when there's tons of frameworks out there now (like Bootstrap) which will handle it for you.

One thing I have found really cool is Masonry.js, which rearranges the elements on a page to find the position for them based on their size and the size of other elements around them. It works in IE8 and above, and all other major browsers. The only downside is that it requires javascript where as Flex-Box (which gives a similar result) does not.

Alternatively you can write your own css for table layout, using a grid structure (similar to Bootstrap) where you have a set 12 column layout and rows containing cells which span across 1 - 12 columns.

JGDEV
  • 35
  • 1
  • 1
  • 6
0

Using a <div> can help too in making a layout responsive and table-like. You just need to change div properties a bit and you can use it as you are using tables! Here is the major change which can be done to transform <div> to table-like form

<head>
<style type="text/css">
.div { display:inline-block; }
</style>
</head>
<div class="div">Hello</div> <div class="div">World!</div>

display:inline-block; will force all div with same property to get in one line.

Gavin
  • 321
  • 2
  • 10