html - Horizontal table menu with picture and text below -

html - Horizontal table menu with picture and text below -

just started creating basic web pages, , wanted ask: 'correct' way duplicate 3 columns (seen in jsfiddle) this: http://imgur.com/0lrvsbv? guys utilize create table row that, , center image text?

jsfiddle

code:

<div class="content4"> <img src="http://placehold.it/67x67"> <div class="main"> <ul class="infobar"> <li> <a href="#">god</a> <div class="infobartext">foobarfoobarf oobarfoo barfooba <br> foobarfoobarf oobarfoo barfooba <br> foobarfoobarf <br> foobarfoobarf oobarfoo barfooba <br> foobarfoobarf oobarfoo barfooba <br> foobarfoobarf oobarfoo barfooba <br> foobarfoobarf oobarfoo </div> </li> <li> <a href="#">damn</a> <div class="infobartext">foobarfoobarf oobarfoo barfooba <br> foobarfoobarf oobarfoo barfooba <br> foobarfoobarf oobarfoo barfooba <br> foobarfoobarf oobarfoo <br> foobarfoobarf oobarfoo barfooba <br> foobarfoobarf <br> foobarfoobarf oobarfoo barfooba </div> </li> <li> <a href="#">menus</a> <div class="infobartext">foobarfoobarf oobarfoo barfooba <br> foobarfoobarf oobarfoo barfooba <br> foobarfoobarf oobarfoo barfooba <br> foobarfoobarf oobarfoo <br> foobarfoobarf oobarfoo barfooba <br> foobarfoobarf <br> foobarfoobarf oobarfoo barfooba </div> </li> </ul> </div> </div>

stylesheet:

.main { margin: 0 auto; width: 1150px; font-family: 'roboto'; font-size: 16; } .content4 { background: white; height: 580px; } .infobar li { list-style: none; float: left; margin-top: 30px; margin-left: 50px; } .infobar { color: black; text-decoration: none; text-transform: uppercase; font-style: italic; } .infobartext { margin-top: 25px; color: black; font-size: 14; }

using classical approach:

<div class="content4"> <div class="main"> <table class="infobar"> <tr> <td> <img src="http://placehold.it/67x67"> </td> <td><a href="#">god</a> </td> </tr> <tr> <td>&nbsp;</td> <td> <span class="infobartext">foobarfoobarf oobarfoo barfooba <br>foobarfoobarf oobarfoo barfooba <br>foobarfoobarf <br>foobarfoobarf oobarfoo barfooba <br>foobarfoobarf oobarfoo barfooba <br>foobarfoobarf oobarfoo barfooba <br>foobarfoobarf oobarfoo </span> </td> </tr> </table> </div> </div>

html css table menu rows