5

I have an html table and there is one column that is much taller than the others and I am trying to get a recommendation if I should be vertically aligning the rest of the columns to the top or middle. For example, below the rest of the columns are vertically aligned middle (since its only the 2nd column that is forcing the row height.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Is there any evidence if this is better than having the table vertically aligned to top (versus middle)?

3 Answers 3

6

Keep the ability to see relationship across rows.

Especially lists of text items should be aligned to the left for users who read text from left to right and numbers should be aligned to the right.

Setting the vertical alignment to middle could be considered as a design trade-off that allows easier scanning of rows but if you frequently need to look up other columns you should use common used top alignment.

Personal statement is based on the following and further information from 'Human–Computer Interaction' by Alan Dix.

[In general, one has to balance between] good alignment for individual columns versus ability to see relationship across rows.

3
  • Welcome to the site, @Isger! Do you have any evidence to support middle alignment for skimming by row and top alignment for skimming by column? Jan 26, 2015 at 15:11
  • 1
    Hi @3nafish, the British university professor Alan Dix refers to alignment patterns and breaking them in his book ‚Human-Computer Interaction‘.
    – ITJ
    Jan 26, 2015 at 15:40
  • It would strengthen your answer if you edit it to include that source and the evidence that Dix gives. Otherwise, it reads as opinion. Jan 26, 2015 at 15:49
2

Consistency is key in presenting information to people. If you're aligned centre in any form, you move into a territory where different content could cause unknown boundaries at the extremes.

For example, in your picture, it's harder to move from the Name column to the Age column, as the starting reference is a different vertical position. Also, when comparing data vertically in the Name column, the difference between three and four lines of content provides another different starting point.

While not hard evidence, this website about table design provides before and after images of tweaked tables, explaining that the vertical alignment is changed.

1

I'd say that vertical centering in data tables should not be used. It is almost NEVER better. If you have short data in each cell that fits on one line, it basically makes no difference. If you have some data that is longer and thus wrapped, it is worse in a number of ways, and better in exactly 0 ways.

Issue 1: as you read across a table of data your eyes have to jump up and down. This is a violation of basic layout principles - minimize eye jerks as you scan left/right or up/down.

Issue 2: if the data gets REALLY large, you get to the point where you have to scroll up and down to see the beginning of the long data ... and you almost ALWAYS want to see the beginning of long table elements as opposed to seeing the exact middle of the table element.

Your Answer

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

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