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?
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.