html - I am not sure how to convert my webpages Table over to divs instead -

html - I am not sure how to convert my webpages Table over to divs instead -

i have table on website , wanting switch on utilize divs instead still working on studying html , not sure how go it. have css called theme.css , know somthing goes in cause work.

<table> <tr> <td> <table> <tr> <td class="cellwidth"> <img src="4-cute-cats.jpg" class="centerimage" width="300" height="300" /> <p class="centertext">they hunt in packs.</p> </td> <td> <img src="cat_sniping.jpg" class="centerimage" width="256" height="192" /> <p class="centertext">sniper cat</p></a> </td> <td class="cellwidth"> <img src="lol1.jpg" class="centerimage" width="300" height="298" /> <p class="centertext">sneaking cat</p> </td> <td class="cellwidth"> <img src="hammercat.jpg" class="centerimage" width="300" height="163" /> <p class="centertext">80s cat</p> </td> </tr> <tr> <td class="cellwidth"> <img src="kittytrap.jpg" class="centerimage" width="200" height=492 /> <p class="centertext">it's trap!</p> </td> <td class="cellwidth"> <img src="chop-cats.jpg" class="centerimage" width="300" height="140" /> <p class="centertext">they can strip auto frame in under 2:00 minutes.</p> </td> <td class="cellwidth"> <img src="smartkat.jpg" class="centerimage" width="200" height="338" /> <p class="centertext">intelligent cat.</p></a> </td> <td class="cellwidth"> <img src="narniacat.jpg" class="centerimage" width="200" height="337" /> <p class="centertext">once cat of narnia cat of narnia.</p> </td> </tr> <tr> <td class="cellwidth"> <img src="lolcats3.jpg" class="centerimage" width="300" height="108" /> <p class="centertext">tired cat.</p> </td> <td class="cellwidth"> <img src="lol_cats_1.jpg" class="centerimage" width="300" height="142" /> <p class="centertext">gollum cat.</p> </td> <td class="cellwidth"> <img src="magical-kitty.png" class="centerimage" width="300" height="180" /> <p class="centertext">super cat.</p> </td> <td class="cellwidth"> <img src="sad-kitty.jpg" class="centerimage" width="300" height="188" /> <p class="centertext">sad kitty.</p> </td> </tr> <tr> <td class="cellwidth"> <img src="cat-in-your-wallpaper.jpg" class="centerimage" width="300" height="200" /> <p class="centertext">wallpaper cat. </td> <td class="cellwidth"> <img src="thinking-cat.jpg" class="centerimage" width="300" height="475" /> <p class="centertext">thinking cat.</p> </td> <td class="cellwidth"> <img src="http://3.bp.blogspot.com/_znunebehigk/tsoor5duoqi/aaaaaaaabfy/-rpe8s1uro8/s1600/000.jpg&w=823&h=618&ei=_a4vufp7l4gy2qxj-ohidq&zoom=1&ved=1t:3588,r:79,s:0,i:354&iact=rc&dur=2621&sig=108293906633680688065&page=3&tbnh=172&tbnw=231&start=67&ndsp=38&tx=64&ty=72" class="centerimage" width="300" height="225" /> <p class="centertext">gamer kitty.</p> </td> <td class="cellwidth"> <img src="http://www.dumpaday.com/wp-content/uploads/2013/01/funny-lol-cats-playing-with-toilet-paper1.jpg" class="centerimage" width="300" height="504" /> <p class="centertext">couch cat.</p> </td> </tr> </table> </td> </tr> <tr> <td align="center"> <a href="morekitties.html">more kitties</a> </td> </tr> </table>

demo: http://jsfiddle.net/klmpv/

here starting point. see if can understand this, , convert table layout similar.

html

<div class="wrapper"> <article> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </article> <article> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </article> <article> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </article> <article> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </article> <article> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </article> </div>

css

.wrapper { margin: 1%; background: #f5f5f5; overflow: hidden; } .item { height: 200px; float: left; display: inline-block; width: 23%; position: relative; background: pink; margin: 1%; }

html css