which should I use for displaying details of an event -css or table

Question

In my web app,I have many instances of Event created by a user.If the user requests to view the details of a specific event ,it is shown as

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

So,which is the correct way to create this layout.Is <table> the way to do this?Or should I use css? I tried to do this with css ,but it seems I am getting it all messed up when float is used.

Any suggestions welcome

Answer 1

I would use a DL (definition list) here. Something like this:

HTML

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

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

Although you could certainly make the case that a table is appropriate as well.