Displaying tabular data in HTML

Question

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?

Answer 1

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

Answer 2

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.