Semantic Html: List Of Users

How should I mark up a list of users? Each user has a name, picture, and job title. How's this?

Venmo

Employees

Solution 1:

This isn't so much a list of users as a table of data about the users. Each user has an image, a name and a job title. That gives you rows and columns.

table {
    display: block;
}
tr {
    display: block;
    overflow: auto;
    clear: left;
    margin-bottom: 10px;
}
td {
    display: block;
    width: 200px;
}
td:first-child {
    float: left;
    width: auto;
}
td:nth-child(2) {
    margin-left: 60px;
    padding-bottom: 6px;
    border-top: solid grey 2px;
}
td:nth-child(3) {
    margin-left: 60px;
    padding-top: 6px;
    border-bottom: solid grey 2px;
}

<table><tr><td><imgsrc="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/black_female_business_user.png"alt=""width="50" /></td><td>Jane Smith</td><td>Software Engineer</td></tr><tr><td><imgsrc="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/black_female_business_user.png"alt=""width="50" /></td><td>Jane Smith</td><td>Software Engineer</td></tr><tr><td><imgsrc="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/black_female_business_user.png"alt=""width="50" /></td><td>Jane Smith</td><td>Software Engineer</td></tr></table>