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.
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.
Recently I asked a question here and one of the answer suggests to use display: table and display: table-cell css properties.
Generally UI designers recommend not to use tables for layout. What if I use these two css properties extesively while layout? Is it the same as using tables for layout?
No. HTML tables indicate that their contents are tabular data. This information is exposed to the Accessibility API and so accessibility tools like screen readers can tell their users what to expect in the information following. Note that cell headers may be read out multiple times so that the AT user can orientate themselves while following the data.
CSS tables do not behave like that. They are just layout instructions. The information about the data that the AT user gets will reflect the semantics of the HTML, not the CSS layout.
The display table let the element behave like a element without using a HTML table element, so probably you will have more flexibility on your development. So you will have the benefits of a table and the flexibility of development without table, becase tables are always difficult and and hard to work
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.
This question already has answers here:
Why not use tables for layout in HTML? [closed]
(66 answers)
Closed 5 years ago.
What is the best practice when building our web page div or table?
Someone says the div is recommended, but I found it is not easy to control the size and alignment with div.
What is your opinion?
It depends entirely on what you're wanting to display:
<DIV> and <SPAN> is for page layout
<Table> is for displaying tabular data (such as data points etc)
The days of using <table> for whole page layouts is gone - and you should be discouraged for using them for this reason.
HTML tags are meant to be semantic. This means describing the data it contains - not how to display it (this is for stylesheets to handle)
There's nothing fundamentally wrong with TABLE - it's just that it was historically overused for the wrong thing. In general, try to use TABLE for true tables of data, use DIV and SPAN for logical block or inline containers of content.
Tables should only be used to display data in a tabular way. For layout and design it is best practise to use divs and stylesheets.
Controlling the divs using stylesheets can take a while if you're not used to it, but it's quite easy to pick up.
You'll be thankful you did it later when the client wants the whole site redesigned and it means you don't have to undo the entire page in order to make the required changes.
First read this: http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/
In my opinion (which I'm sure some people will groan about subjective questions being asked on Stack Overflow), but I prefer using div's. A div tag is one tag, a table takes many tags to create a correctly marked-up table element.
A lot of websites in the 1990s were built with tables, but the thinking nowadays in to use divs.
I would say that div is definitely the industry standard for website layouts. They can be quite cumbersome to work with at first but once you get your head around how they are positioned then you will never look at tables again.
Try this tutorial for moving from tables to divs. http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
Why not use tables for layout in HTML?
Just wondering, I thought I have read before that it is bad to use tables, so my question is, is it still acceptable to use tables in development?
If you're presenting tabular data, it's fine to use tables. If you're doing layout, it's usually easier and lighter to use a few divs (and use a CSS framework like YUI or Blueprint) to do your work.
Yes. Tables are very good (even preferred) for tabular data.
For layout alone, there are newer and better options such as CSS Grid.
Tables work best for tabular data - if you are showing results of some query, like a list of customers or transactions or currency values, go ahead, you should be using tables.
What is bad is using tables for layout where the logical orger is not left-to-right i.e. if you have a navigation pane on the left, do you want to read the navigation before the content? probably not...
However if you have a form with labels and input fields do you want to read the label before the input control, yes, you probably do.
The reason for this is that screen readers and similar assistive technologies force this order on their users. also it is usually much harder to read the resultant HTML when you use tables for layout
If you have a lot of tabular data, it makes sense to use tables.
Example: Suppose, you want to display a list of baseball players and their batting averages.
Use it for tabular data, but not for creating page layout.