Need help converting a table into divisions / rules

Hi!

I would greatly appreciate specific code to reproduce this using CSS in lieu of this HTML table.
TIA

   <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" id="table5" width="450">
<tr>
   <td class="hdr">Windows<br>Hosting Plans</td>
   <td class="col1"><b>&nbsp;<%= plan_name(0) %>&nbsp;</b></td>
   <td class="col2"><b>&nbsp;<%= plan_name(1) %>&nbsp;</b></td>
</tr>
<tr>
<td class="cat">Disk Space</td>
<td class="col1"><%= plan_size(0) %></td>
<td class="col2"><%= plan_size(1) %></td>
</tr>
<tr>
<td class="cat">Monthly Transfer</td>
<td class="col1"><%= plan_traffic(0) %></td>
<td class="col2"><%= plan_traffic(1) %></td>
</tr>
<tr>
<td class="cat">Monthly hosting</td>
<td class="col1"><b><%= plan_price(0) %></b></td>
<td class="col2"><b><%= plan_price(1) %></b></td>
</tr>
<tr>
<td class="cat"><a href="windows-hosting-plans-overview.asp">Windows omparison</a></td>
<td class="col1">
 <FORM Method="Post" Action="https://cp.sample.net/psoft/servlet/psoft.hsphere.CP" target="_blank">
  <input type="hidden" name="action" value="signup">
   <input type="hidden" name="plan_id" value="<%=plan_id(0)%>">
   <input type="hidden" name="signup" value="yes">
   <input type="hidden" name="template_name" value="signup/begin.html/">
   <input class="buynowbutton" title="Pewter Windows Hosting Plan Buy Now Button | ..." type="submit" value="Buy Now">
</FORM>
</td>                        
<td class="col2">
<FORM Method="Post" Action="https://cp.sample.net/psoft/servlet/psoft.hsphere.CP" target="_blank">
                           <input type="hidden" name="action" value="signup">
                           <input type="hidden" name="plan_id" value="<%=plan_id(1)%>">
                           <input type="hidden" name="signup" value="yes">
                           <input type="hidden" name="template_name" value="signup/begin.html/">
                           <input class="buynowbutton" title="Bronze Windows Hosting Plan Buy Now Button | ..." type="submit" value="Buy Now">
                         </FORM>
                        </td>
      </tr>              
   </table>
TrueBlueAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

remorinaCommented:
Here you go, I've also preserved your CSS classes but you might need to do some CSS adjustments of widths and your current classes to get the desired output.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Letter K</title>
    <style type="text/css">
        .dataContainer {width:450px;}
        .dataContainer .row {overflow:hidden;}
        .cell1, .cell2, .cell3 {float:left;width:150px;}
    </style>
</head>
<body>
    <div class="dataContainer">
        <div class="row">
            <div class="cell1 hdr">Windows<br />Hosting Plans</div>
            <div class="cell2 col1"><b>&nbsp;<%= plan_name(0) %>&nbsp;</b></div>
            <div class="cell3 col2"><b>&nbsp;<%= plan_name(1) %>&nbsp;</b></div>
        </div>
        <div class="row">
            <div class="cell1 cat">Disk Space</div>
            <div class="cell2 col1"><%= plan_size(0) %></div>
            <div class="cell3 col2"><%= plan_size(1) %></div>
        </div>
        <div class="row">
            <div class="cell1 cat">Monthly Transfer</div>
            <div class="cell2 col1"><%= plan_traffic(0) %></div>
            <div class="cell3 col2"><%= plan_traffic(1) %></div>
        </div>
        <div class="row">
            <div class="cell1 cat">Monthly hosting</div>
            <div class="cell2 col1"><b><%= plan_price(0) %></b></div>
            <div class="cell3 col2"><b><%= plan_price(1) %></b></div>
        </div>
        <div class="row">
            <div class="cell1 cat"><a href="windows-hosting-plans-overview.asp">Windows omparison</a></div>
            <div class="cell2 col1">
                <form method="Post" action="https://cp.sample.net/psoft/servlet/psoft.hsphere.CP" target="_blank">
                <input type="hidden" name="action" value="signup">
                <input type="hidden" name="plan_id" value="<%=plan_id(0)%>">
                <input type="hidden" name="signup" value="yes">
                <input type="hidden" name="template_name" value="signup/begin.html/">
                <input class="buynowbutton" title="Pewter Windows Hosting Plan Buy Now Button | ..." type="submit" value="Buy Now">
                </form>
            </div>
            <div class="cell3 col2">
                <form method="Post" action="https://cp.sample.net/psoft/servlet/psoft.hsphere.CP" target="_blank">
                <input type="hidden" name="action" value="signup">
                <input type="hidden" name="plan_id" value="<%=plan_id(1)%>">
                <input type="hidden" name="signup" value="yes">
                <input type="hidden" name="template_name" value="signup/begin.html/">
                <input class="buynowbutton" title="Bronze Windows Hosting Plan Buy Now Button | ..." type="submit" value="Buy Now">
                </form>
            </div>
        </div>
    </div>
</body>
</html>

Open in new window

0
nzinsliCommented:
Give this a shot...
 
<div style="float:left;">
	<span class="hdr">Windows<br>Hosting Plans</span><br>
	<span class="cat">Disk Space</span><br>
	<span class="cat">Monthly Transfer</span><br>
	<span class="cat">Monthly hosting</span><br>
	<span class="cat"><a href="windows-hosting-plans-overview.asp">Windows omparison</a></span>
</div>
<div style="float:left;">
	<span class="col1"><b>&nbsp;<%= plan_name(0) %>&nbsp;</b></span><br>
	<span class="col1"><%= plan_size(0) %></span><br>
	<span class="col1"><%= plan_traffic(0) %></span><br>
	<span class="col1"><b><%= plan_price(0) %></b></span><br>
	<span class="col1">
	 <FORM Method="Post" Action="https://cp.sample.net/psoft/servlet/psoft.hsphere.CP" target="_blank">
	  <input type="hidden" name="action" value="signup">
	   <input type="hidden" name="plan_id" value="<%=plan_id(0)%>">
	   <input type="hidden" name="signup" value="yes">
	   <input type="hidden" name="template_name" value="signup/begin.html/">
	   <input class="buynowbutton" title="Pewter Windows Hosting Plan Buy Now Button | ..." type="submit" value="Buy Now">
	</FORM>
	</span>
</div>
<div style="float:left;">
	<span class="col2"><b>&nbsp;<%= plan_name(1) %>&nbsp;</b></span><br>
	<span class="col2"><%= plan_size(1) %></span><br>
	<span class="col2"><%= plan_traffic(1) %></span><br>
	<span class="col2"><b><%= plan_price(1) %></b></span><br>
	<span class="col2">
	<FORM Method="Post" Action="https://cp.sample.net/psoft/servlet/psoft.hsphere.CP" target="_blank">
	   <input type="hidden" name="action" value="signup">
	   <input type="hidden" name="plan_id" value="<%=plan_id(1)%>">
	   <input type="hidden" name="signup" value="yes">
	   <input type="hidden" name="template_name" value="signup/begin.html/">
	   <input class="buynowbutton" title="Bronze Windows Hosting Plan Buy Now Button | ..." type="submit" value="Buy Now">
	 </FORM>
	</span>
</div>

Open in new window

0
TrueBlueAuthor Commented:
Hi!

I made a test page:
http://www.orlando-web-hosting.net/testpage.asp
The top table is the one I started with.
The second table is Remorina's
And the third table is nzinsli's.

I actually had five columns, but only gave two in the question.
Can I get a revision to make it closer to my original?
TIA
0
nzinsliCommented:
Ahhh see, that would've been helpful from the start. ;) You can also upload screenshots of live code isnt possible.

If you simply remove all the span class=col1 and put class=col1 on the div for each column, that will add the background color for the whole block.
ie:
<div class="col1">
<b>Pewter</b><br>
text<br>
text<br>
</div>
0
nzinsliCommented:
you can also add padding:5px 0; to your col1 class to give some empty space on top and bottom. Or padding:5px; to add it all around.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.