Which html element is semantically most appropriate for displaying a group of emails?

Question

Hello. I have a group of emails (I hesitate to use the word list, as it may prejudice you answers), which I want to display in a tabular manner with columns of Subject, Content, Date, Action (whose value may contain a Delete button, for example).

Semantically speaking, would you use a list (<dl>, probably) or a <table> for this data? My gut feeling is that a list is most appropriate: I would describe the page as a list of emails after all - not a table of emails; furthermore, I would not put this data in a spreadsheet or perform any analysis on it. However, the fact that I want column headings makes me wonder if a <table> is more approprate.

I doubt that the design would ever be non-tabular; however, it is possible that certain columns may be restyled.

Answer 1

Don't worry about styling. You can use CSS to make a list look like a typical table, or a table look like a typical list. Aside from that, it's up to you. To me, especially as there are very few 'column'-like data pieces, a definition list seems more semantically and practically correct for this situation.

Answer 2

I’d go for the table. If it had just one column, I’d use the list, but—to me, at least—this is clearly tabular data, since all “rows” share the same “columns”.

(Thinking of it: if your example did not qualify for the use of a table, what else would?)

Answer 3

<table> all the way. You can put what you like in the <div> in the cell. Works for gmail (at least, for their basic html view).

Answer 4

I'm not sure one is better than the other, personally, I would use tables.

Answer 5

GMail uses a table. I wouldn't say they don't care about semantics.

Answer 6

You have an information that needs to be displayed in two dimensions (rows,columns), with each dimension describing something about the data (i.e. data number (row) and info (col)).

It sounds like a table to me, and also sounds like it would be better treated as such from an accessibility persective! Think of screen readers that may going to have to read the info.