Dealing with non-fluid data tables



  • 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:

    enter image description here

    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:

    enter image description here

    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.

    Don't worry about blank spaces

    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:

    page 1

    This is the structural scheme on page 2:

    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:

    Use a structural design

    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:

    structure

    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:

    • Take the objects to place as something secondary (at least in this first step)
    • Find repetitive matching distances
    • Try to make equal partitions: 1/2, 1/3, 1/4, etc.
    • Constantly look for central axes, mainly vertical.

    Graphic resources

    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:

    Swiss

    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.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2