Converting Tables to DIV & CSS

[startingnow]

I have a rather solid understanding of HTML but no experience with CSS. I have an assignment where I am to recreate the following code by replacing the tables with div's and CSS. Just wondering how I can go about doing this. Thanks.

<table width="438" border="0" cellpadding="0" style="border: 1px solid #CCCCCC; padding: 10px; margin: 0px 10px 10px 10px; background: url() repeat-x bottom #FFFFFF;">
<tr>
<td rowspan="2" width="90" valign="middle" align="center">
<a href='#'><img src='http://www.redtag.ca/images/hotels/582.jpg' alt='Holiday Inn' style="border: 1px solid #CCCCCC; float: left; margin-right: 3px; padding: 3px; width: 74px; height: 58px;"/></a>
</td>
<td colspan="2" valign="bottom">
<h2 style="font-size: 12px; margin: 0px; padding: 0px;"><a style="font-family: Verdana, Arial, Helvetica, sans-serif; color: #0055AA; font-weight: bold;" href='#'>Calgary to Puerto Vallarta</a> <span style="font: bold 11px Verdana, Arial, Helvetica, sans-serif; color: #666666;">Mexico</span></h2>
</td>
</tr>
<tr>
<td valign="top">
<strong><a href='#'>Holiday Inn</a> <img src='http://www.redtag.ca/images/stars/fourstarwhite.jpg' alt='4 star' width='72' height='12' align='absmiddle' /></strong>
<br />
<img src="http://www.redtag.ca/images/new-icon.jpg" width="32" height="13" align="absmiddle" /> <a href='#'>Flight Details</a>
<br />
All Inclusive | 01 Sep 2011 | 7 Nights
</td>
<td valign="top" align="right">
<span >
<a style="color: #CA0000; font-size:15px; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif;" href='#'>$348.00</a>
</span>
<br />
taxes: $341.00
</td>
</tr>
</table>
</body>
</html>

[teedoff]

First thing I would do is try and figure out how many divs would be needed. YOu can do this by counting the columns and rows.

Looking at your code it seems like there is three columns with two rows. The rows could be presented in a manner such as the first row could be your "header" section. The columns could be comparable to a 3 column, or div layout.

I would google 3 column layout with header if I were you. There are tons of good free tutorials online.

[felgall]

The first thing I would do is to remove all the table related tags.

Next go through the content and make sure that everything is wrapped in tags that describe what that content is. Only where no alternative tag exists would you wrap something in a div and use the id or class attribute to identify what it is.

Once you have the HTML describing what all the content is properly you can then start applying CSS to define how the various pieces should look. While doing this you may need to add one or two more divs to work around current browser limitations with CSS. The goal should be to use as few divs as possible as they add no additional information regarding what the content is and so are almost as bad when used unnecessarily as using the wrong tag to misidentify what something is (such as wrapping something that isn't tabular data in a table).