5

I used to always use tables. However, I've been told that the use of tables are a big no-no in modern HTML design. What are some good and "accepted" ways to display tabular data in modern HTML?

I would like to do something like this:

First_Name   Last_Name    Phone Number
Britney      Spears       555-555-5555
Jon          Bon Jovi     444-444-4444

I'm not 100% clear on why I should not use a table for this. But I've seen people use <li>'s that they use CSS to make behave more like <div>'s

What is a good way to set up data like this using HTML and CSS?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Chris Dutrow
  • 48,402
  • 65
  • 188
  • 258
  • Did you use search functionality? http://stackoverflow.com/questions/83073/div-vs-table http://stackoverflow.com/questions/61250/divs-vs-tables-or-css-vs-being-stupid http://stackoverflow.com/questions/339210/yet-another-divs-vs-tables-question-forms – Mauno Vähä Aug 20 '12 at 15:50
  • 1
    @MaunoV. I don't think those links could be helpful for OP's question as his question was related to the presentation of tabular data. – Denys Séguret Aug 20 '12 at 15:53
  • hmm. good point, I just felt that we are getting close to "table-overflow" because of similar questions! ;) But hopefully they serve as quick links to someone else. – Mauno Vähä Aug 20 '12 at 15:58

3 Answers3

6

You should use a table for this.

Its tabular data, so it belongs in a HTML table.

Tables have a bad reputation because of the overuse of them for layout. But they are not evil, and a perfectly acceptable element to use when displaying a table of data on a web page.

Curtis
  • 101,612
  • 66
  • 270
  • 352
6

Your example is a perfectly valid use for tables as described by the spec (emphasis mine):

The table element represents a table; that is, data with more than one dimension.

http://www.w3.org/TR/html-markup/table.html
http://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#examples

Using CSS for tabular data is possible, but it quickly becomes prohibitively difficult to deal with 100% width, equal height of cells, text wrapping, overflow, etc. The layout and rendering models for tables are well-defined and optimized for these scenarios, whereas a div or a dl or ol is not.

There are different display types which support more table-like layouts on non-table elements, but these aren't well implemented at the moment.

See: http://www.quirksmode.org/css/display.html#table

Tim M.
  • 53,671
  • 14
  • 120
  • 163
  • The HTML5 draft is not a specification (in any normal meaning of the word), and it has some odd definitions. The applicable specification is HTML 4.01, and it says: “The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.” It does not even include a requirement on more than one dimension; a one-row table and a one-column table are possible, too, though somewhat reduced cases. – Jukka K. Korpela Aug 20 '12 at 16:17
  • 1
    We may be debating semantics, but despite draft or recommendation status engineers are developing to these guidelines and so are browser manufacturers. If we were discussing some esoteric new concept then I might agree, but describing tabular data as being dimensional seems logical. Even a single row or single cell (or both) table still often has implicit dimensionality, and if it doesn't, it probably shouldn't be a table. – Tim M. Aug 20 '12 at 16:37
4

For tabular data, use the table element ! That's its purpose, and it's still here (see the HTML5 norm) and recommended.

Simply don't use tables to layout your screen when you can do it with CSS (a little more than 99% of all cases).

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758