Horizontal and vertical alignment of headers in property tables

Question

We have a Web application with a right sidebar which shows a lot of vertically stacked cards with details (aka properties) of the main active entity. Each card contains a property table, where each row has 2 columns, a label/header and a value, which itself can be of different types (numbers, short text, long text, "chips", lists, even tables). We have differences of opinion about the horizontal and vertical alignment of the labels/headers:

Option 1 (horizontal: right, vertical: middle)

Option 2 (horizontal: left, vertical: middle)

Option 3 (horizontal: left, vertical: top)

Option 4 (horizontal: right, vertical: top)

We have read of course plenty of articles about header alignment in tables, but in all of these articles the headers are on top, not on the left, and there are multiple columns. Here we only have 2 columns and the header is on the left.

Do the general rules on table header alignment apply here, or is this a special case?

Answer 1

Option three is the right one, although the most relevant problem is not the alignment of the label but the relationship with the content between cells:

The different distance in the horizontal alignment between the texts of the labels and the text of the following cell generates a great imbalance.

Ideally:

• The label and text should be aligned to the top
• All cells have the same generous generic top margin
• Decrease the top margin of cells containing chips until the text baselines match

Edit after the comment

There is something called visual perception, which could be summed up in everything we see, but also in what we do not see but affects the formal set.

In your schemes, you are proposing dispositions of elements in a virtual structure. From all the options, the one that incorporates the fewest elements is the one with the best perception.

A simple exercise is to visualize and study these axes and their directions:

Personally, I think the one that incorporates central alignments is the most controversial. This does not mean that it should not be used, but balancing what is the most important between design and content, in this particular case my decision would be the content.