I've been browsing for about an hour now regarding what the best practice is for this and the majority of what I read is to use a table for tabular data and a list for lists, which makes sense. However, I'm confused about this type of UI:

So it has columns and rows but its a list of contacts . Can you give your thoughts on what should I use for this type of UI?
(Btw, there's nothing particular in this image, I'm not trying to create exactly this, just needed something to show what I mean)
A table is appropriate here, since you have semantically meaningful columns as well as rows. HTML tables will automatically handle column alignment (and also provide a <th> tag for the table header), and tables will preserve the column information even for users using screen readers, text-only browsers, etc. (which lists won't).
You would want to use lists for e.g. the sidebar, tags, or items in the "Edit Contact" dropdown.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With