32

What some alternative ways to present tabular data instead of the standard table in the UI? I don't want the data to be displayed in formal tables with rows and columns. Is there any way of grouping them all and show it attractive and nice?

  • 5
    Why don't you want to use a table? Is it not tabular data? – Matt Obee Feb 16 '15 at 9:45
  • It is a tabular data.. but my organization dont want that is my application.. they feel it looks old fashioned – Hemalatha Feb 16 '15 at 9:47
  • 2
    Best alternatives to 2-Dimensional tabular data is Charts, which is better visually than text based tables. Some good visualization libraries are:- d3js.org highcharts.com/demo Using charts makes find trends, telling story visually easy. – Chetan Feb 16 '15 at 10:21
  • 11
    Maybe they should think about readability and usability before sacrificing it for something novelty. – Wander Feb 16 '15 at 13:09
  • 1
    Tables should be the default for presenting tabular data, but there are definitely times when a table isn't ideal--namely if the site is to be responsive and mobile-friendly. Formatted lists are but one alternative that may make more sense. – DA01 Feb 16 '15 at 20:31
43

If the data is tabular, then I see no reason why one shouldn't go with tables? After all, the whole purpose of table element is for showing such type of data.

But if your query is how to make the tabular data look more beautiful, then read this article - http://darkhorseanalytics.com/blog/clear-off-the-table/

In nutshell, it follows the principle of 'Less is more' by removing colors, removing grid lines, aligning items based their types (Numbers or String) etc.

Also another method would be to use graphical elements like Pie Charts, graph bars etc.

Note: Tables are not old-fashioned. But using tables for layout of elements is.

  • 4
    Great article. That blog is full of useful advice. Thanks! – Wander Feb 16 '15 at 15:15
  • 3
    Welcome. I just wanted to make a point that 'Tables are not bad' but it depends on how you use it. – Jigar Feb 17 '15 at 9:13
  • Everything has it's place. It's up to us as interface designers to educate people that you should be using the appropriate patterns for tasks as opposed to shoehorning in a widget for novelty purposes. – Wander Feb 17 '15 at 10:44
8

Have you considered using cards to display your data? They're becoming very common with Google's Material Design and can be quite appealing to the eye if styled correctly.

Ofcourse placing too much detail in a Card is "against the rules" but it is a viable alternative.

For convenience, you can always provide a button which changes the view to display the data in a table.

1

Another useful article which backs up what most of the others have mentioned before but in a little more detail is this: https://design-nation.icons8.com/intro-to-data-tables-design-349f55861803

It provides you with a wider variety of examples for specific cases.

0

I can't be certain, but it sounds to me like the question concerns displaying borders around the data, since the user wishes to continue to display data in tabular form. If that is the case, use a table without adding borders.

If you need to dress it up, use your own CSS or a CSS framework.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.