g_b
g_b

Reputation: 12438

Confused with what to use - List vs Table

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:

enter image description here

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)

Upvotes: 4

Views: 4520

Answers (1)

Ollin Boer Bohan
Ollin Boer Bohan

Reputation: 2401

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.

Upvotes: 5

Related Questions