以HTML格式显示表格数据 [英] Displaying tabular data in HTML

问题描述

我以前总是使用表格。但是，据我所知，在现代HTML设计中，表格的使用是一个不容忽视的问题。什么是一些好的和接受的方式来显示现代HTML中的表格数据？

我想这样做：

 
 First_Name Last_Name电话号码
 Britney Spears 555-555-5555 
 Jon Bon Jovi 444-444-4444 
 

我不完全清楚为什么我不应该为此使用表格。但我见过人们使用< li> ，他们使用CSS来表现更像< div> 's

使用HTML和CSS设置数据的好方法是什么？

解决方案

您的示例对spec的描述非常有效（重点是我的）：

表格元素代表一个表格;即超过一个
维度的数据。

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

使用表格数据的CSS是可能的，但它快速变得非常难以处理100％宽度，单元格高度相等，文本包装，溢出等。表格的布局和渲染模型针对这些场景进行了良好定义和优化，而 div 或 dl 或 ol 不是。

有不同的显示类型支持非表格式的非表格式布局，但目前还没有很好实现。

请参阅： http://www.quirksmode.org/css/display.html#table

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?

解决方案

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

这篇关于以HTML格式显示表格数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！