我应该用哪个来显示事件的详细信息-css或表格

在我的web应用程序中，我有许多由用户创建的事件实例。如果用户请求查看特定事件的详细信息，则会显示为我应该用哪个来显示事件的详细信息-css或表格

Created By  : damon 
Name   : myhomework 
Creation date : 24 October, 2012 
Duraion   : 2 hours ,40 minutes 
Status   : PENDING 
Perc.completion : 40% (piechart image)

所以，这是创建这个正确的方法layout.Is <table>做到这一点的呢？或者我应该使用CSS？我试图用CSS来做到这一点，但似乎我使用float时会搞砸了。

任何建议，欢迎

来源

2012-10-23 damon

CSS显然可以做到这一点，但HTML'table'元素也可能工作。你在问什么？ – thatidiotguy

键/值对的列表当然有资格作为表格数据，所以一个表是适当的。 – cimmanon

我会在这里使用DL（定义列表）。事情是这样的：

HTML

<dl> 
    <dt>Created By:</dt> 
    <dd>damon</dd> 

    <dt>Name:</dt> 
    <dd>myhomework</dd> 

    <dt>Creation date:</dt> 
    <dd>24 October, 2012</dd> 

    <dt>Duraion:</dt> 
    <dd>2 hours ,40 minutes</dd> 

    <dt>Status:</dt> 
    <dd>PENDING</dd> 

    <dt>Perc.completion:</dt> 
    <dd>40% (piechart image)</dd> 
</dl>

CSS

dt { clear:left; float:left; width:8em; } 
dd { float:left; }

虽然你可以肯定会让一个表是合适的，以及这种情况。

来源

2012-10-23 16:45:43

我建议使用一个定义列表<dl> - 标签，因为这可以为完美键值成对使用。为了让您的布局直，你可以这样做：

CSS

dl { 
    width:   400px; 
} 

dt { 
    display:  inline-block; 
    width:   100px; 
    margin:   0; 
    padding:  0; 
} 


dd { 
    display:  inline-block; 
    width:   290px; 
    margin:   0; 
    padding:  0; 
} 

dd:before { 
    content:  ':'; 
    padding:  0 10px 0 0; 
}

HTML

<dl> 
    <dt>Item 1</dt> 
    <dd>Text 1</dd> 

    <dt>Item 2</dt> 
    <dd>Text 2</dd> 

    <dt>Item 3</dt> 
    <dd>Text 3</dd> 
</dl>

演示

Try before buy

来源

2012-10-23 16:45:31 insertusernamehere

我应该用哪个来显示事件的详细信息-css或表格

回答

相关问题