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:

mockup

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!

score 2 · Answer 1 · answered Jun 11 '12 at 23:41

Using divs in table cells is fine. Shouldn't cause issues.

Although looking at your mockup, semantically I would say its not a table. No columns, column headings etc.

It looks more like a list of items with more details in them.

I'd use a ul with li's and divs inside to lay things out further.

Also if you need the ID sitting exactly like that you could use a legend element inside each li.

score 1 · Accepted Answer · edited May 23 '17 at 12:06

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.

score 1 · Answer 3 · answered Jun 12 '12 at 04:53

How about something like this.

HTML

<div>
    <span class="label">ID 345</span>
<table>
<tr>
    <td class="desc" colspan="3">A fairly long description that takes up basically the entire width of the section, maybe even longer still</td>
    <td rowspan="3" class="doStuff">Do Something<br />Do another thing<br />Maybe 1 more thing</td>
</tr>
<tr>
    <td class="author"colspan="2"><span>Author: </span>Joe Bloggs</td>
    <td class="created"><span>Created: </span>19th June 2012</td>
</tr>
<tr>
    <td class="label3"><span>Label 3: </span>Value</td>
    <td class="label4"><span>Label 4: </span>Value</td>
    <td class="label5"><span>Label 5: </span>Value</td>
</tr>
</table>
</div>

CSS

div{
    margin:17px 10px;
    border:2px solid #000;
}
span.label{
    background:#FFF;
    padding:5px 8px;
    position:relative;
    top:-10px;
    left:5px;
}
table{
    width:100%;
}
tr{
    background:#ccc;
}
td{
    padding:5px 7px;
}
span{
    font-weight:bold;
}

jsFiddle - http://jsfiddle.net/QActK/

I don't think that table is the right element here from a semantic point of view. That and you are using a table for layout purposes which is really frowned upon these days — Jon P, Jun 12 '12 at 05:00
I quite agree, divs would be a much better solution. This is just how one would likely do it if tables were used. Looks like Jon P has a good div/span solution already posted. — DACrosby, Jun 12 '12 at 06:56

How to do HTML layout for rows of complex records?

3 Answers3