Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Okay, so we all know we're not supposed to use tables for formatting; we're supposed to used divs and CSS; tables are for tabular data. But what is tabular data?
I run a forum for people who make model terrain.
The home page has a header, footer, menu on the left, and a space for content. These are all defined by divs and CSS... as they should be. :-)
However the content for the home page is a list of forums i.e. titles, number of topics, date of last post. Tabular data methinks?
Click on a forum and you get a page whose content is a list of topics i.e. topic titles, number of posts, date of last post. More tabular data?
Click on a topic and we have a page whose content is effectively split into two columns; the first contains the poster name, avatar, posters rank, etc, The second column contains the post itself. There are also "rows" that contain buttons to quote a post, report a post as abusive, etc.
I'm guessing that, at a first glance, most people would define the first two as tabular data. The third... hmm... I think opinions might be divided?
My forum software is a hugely modified form of phpBB. So modified in fact that the code is barely recognisable as phpBB. I mention it because it, and as far as I'm aware, phpBB, and pretty much every other piece of bulletin board software I've seen, uses tables for this stuff. So the fact that my site uses tables for all three of the page types I've described is inherited from the original phpBB code as opposed to being a decision I've made.
I also observe that most e-commerce software (including mine, that I use on other sites) uses table to "format" list of products on catalogue pages. I like to keep an eye on what the "big boys" are doing with things like this and have observed that Amazon appear to be using divs for their product lists while eBay 'still' uses tables.
I've had a good look around the web for information on what's regarded as best practice and while there's a consensus that tables should only be used for tabular data and not for formatting, I am yet to see a definition of "what is tabular data" and specifically: at what point tabular data becomes content that should be formatted with divs.
On a similar note: there also seems to be a consensus that input forms such as login screens should be formatted with CSS (although it's a damned site easier to do it with a table). It seems odd to me that a form with two titles (for username and password) and a couple of entry fields is NOT tabular data. Yet if we were to design a screen to retrieve and display that information... well then it would be tabular data would it not? And if not, then what the heck IS tabular data? ;-)
Despite the last couple of sentences, this is a serious question and I'd like to know where other programmers draw the line with regard to what is, and what is not, tabular data.
This information should be useful to you: W3C definition of tabular data.
How you use tables is ultimately up to you. However, if you wish to be compliant with w3c standards, tables should assist users in understanding the data.
Think in terms of accessibility: if a person using a screen reader encountered your table, would the table help them understand the data or confuse them further?
A table with no summary attribute or no th or thead/tfoot elements can confuse a user.
A table containing any kind of script can confuse a user.
td elements with content that needs to be visually formatted to be understood can confuse a user.
If you are unsure of whether a set of data is tabular data, it is probably not tabular data. There are other ways to format content that are more accessible and more compliant with standards.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
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:
It will be in the familiar tabular presentation most forums use, such as the phpBB default theme.
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.
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.
maybe just flex-box ?
A Complete Guide to Flexbox
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.
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.
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.
This is a question of how to perform the best practice of storing data from a webpage. Like texts/image-urls/links etc.
I have an CMS were you can create web pages. Here you can edit texts/upload images. In the future it would also be nice to "add new elements", add links to a-tags etc.
I need to have a robust and flexible solution that also have good performance. In both getting/recieving this data.
Lets consider I have 1000 pages with each around 25 elements on each page that can be updated and stored in the database.
Alternative 1)
Create a table and 1 column for each element on these pages for example columns like:
title_1, title_2,image_1,image_2.
Here we have a set of columns that we can update, these we can use on the web page.
Alternative 2)
Create 1 table with the columns (id, namespace, page_id, data)
And for each element on the page I add the namespace in association with the page_id to make the data output unique. In the data I can add any kind of information; text, links etc.
What do you suggest as a good solution for this issue? I'm ofcourse also open for other alternatives.
Thanks!
I would recommend option two, with the addition of a column identifying the element id/or type, if indeed the element id is somehow comparable. That is to say, if anchor text (say) is always stored as element id = 4, then you might want an element id = 4 so that you could compare anchor texts across multiple documents.
If, on the other hand (and this is the scenario I imagine is more likely), you may have 1-25 elements on a page and each of them could be different (eg document one has three anchor texts and four images, document two has one anchor text and no images, etc) it would make sense to add an element_type_id table that stores a bit of information about the element types. This is assuming that you ever have any interest in comparing (say) images across multiple documents, or anchor texts across multiple documents, etc.
Another thing to consider: if you are likely to see the same element over and over again, it actually makes more sense to effectively parameterize those elements by way of a lookup table. So basically store each (say) unique anchor text in one table and reference its id in your actual data table.
If I may add one additional thing: SO may not be the best place for the particular question you are asking. I'm not totally sure of that and maybe I'm wrong... but I would poke around the Stack Exchange network and see if other forums more closely deal with the type of question you asking. In the very least, I'd observe that your question is fairly vague and the goal of achieving a "robust and flexible solution that also {has} good performance. In both getting/recieving this data." is not likely to be accomplished simply by asking for advice on SO. There is a LOT that goes into data architecture, and certainly many of the details I would consider important in designing this myself are not present in your questions. And if you're not sure what those details are, I am not sure if SO is really the best place to set about learning them. I think https://softwareengineering.stackexchange.com/ may be a better fit for this question.
Just my opinion, and I could be wrong. Either way, I would consider learning a bit about database normal forms (http://www.bkent.net/Doc/simple5.htm or Google it) as well as do a little research on the types of design considerations that go into building a database (an old but still good SO article on that is here: What are the most important considerations when designing a database?)
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I need to display post and related data in column-wise grid and certainly require table for those as aligning divs in single line, using floats is a time consuming thing!
Will appreciate your reviews on Do's and Don't for Tables in HTML5!
Simple rule - Use tables for tabular data, use other elements for presentation(designing layouts using css) like div, section, aside, nav etc . which provides meaning to the content they hold rather than using table for everything
The fact is, developers used tables in 90s for drafting their layouts, but now, new CSS3 spec is amazing, it gives you so much hold on designing layouts like Flex Box, column-count, behavior of the box model can be altered by using box-sizing property, responsive designs are getting better and better using #media queries, grids etc., which you cannot achieve with table element... and hence, table is only used for storing tabular data.
I've seen many developers having an impression that table should be completely ignored, and instead they use a whole lot of div with 100 lines of CSS, applying display: table; table-cell table-row properties just to get a single table straight.
So even in HTML5 it is COMPLETELY OK if you use tables for tabular data.
From W3 Org : (v4.01)
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.
From (HTML 5)
Tables should not be used as layout aids. Historically, many Web
authors have tables in HTML as a way to control their page layout
making it difficult to extract tabular data from such documents. In
particular, users of accessibility tools, like screen readers, are
likely to find it very difficult to navigate pages with tables used
for layout. If a table is to be used for layout it must be marked with
the attribute role="presentation" for a user agent to properly
represent the table to an assistive technology and to properly convey
the intent of the author to tools that wish to extract tabular data
from the document.
There are a variety of alternatives to using HTML tables for layout,
primarily using CSS positioning and the CSS table model. [CSS]
According to the specifications, <table> represents data with more than one dimension and "must not be used as layout aids."
If you need to display tabular data with more than one dimension, then you should definitely use a table. If you just need columns, don't. There are many CSS frameworks out there like bootstrap that can simplify the styles you need to build a grid.
Stackoverflow uses tables for questions/answers, I was told by many SO users that this was wrong and that questions and answers are not tabular data.
So now I ask, are forums tabular data? Most major forums (vbulletin) I believe all are using tables.
I am assuming this is considered tabular but I would like a second or more opinion?
I'm certainly no web wiz, but structurally I'd say forum posts with associated (possibly nested) comments are more like lists than they are like tables.
I think a good rule of thumb is whether or not it would make sense to present the content in question in a spreadsheet.
No. While many forums do use tables for their markup, it should be recognized that this is physical markup and not semantically correct markup.
Forum discussions, if anything, are nested lists (i.e. trees) so to be really correct they should be modelled as nested <ul> elements in tree discussions, or as <dl>s (definition lists, which basically associates several values (= answers) with one key (= question)) to reflect Stack Overflow’s question-answer form.
No. Tables are used wrong on both SO and those forums, that is to a certain extent.
As it stands css has certain limitations. For example you can't have two divs share the same height, or you may need to vertical align text that spans over several rows. Perhaps your design is both fluid and fixed in a holy grail kind of way. These forums have to implement all these, making it very difficult to ensure a constant cross browser experience.
So their reasoning doesn't have anything to do with semantics, but rather convenience.
SO and other forums for sure use a relational schema (which envolves tables) to store the data. As far as HTML and layout goes, i'm not sure. No Firebug here :P
Technically, the data is tabular if you can put a header on the columns, because each column of 'td' needs to be headed with a 'th' for it to really be semantically correct.
So if you can put a logical header on each of the columns, go for it!
I know it's told to use table for tabular data, but I see in many websites and CMS that they use div for showing database content, for example in admin area for editing them, shouldn't they use table for showing these data? What's the best way?
Use a table, since it's tabular data. Unordered, ordered, or dictionary lists should be used when you want to present data in a non-tabular fashion, like the list of questions on the front page of SO.
I will answer your question with another question :
Do you want your data to remain presentable if CSS are not available ?
Yes, definitively go for Tables
No, it's up to you, whichever makes you all warm and fuzzy inside ;-)
Typically you would use DIVs for page layout and TABLEs to display tabular data. In your question you ask about the admin areas for a CMS. If in the admin area they are displaying a grid that represents one or more tables in a database then yes it would probably be best displayed as a table.
However the distinction should be made based on how you are actually presenting the data. Just because the data started out as tabular data (in a database table) doesn't mean that it is inherintly tabular data. If you intend to display it in some other form then DIVs might be the better choice.
It completely depends on what type of data we are talking about. Unless you can give an example of the data, then you won't get a very good answer.
Edit: Per your comment, yes, use a table. If you're showing lists of things from a database then you should use a LIST. There is no golden rule -- the format you use should reflect the data coming from the database.
Table because it is data.
The best markup to use to present a piece of data is always that which is most semantically appropriate. This, of course, raises the question of exactly what is semantically appropriate. This is not a trivial question, and it depends entirely on the sort of data that you're presenting. If your data is tabular in nature, then you should definitely put it in a table. Most data is not tabular in nature, so it shouldn't go in a table.
The reason that using tables is discouraged is because they have historically been misused for non-semantic presentational purposes. Often, authors would place data that wasn't even remotely tabular in nature inside a table tag solely to get it to appear a certain way. This is poor practice, and one should instead create the desired appearance using CSS. This criticism, however, applies not to the use of tables in general, but merely to the use of tables for inappropriate content.
To address a couple of other things:
Don't worry about browsers without CSS. This isn't a problem in this day and age, unless you're using non-graphical browsers.
Search engines prefer semantic content. If tables are the proper semantics, then the search engines will prefer them.
Div is more widely supported by browsers, while table has some quirks and exceptions that make it cumbersome.
a div is more general purpose, you can do a lot with it, not just tables. take a close look at:
http://www.w3schools.com/tags/tag_DIV.asp
search engines more like div