How could a webpage containing multiple tables be displayed effectively?

Question

I am designing a user management tool where users will be made up of several groups.

Each group has its own table, but the table headings need to be sticky.

Example of a table with a sticky header

There could potentially be a situation where there are multiple tables on the webpage, each with its own sticky heading.

Is there a better way to display the groups of users? Should sticky tables be used - if yes, how can these effectively be displayed if there are multiple tables at any one time on the same page. Can this be solved by tabbing each table separately?

Answer 1

Using a reasonable fixed table height would be better than floating sticky headers (too distracting)

Answer 2

I am assuming from your description that 'sticky' headings in this sense is analogous to 'frozen' headings - I'm not sure how this could work otherwise (i.e. if the headings are 'pinned' to the top of a web page - given that you are going to have multiple tables - having multiple table headings pinned in place could get messy).

So to answer your question whether or not sticky table headers should be used for multiple tables on the same web page - it's best to avoid that approach.

If you want a good example of how you could do this, have a look at TSN's NHL Standings Tables.

In this example, you have frozen headers, frozen columns, tabs to switch between tables, multiple stacked tables - and it's RWD (Responsive Web Design - the UI, using one design, will adapt neatly to phones, tablets and larger screens).

Also note the 'left-right' scrolling of the table is done by either tapping or clicking on the side of the table you want to scroll to.

All-in-all, this is the best example of UI/UX I've seen that's RWD and can handle multiple tables on the same web page, with frozen headers and columns, and will give you great flexibility.

Hope that helps!

Answer 3

Answer seems to be highly dependant on the layout chosen, as per the sketch.

Rather than add sticky headers to an existing design, you may want to redesign layout to support them.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 4

If all tables are related to "users" and the only difference between the different data sets is the user group then your suggested solution of accessing each group table via dedicated tab will work.

You can also further improve overall layout and provide more structure to the data set by using a list. This provides a more scalable solution and adds clarity. Below are two alternative options to a table view. option 1 discloses information in a more progressive manner while option 2 provides all the information upfront.