我應該用哪個來顯示事件的詳細信息-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或表格

回答

相關問題