User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I have pages consisting of mainly data tables. So far I'm using a fluid design with Bootstrap's rows/cols. Here is an example:
As you can see at the bottom of the page, table 1 has very wide columns compared to their content, and I was told to change that. But of course if I remove width=100% I get plenty of white space after the table which I don't like either:
Is there some trick to solve this situation?
Well, too many things to explain, I hope I don't go on too long and make everything understandable.
First of all, don't worry about blank spaces, rather worry about poor distribution. According to the explanation, it's a very technical website, whose content depends on data. If this data is not enough to occupy the entire graphic area of the page, instead of fighting to eliminate the resulting empty spaces, the solution is to find a way to make these spaces as balanced as possible.
This is the structural scheme on page 1:
This is the structural scheme on page 2:
In the two images, it is clearly seen that the blank spaces are totally unbalanced: margins, gutters, distances, etc. How to solve it:
The problem with most web designers is they think of graphic elements above the structural axes on which they are supported. It's like designing a car from the lights, doors, and windshield without thinking about the car body. The title, the buttons, the text, the menu, the dropdowns, the tables, etc, all of these are compositive elements. It's very important to establish a support where to place them. If this support is well structured, no white space will be out of place:
If the design is well structured, the empty "hole" will become part of the design instead of being seen as an error or absence.
Some tricks:
There are several graphic resources to solve the wide empty spaces, it depends on the design and the objective. I only cite one example of those who have been able to take great advantage of blanks and from which several ideas can be drawn: Swiss editorial design
There are more empty space problems on this page than in the two images in the question:
However, the balance is given by a clear structuring, the compensation of visual weights, and some graphic resource, such as the lines that delimit the composition areas, even though these later do not carry any element.
If you are looking for something more aesthetically pleasing without such a long table, you could make the lower table match the width of the top table. The easiest way to do this would probably be to add a bootstrap column for the lower table with the same settings as the upper table. Note that you don't need to use up the entire 12 possible spaces in a bootstrap grid.
