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.

learn more… | top users | synonyms (1)

65
votes
7answers
7k 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 ...
50
votes
4answers
6k 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 ...
17
votes
11answers
8k 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 ...
17
votes
4answers
9k 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 ...
16
votes
4answers
986 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 ...
15
votes
6answers
1k 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 ...
13
votes
4answers
641 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
4answers
971 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 ...
12
votes
7answers
676 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 ...
12
votes
7answers
632 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 ...
12
votes
8answers
960 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 ...
11
votes
6answers
433 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 ...
10
votes
1answer
391 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
4answers
5k 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 ...
10
votes
4answers
314 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 ...
9
votes
10answers
434 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 ...
9
votes
3answers
6k views

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 ...
9
votes
4answers
469 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 ...
9
votes
6answers
2k 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 ...
9
votes
2answers
1k 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. ...
9
votes
4answers
356 views

Is moving columns in a tree table automatically bad for UX?

I have a tree table that allows the user to group columns arbitrarily. Is it bad UX for me to move the grouped by columns to the front of the table right next to the tree controls? Would it be more ...
8
votes
5answers
452 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 ...
8
votes
5answers
663 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 ...
8
votes
4answers
796 views

How to correctly encode a leaderboard with a gap in HTML

I want to display a leaderboard like so: 1 - John 232342 2 - Mary 45234 3 - Luke 234 59 - You 45 It's an ordered list but I can't make an ordered list that jumps from 3 to an arbitrary ...
8
votes
4answers
2k 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 ...
8
votes
3answers
4k views

Best way to display more table columns than I have room for? [duplicate]

The web development office I work for is working on a fixed-width web site. On one page, we have a table inside of the fixed 960px space available. So far, this table has worked out great for us, but ...
8
votes
4answers
1k views

How to present heavy data tables on smartphones?

Problem: I've got a table with 10 columns and ~100 rows. What is the best way to present these on small screens? My idea: effective search + data displayed row-by-row. Is there any better solution?
8
votes
3answers
1k views

tables with lots of columns

I have a table that lists various attributes of an individuals personal development plan; objective, time to complete objective, comments etc. The table is editable so the user can directly add ...
8
votes
3answers
2k views

Best UI approach to align the column titles of reports

I would like to know what are the best approach to align header columns according with the data type. I haven't found any Human Design Interface article explaining this. Do the header column must ...
8
votes
3answers
175 views

How to load data into a table based on the selection in a tree?

We are developing a web application that has a screen with two parts. On the left side we have a tree where the user can check or uncheck specific items, even leaves or nodes in the tree. If we select ...
8
votes
3answers
718 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 ...
7
votes
5answers
323 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 ...
7
votes
3answers
907 views

exclusive select in a table: radio button, rowclick, text only, text and icon, or icon?

If you have a table where each row can be selected, and you are only allowed to select one row at a time, and selecting a row causes a drill-down table to appear to the side, how would you render ...
7
votes
2answers
587 views

Too many checkboxes in a table?

A user should be able to change the settings for 5 different options for each day of the week at the same time. I was thinking of something like this, but it seems a bit messy... Too many things ...
7
votes
4answers
905 views

Keyboard shortcut to sort columns in a table?

Clicking on column headers in a table to set the sort order (or toggle ascending/descending if already sorting by this column) is a standard UI technique. However, it is mouse-only. Is there a ...
7
votes
3answers
574 views

Showing extra information for a table row when that row's selected

In the app I'm developing, we have a table/list that makes use of a kind of master/details approach; when you select a row in the main table, a second table below it is populated with 'child' items. ...
7
votes
2answers
380 views

When is a table the proper way to present data?

UPDATE: added mockups We are in the process of designing a web application interface for administering an online store. In such an interface there are pages for managing products, orders, customers, ...
7
votes
2answers
803 views

What do UX guidelines say about dropdown boxes in table cells?

download bmml source – Wireframes created with Balsamiq Mockups I have been trying to look at Apple Interface Guidelines and Windows UX guidelines about what standard behavior for drop ...
7
votes
1answer
893 views

Reporting web app - how to design large data tables?

I'm working on a legacy webapp that's mainly focused on reporting large amounts of data - ie tables with 20+ columns reporting financial data. The main problem is table layout inconsistency depending ...
6
votes
7answers
577 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?
6
votes
3answers
3k views

Examples of nice looking html tables [closed]

All tables on my app look like sh*t, it's making me lose hair, I've been trying to make them look better but I end up making them look worse, do you have any examples of nice looking tables? ...
6
votes
8answers
357 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 ...
6
votes
4answers
871 views

Best way to show long list of detailed information for summarized items in a table?

I'm working on an application page for an insurance company regarding purchasing policies and showing all the detailed information that comes with the policy. The problem I'm facing is knowing how ...
6
votes
5answers
784 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 ...
6
votes
4answers
251 views

How can I avoid placing a legend on top of the table to tell the user what each icon means?

You can see an example here: As you can see, I am stuck with having to tell the user what each icon means. I also mention what a functionality does, such as "Click on a feature to filter out ...
6
votes
2answers
2k views

Column header alignment

What is the best practice to have a column header alignment, should it be left or center aligned? On click of the column header the columns can be also sorted. Numeric values will be right aligned by ...
6
votes
2answers
216 views

How to indicate selected item in table?

I have a table of related items. Let's call them orders. Users can select an item from the table and full details will be displayed in a separate section below the table. I move the currently selected ...
6
votes
2answers
230 views

Should table rows be numbered?

I've created a a form that generate a list of results in a table. I'd to know if it's interesting to number each row of table, the default number of row is 20. there is a pagination too. 20 results ...
6
votes
2answers
850 views

Best way to do 'bulk edits' on a table

I am building a web application for managing a list of products (using jqgrid). I need my users to be able to perform several 'bulk actions' on whichever products they select. I have copied Gmail ...
6
votes
3answers
2k views

Filtering through a large table of data, thoughts?

Example: I have a large amount of data, such as a library of blog posts, or a massive amount of contacts, I am thinking that a data table visually would be the best way to display all this data, it is ...