Should I set maximum table width?

Question

My app has a page that contains a table with about 10 columns.

Should I limit the width of the table to some maximum to prevent too much whitespace inside the table rows, or is it a bad practice? If so - what will be a good maximum?

My concern here that when limiting the table width it looks strange compared to other elements on the page (for example the header) that have 100% width.

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

Edit: My app is a desktop-only app (tablets are ok, but no phones). Screen sizes are range from tablet / laptop size to big screens.

There is also a minimum screen width, so laptops with smaller screen get a horizontal scroller.

Answer 1

Yes, you should. The reasons are simple:

• Readability + Scannability: All that white spaces just makes a "data oasis" that makes no sense inside an information structure like a table. It would be difficult to visually match data between columns unless the table provides some design like the alternating color rows. The colors of the table shouldn't be necessary for good readability.
• More consistent UI between different devices and resolutions.
• Usability. For example: What if I want to copy some rows? I would not want to drag my mouse eternally!

For setting the "ideal" max width, you should take into account the resolution of your users to figure out what's the best size that fits everyone. Also a way to start is measure the max length of the text of every column and then add some padding just to avoid the "visual suffocation"

Answer 2

I am forever faced with this problem as I design back office applications. To support readability, I would recommend making tables as wide as they need to be and no bigger. The second table in your example is easier to read.

Answer 3

You can limit the whitespace on individual columns. You can also center the table so that it doesn't appear "strange."

You are correct in identifying that this table doesn't work visually. There are a lot of solutions to this problem.

To answer your question would require more information. What screen sizes do people use to look at your app? You could do a responsive site that shows 100% on say a phone but centers the table on a desktop.

EDIT:

Too much white space often dramatically reduces the ability to scan through the data. Line-width standards (57-70 characters) do not apply in the same way to tables but the principle of helping the reader focus on the correct characters does.

If you cannot reduce the column width and center the table then how about reducing the table size to what you think is appropriate and place something to the right of the table to help balance the page.