asked on

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> <%= plan_name(0) %> </b></td>
<td class="col2"><b> <%= plan_name(1) %> </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>

SOLUTION

remorina

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nzinsli

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

TrueBlue

ASKER

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

nzinsli

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>

ASKER CERTIFIED SOLUTION

nzinsli

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial