Questions tagged [tables]

Tables are a means of organizing content into rows and columns, often – but not always – in a grid-based layout where columns and rows have distinct relationships.

Filter by
Sorted by
Tagged with
87
votes
11answers
29k views

How to display duration (HH:MM) so it isn't confused with clock time

I have a table in my application that shows dates along its x-axis, and different statuses along its y-axis. The table keeps track of how much time an employee spent in a given work status (on duty, ...
87
votes
8answers
20k views

To use or not to use “Zebra Stripes”, or Alternating Row Colors for Tables

Is there any research out there showing whether or not alternating the row colors for a table increases/impedes the time it takes to parse information? An example can be found at the following ...
73
votes
4answers
10k views

Is there a better way than zebra stripes

Currently we are working on a project that includes many datatables. Before deciding to use zebra stripes to make datatables easier to manage, I wanted to ask if you could advise a better solution ...
52
votes
4answers
10k views

When your page has no results, what do you show?

I am paginating a data table and have different views in my application where each view has its own rows. Some views may have data, some may not. Showing 1-0 of 0 Page 1 of 0 is what I am showing ...
47
votes
12answers
73k views

How should large table columns be handled on a responsive design?

Related to This Question, I'm interested in what I should do with a responsive design theme where the users have control over the columns which are displayed in a tabular, data rich page. Users are ...
38
votes
8answers
40k views

Responsive Design - How to deal with wide HTML Tables

I am doing a proof of concept with responsive design. One web page that I am modifying has some extremely wide tables. I really don't know how to shrink the tables width so there is no horizontal ...
33
votes
3answers
49k views

What is the best practice for data table cell content alignment

We are currently working on a windows based application where users capture data. Some data is captured in a table where other data is captured in text blocks. Im currently faced with the dilemma of ...
32
votes
4answers
34k views

What some alternative ways to present tabular data instead of the standard table in the UI?

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 ...
31
votes
9answers
9k views

How to avoid repetitive actions in table rows?

We have a table with data and actions on each row like so: Name Email Description Actions James james@gmail.com Desc 1 Edit Export ...
30
votes
10answers
4k views

How do you make it clear to the user when the data in a table is updating live (or not)?

We have a requirement to have a table of data update in real-time. New records will get added over time, as well as amendments on a cell by cell basis. However if a user changes the sort order, or ...
22
votes
4answers
3k views

Where should a newly added item go in table?

Admin tool. Table with thousands of items (users) sorted by name (from A to Z). The table has a pagination. Let's say you are on page #16 (out of 999). You are adding a new user. Where should the ...
21
votes
5answers
11k views

Table with actions per row

One of the pages in our web app includes a table that typically has a few dozen rows for each user, and it takes most of the page's width (5-8 columns). For each row, users can perform 3 possible ...
20
votes
8answers
4k views

How should “Select All” work in a “LOAD MORE” table?

We are building an enterprise which consists of tables with a lot of data. Our solution for the tables is to have an infinite scroll with a "Load More" button. There would be information of the ...
19
votes
3answers
21k views

Design patterns or strategies for complex or large table data in Mobile phones

I want to display a table with 4/5 columns and possibly 100 rows (as in desktop app right now) in smartphones. The table cells are also editable. Now we want to port this desktop app to smartphones (...
19
votes
5answers
4k views

How do you indicate that an item is not selectable?

I have a table where a user needs to select a row before being able to proceed, however I also have a case where some values need to be displayed but are not selectable. How would you got about this? ...
19
votes
4answers
14k views

Best UI approach to align the column titles of reports

I would like to know what the best approach is to align header columns according to their data type. I haven't found any Human Design Interface articles explaining this. Should the header column ...
18
votes
4answers
2k views

Is there a more legible way to present tabular data?

I have some tabular data I'm displaying to users. It's not a lot of data, but I'm wondering if there is a more legible way to display it? Right now the data looks like this: Is there a better way ...
18
votes
4answers
2k views

When should an 'archived' or deleted row disappear from a table?

Rather than show a confirmation dialogue when someone wants to archive a project (each row in the animation is a 'project'), I've decided to immediately archive, with the option to undo. My question ...
17
votes
6answers
3k views

How to show the user the possibility to sort a column with space problems

I am working with a big table with 20 columns and a lot of information. I know that the most common way to indicate that a column is sortable is by adding a little arrow at the right or left of the ...
16
votes
7answers
2k views

Research behind row height within a table?

There appears to be a trend in web-based table design to use a lot more space for each row in the table. In particular the new gmail default of "comfortable." I'm also seeing it in the height of the ...
16
votes
6answers
13k views

Best way to show many user actions for table rows?

I currently have a table which shows a row for each created form a user has. For some users this will only be 1 or 2 items. For others, they'll have 40-50. For every form there are many actions ...
16
votes
4answers
1k views

Making space for the “drop cue” in a drag-n-drop design

I'm developing a drag-and-drop reordering interface for books on shelves. (You can try it live if you're on the latest WebKit.) When you drag a book over a shelf, it accommodates space for it by ...
15
votes
7answers
8k views

How should the filter feature manifest itself in google material design tables

I've checked the material design documentation but there is no clear indicator that I can see to tell me what happens if I click on the . Here's the icon in situ. I want to know what the interface ...
14
votes
4answers
5k views

Multiple values in one cell in table

I have a table where there might be two values in one cell, what is the best practice to display this? With a comma or line break or something else? Unfortunately the values are quite long, and I ...
14
votes
7answers
1k views

How to make it obvious the contents of one table are based on the selected row of another?

Given a dialog with two grid-style tables, what's the best approach to visually showing that the selected row of the left table is what populates the right table? The best I can think of is an arrow ...
14
votes
5answers
39k views

Best way to represent null and empty data in an excel file

We have an application that allows users to design their own forms and export the data to excel. One problem is the representation of null or empty data. There are two scenarios that we need to ...
14
votes
6answers
865 views

Method of showing that a row has been edited and will be changed upon “Save”

What paradigms exist for denoting that a row of data has been modified and that a Save action on the view will change them in the data store? Which paradigms are recommended? A few that we've ...
13
votes
4answers
8k views

How should times be aligned in a column

I have a data grid of three columns of type [Time, Decimal, Decimal]. All records in the decimal columns have the same number of decimal places. I have right aligned these as they're numeric. But I ...
13
votes
4answers
2k views

What should happen when I add a Row to a paginated, sorted list

A user wants to add an item on a sorted and paginated List. If we keep the list sorted, the item might be on another page than we're viewing and if we just add it to the top of the list it will break ...
13
votes
5answers
4k views

In a grid, how to display long column headers

When displaying data in a grid (each row contains a record, each column a different record field), vertical space need is easily solved with scrolling or paging. We are usually sooner missing ...
13
votes
4answers
905 views

How would you solve the column of check boxes problem?

So my question is a bit open ended. Basically, I am looking for possible solutions to the problem of lots of tabular data with check boxes. For example, if we look at Facebook's Account Notifications ...
13
votes
5answers
4k views

Extra wide tables best practices

I have a table with large (25+) amount of columns in it. Right now it looks very complex and has a horizontal scroll. I want to make it more useful for the users. One solution is to group columns by ...
12
votes
7answers
4k views

What should the sequence be for Download and Delete buttons?

I have two icons for each row in a table: Delete and Download. But I feel the Download button should be before the Delete button. Please help me to understand what the sequence should be as per ...
12
votes
5answers
2k views

Zebra striping in dynamic table

Here's a hypothetical question partially inspired by a real scenario. Assume that you have a table with many rows of data. This table isn't static; rows can be dynamically altered, added and removed ...
12
votes
2answers
2k views

How to style table headers?

Default styling in popular CSS framework such as Bootstrap styles headers with title case and bold text. Question Is there any proof to sustains this choices as it makes the headers more salient ...
12
votes
7answers
3k views

Best empty string

What is best way to represent empty value inside table of rows with some optional columns? '', empty, N/A, -, -------- (number of allowed chars), any other advice?
12
votes
2answers
1k views

Should percent sign go into the header or the cells of a table

We've been debating this question with a client. In a table which displays percentages, should the percent sign % be displayed once in the header of the column Header (%) or in each of the cells 80 %. ...
12
votes
4answers
13k views

Table usability/Readable font for a data table

What's the best font for a data table? Monospace is good but takes up more room, so you can't have as much whitespace between the items. Similarly, what are some good usability principles for data ...
12
votes
6answers
3k views

Table Checkbox side best practices

When is it a best practice to allow for checkboxes to appear on the left/right and side of a table? A wireframe came across my desk looking similar to the wireframe below. The justification the team ...
12
votes
2answers
3k views

What is the best way to display edit/delete actions on a row?

I am building a web application that deals with a lot of tables/lists of records. I am currently building an "AJAX edit-in-place" feature, so that you can edit a record while being on the same page. ...
11
votes
11answers
1k views

Best practice for truncating similar titles in data grid?

I have the following table, where the names are truncated up to 14 characters, because there's no enough room for the table itself (in real world there are some more columns). download bmml source &...
11
votes
10answers
809 views

Is it better to represent simple labeled information as table or just text with subheadings?

I'm redesigning a website that has some simple information presented as a table like this: download bmml source – Wireframes created with Balsamiq Mockups I read yet the again the Label ...
11
votes
4answers
6k views

Tabular vs Card-based presentation, which is better for lots of data?

Basically, we have a long list of stuff that has, on its on, a lot of details. We are wondering whether to use a table or put each set in a rectangular card format. See below: On one hand, the table ...
11
votes
1answer
673 views

When to save data?

When should I save data in an business application? We have a lot of applications and currently they have not all the same behavior. I am not very experienced with UX and would like to know when I ...
10
votes
5answers
881 views

Zebra striping for body text?

The general consensus is that zebra striping a table makes it a little easier for people to keep track of which row they're on...but is this reduction of cognitive taxes only for table rows? I at ...
10
votes
9answers
1k views

How can I make the relationship between rows in two tables more obvious to the user?

I have a web page that at first showed a top level goal with a bunch of risks. here is an example mockup: I now realized that since I have a series of events, it would be good to break down and add ...
10
votes
5answers
667 views

Indicating sort direction without increasing horizontal space

I have a table that is very tight horizontally. Each column in the table is sortable by clicking the title of the header. As you can see, on most columns there is just not enough room for the ...
10
votes
5answers
3k views

How do I make a table row on a web page look clickable?

I have a simple web-based report presented as a table: Some rows are clickable, others are not (it can be seen with the third column. Greater than 0 means the row can be clicked and expanded in a ...
10
votes
8answers
2k views

What is the best way to indicate read-only cells within a table?

I have many tables, actually data grids, where most of the cells will be editable, but some may not depending on the users permissions. I am thinking of using light gray backgrounds on the read-only ...
10
votes
8answers
1k views

Alternative to color code in table cell

I am currently redesigning an LOB application that makes use of color coding in tables to 'categorize' each row of data. For instance, in the picture above, the 'St' column (which stands for 'Status')...