html kod yığınından kurtulmak css

Arkadaşlar mrb siteme son eklenen 5 oyunu php ile çekeceğim

<table border="0" cellpadding="0" cellspacing="0" width="135">
<!-- fwtable fwsrc="Adsız" fwpage="Sayfa 1" fwbase="Adsız-1.gif" fwstyle="Dreamweaver" fwdocid = "1003367628" fwnested="0" -->
  <tr>
   <td><img src="spacer.gif" width="8" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="120" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="7" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td colspan="3"><img name="Adsz1_r1_c1" src="Adsız-1_r1_c1.gif" width="135" height="8" border="0" id="Adsz1_r1_c1" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="8" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2"><img name="Adsz1_r2_c1" src="Adsız-1_r2_c1.gif" width="8" height="97" border="0" id="Adsz1_r2_c1" alt="" /></td>
   <td><img src="../ben-10-omnitrix-unleashed-1269723820.gif" width="120" height="90" /></td>
   <td rowspan="2"><img name="Adsz1_r2_c3" src="Adsız-1_r2_c3.gif" width="7" height="97" border="0" id="Adsz1_r2_c3" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="90" border="0" alt="" /></td>
  </tr>
  <tr>
   <td><img name="Adsz1_r3_c2" src="Adsız-1_r3_c2.gif" width="120" height="7" border="0" id="Adsz1_r3_c2" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="7" border="0" alt="" /></td>
  </tr>
</table>

1 Oyun için kullanmak istediğim html kodu yukarıda, Ben 5 oyun çekeceğim için yukarıdaki html kodunu yazılım 5 defa yenileyecek ve oldukça fazla bir html kod yığını olacak. ben bu kod yığınını ortadan kaldırmak istiyorum. Oyunlar yenilenirken yukarıdaki kodda sadece "<img src="../ben-10-omnitrix-unleashed-1269723820.gif" width="120" height="90" />" bu kod değişecek yani farklı bir resim dizini yer alacak. Benim şimdi ne yapmam gerekiyor. Css ile bir şeyler yapamazmıyız
msl sadece
<div id="resim"><img src="../ben-10-omnitrix-unleashed-1269723820.gif" width="120" height="90" /></div> şekline dönüştüremezmiyiz.

.resim
{
background-image:url(images/resim.gif) no-repeat;
height:120px;
width:150px;
float:left;
}

.resim img
{
padding-top:10px;
padding-left:10px;
}

<div class="resim"><img src="../ben-10-omnitrix-unleashed-1269723820.gif" width="120" height="90" /></div>
<div class="resim"><img src="../ben-10-omnitrix-unleashed-1269723820.gif" width="120" height="90" /></div>
<div class="resim"><img src="../ben-10-omnitrix-unleashed-1269723820.gif" width="120" height="90" /></div>
<div class="resim"><img src="../ben-10-omnitrix-unleashed-1269723820.gif" width="120" height="90" /></div>
<div class="resim"><img src="../ben-10-omnitrix-unleashed-1269723820.gif" width="120" height="90" /></div>

<div style="clear:both;"></div>

Sanırım yukardaki table kodunda arkaplan resmi parçalamıssın css de resim.gif i tek resim olarak koyabilirsin .

css deki img bölümündeki kodlar ile ise div in içindeki resmin konumu ayarlanıyor .