I'm finally getting around to converting some of my sites to the "proper" way of doing things. For one, I'm finally abandoning tables wherever I can, but in a lot of cases...I don't know what to use instead.

Take the ugly mess below for instance...which looks fine, but takes up a whole lot of code for something CSS could very easily snap into place (I think)


HTML Code:
<table width="740" align="center" border="0">
  <tr>
    <td>
      <table width="100%">
        <tr> 
          <td width="340" align="left" valign="top" bgcolor="#CCFFCC" class="chart_title"><a name="Name"></a><b>Name</b></td>
          <td width="200" align="left" valign="top" bgcolor="#CCFFCC" class="genre">Genre</div></td>
          <td width="100" align="center" valign="top" bgcolor="#CCFFCC" class="price">US <b>$XX</b></td>
          <td width="100" align="center" valign="top" bgcolor="#CCFFCC" class="media">Media Content</td>
        </tr>
      </table>
      <table width="100%">
        <tr> 
          <td class="buynow" width="100" valign="top"><img src="#" border="0"></td>
          <td class="chart_description" valign="top">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  
            sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
            sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </td>
          <td class="icons" width="100" align="center" valign="top"> 
            <img src="#" width="35" height="35" alt="description" border="0"> 
            <img src="#" width="35" height="35" alt="description" border="0">
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
If I'm moving away from the deprecated TABLE tags...what are the proper tags for this? Should I use everything as a nested DIV, an unordered list, SPAN classes, etc.. Any suggestions are welcomed...thank you!