Hi there,
I am creating some pricing/data tables, but not sure how the content in each cell (borders to be possibly added), should be aligned. For example at the top of the heading of the first cell to the left, or in the middle of the heading and sub heading on the left.
This is an example of what I mean:
any ideas or suggestions would be great, thanks!
Typically monetary data in a table will be aligned right, or rather aligned down the decimal point. But assuming all prices are to either two or zero decimal places, right alignment should work.
This alignment gives the clearest comparison between prices/values.
Aesthetically it looks like you are wanting more white-space between columns, but right alignment may bring it too close to the following cell.
You could fix this with padding-right, but it may be tricky as a fixed amount will keep prices aligned, but may not be very responsive. A relative value (like %) may lose the alignment between rows.
Using table-layout: fixed will let you use % for padding-right while keeping prices aligned between rows, though it can still break at very narrow screen widths when space runs out. If that’s the case you could use a query to remove excess padding for small screens.
Thanks for the reply. That makes sense. A lot of the data will not be monetary values, but either a number, yes/no or short description. The previous image was just an image so no HTML/CSS at this stage until I get it right.
I now have this dilemma with this data in the second table.
Do I align the ticks/crosses centred horizontally and vertically like the top row or middle like the second row. Then if I have a short description that is needed with a tick/cross, should this be aligned under the tick/cross so the tick/cross is in line with the other ones, or should it be the “content (icon and text)” that is centred?- if the latter, the icons wouldn’t line up which may look odd?
Then should the other text “unlimited” which isn’t a description in the middle row be the same same size as the first row?
Hope all that makes sense!
Where did the “1” go? (If they’ve all got text under them, they’d all align vertically naturally)
I’m not usually a fan of putting checks in all the columns, it hides that there’s a significant difference.
The 1 was an example of numbers in the cells and the second was an example of ticks/crosses as well as text/numbers.
I’d still avoid having checks in every column if you’re going to say they’re different. Just an unnecessary interruption to the logic of looking at the table.
I’m not sure what difference you’re trying to highlight between the first and second rows of the table though. It… really wouldnt matter which you used, as long as the symbols are consistent (at least within the row, if not the whole table)
