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

Question

在我的网络应用程序中，我有许多用户创建的事件实例。如果用户请求查看特定事件的详细信息，则显示为

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

那么，创建这个布局的正确方法是<table>如何做到这一点？或者我应该使用 css？我试着用 css 来做到这一点，但似乎在使用 float 时我把它弄得一团糟。

欢迎提出建议

Answer 1

我建议使用定义列表 <dl> -tag，因为这可以完美地用于键值对。为了让你的布局直接，你可以使用这个:

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;
}

<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>