I am looking for a way to display the information below on a web page. I am after a good looking way. Currently I present this information on one horizontal section of a single web page. I have considered using tabs, but still the individual 'table' that would be inside the tab still would look ugly to me. It is possible to adjust the column widths and heights, but the number of rows in each table is not under my control. It is also possible to remove the "duties" sub-table, and have it shown in a different place or as a chart, however, with all of these tiny changes, the looks would still be bad!

Also, using a tab widget would leave a lot of White spaces on the both sides.

One more thing I thought of is switch the rows and the columns of each table, so that each of the 3 tables would only have 2 wide rows. I don't think this would look good and also, if I had to add more entries in a table, there would be a problem.

Any suggestion/reference or example could help. Thanks.

Note: The data is fake.

enter image description here

  • 1
    Did you ask your users how they will read this data? Maybe what is ugly for you from design point of view is extremly usable for users? If thay need all data at one page viewable do you think that filed labels should be in bold but not field values?
    – Serg
    Mar 14, 2019 at 16:07
  • @Serg Good points. In my case, this is a personal project. It is not a must to have all the data in one place. However, having that tables appear individually would leave large space on either sides. You are correct about boding the contents instead of the labels.
    – NoChance
    Mar 14, 2019 at 17:45

1 Answer 1


Use Accordion, which is specially for user control how much contents he want or need to see.

Accordion example

Image source - this blog

  • Yes, this is a good idea. It is very similar to using tabs. Any suggestions for how to present each table's data (the many attributes)? Thanks.
    – NoChance
    Mar 15, 2019 at 18:24
  • @NoChance Although this is similar to tabs but it has great difference - if you expand all parts of accordion you can see a whole form with all fields. Don't forget that you can arbitrarily expand or collapse every part thus user is able to display exactly what he need. Tabs can't provide this functionality.
    – Serg
    Mar 18, 2019 at 9:52
  • Thank you for the explanation. Accordion is good when using long list of items such as FAQ. Microsoft uses this technique a lot.
    – NoChance
    Mar 20, 2019 at 7:58
  • @NoChance As you can see image in my answer depicts accordion using in form. So this is possible too.
    – Serg
    Mar 20, 2019 at 8:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.