How to do HTML layout for rows of complex records?

Question

I want to display a list of complex records and trying to simply fit it into a table doesn't seem to be working very well.

I'd like a layout that goes something like this:

Each whole record could be put into a table cell (one cell per row), and then I could use <div> tags within each cell. Is putting divs into table cells likely to cause display problems? It could be simply done with divs anyway, so perhaps that's a bad idea.

Within each record, there are quite a number of components. If I lay these out with divs, what do I need to do to ensure each label/value pair is in the right position? Or is there some better way to ensure a consistent layout?

Obviously the values for each record will be different so to maintain a consistent look I would need the labels to all line up vertically.

If the question seems a bit vague, then it's because my understanding of how to do it is vague... even some help clarifying the question would be great!

Answer 1

If you are looking at HTML 5, the article tag might fit here. The fact that you have an "Author Element" seems to make it a good fit. If you are not looking at HTML 5 just use a div instead of article. Or as @Moin Zaman mentioned use ul and use li in place of article in my example below.

As for ensuring your labels etc line up vertically this is fairly easy to achieve. Just explicitly set the widths via css.

Here is a quick example:

HTML

<article>
    <h2>ID: 123</h2>
    <div class="actions">
        <input type="button" value="Do Someting" />  
        <input type="button" value="Do Someting Else" />  
        <input type="button" value="And Maybe something Else" />  
    </div>
    <div class="description">A fairly long description that takes up basically the entire width of the section, maybe even longer still</div>
    <div class="details">
        <div class="author"><span>Author:</span>Douglas Adams</div>
        <div class="created"><span>Created:</span>1 Jan 2012</div>
        <div class="label first"><span>Label 1:</span>Value</div>
        <div class="label"><span>Label 2:</span>Value</div>
        <div class="label"><span>Label 3:</span>Value</div>
        <div style="clear:both; line-height:0px;">&nbsp;</div><!-- Use A Clear Fix Instead of this, I got Lazy!! -->
    </div>
</article>

CSS

article
{
    border: solid 2px black;
    margin:20px;
    padding:5px;
    position:relative;
}

article h2
{
    background:#FFF;
    padding:5px 8px;
    position:relative;
    top:-15px;
    left:5px;
    display:inline;
}

article .actions
{
    float:right;
    width:25%;
    text-align:right;    
    position:relative;
}

article .actions input
{
    display:block;
    float:right;
    clear:both;
}

article .details
{
    position:releative;
    width:70%;
}

.author
{
    float:left;
    width:60%;
}

.created
{
    float:left;
    width:40%
}

.label
{
    float:left;
    width:30%;    
}    


.label span, .author span, .created span
{
    font-weight:bold;
    padding-right:3px;
}

See this fiddle

Note: Use a clear fix instead of having the clearing div.