how to convert 4X4 table in CSS

[vivek192]

hai friends,

i have a html page contains 6 columns and 4 rows, it has to be convert into CSS pls let me know how to do

vivek

[Robin_reala]

That sounds like it actually is tabular data (in which case you really don't want to convert it to divs). What data does the page contain?

[vivek192]

This is the actual table

<table width="100%">
<tr>
<td class="boldText">Usage</td>
<td class="boldText"></td>
<td class="boldText"></td>
<td class="boldText"></td>
<td class="boldText">MRV</td>
<td class="boldText"></td>
<td class="boldText"></td>
<td class="boldText"></td>
</tr>
<tr>
<td class="boldText"></td>
<td class="boldText">Residential</td>
<td class="boldText">Commercial</td>
<td class="boldText"></td>
<td class="boldText">Res</td>
<td class="boldText">Com</td>
<td class="boldText">Res</td>
<td class="boldText">Com</td>
</tr>
<tr>
<td class="boldText">Tenantial</td>
<td class="bodyText"><input type="text" name="resArvTenanted" size="5" class="mandatoryField" value="0"/></td>
<td class="bodyText"><input type="text" name="commArvTenanted" size="5" class="mandatoryField" value="0"/></td>
<td class="bodyText"></td>
<td class="bodyText"><input type="text" name="resTenMRV" size="3" class="mandatoryField" value="0" onblur="javascript:return calculateResidenctialTenMRV(this.form)" /></td>
<td class="bodyText"><input type="text" name="commTenMRV" size="3" class="mandatoryField" value="0" onblur="javascript:return calculateCommercialTenMRV(this.form)"/></td>
<td class="bodyText"><input type="text" name="resTenTotal" size="5" class="mandatoryField" value="0" readonly="readonly" /></td>
<td class="bodyText"><input type="text" name="commTenTotal" size="5" class="mandatoryField" value="0" readonly="readonly" /></td>
</tr>
<tr>
<td class="boldText">Self Occupied</td>
<td class="bodyText"><input type="text" name="resArvSelf" size="5" class="mandatoryField" value="0" /></td>
<td class="bodyText"><input type="text" name="commArvSelf" size="5" class="mandatoryField" value="0" /></td>
<td class="bodyText"></td>
<td class="bodyText"><input type="text" name="resSelfMRV" size="3" class="mandatoryField" value="0" onblur="javascript:return calculateResSelfMRV(this.form)"/></td>
<td class="bodyText"><input type="text" name="commSelfMRV" size="3" class="mandatoryField" value="0" onblur="javascript:return calculateCommSelfMRV(this.form)"/></td>
<td class="bodyText"><input type="text" name="resSelfTotal" size="5" class="mandatoryField" value="0" readonly="readonly"/></td>
<td class="bodyText"><input type="text" name="commSelfTotal" size="5" class="mandatoryField" value="0" readonly="readonly"/></td>
</tr>
<tr>
<td class="boldText">Vacant</td>
<td class="bodyText"><input type="text" name="resArvVacant" size="5" class="mandatoryField" value="0"/></td>
<td class="bodyText"><input type="text" name="commArvVacant" size="5" class="mandatoryField" value="0"/></td>
<td class="bodyText"></td>
<td class="bodyText"><input type="text" name="resVacantMRV" size="3" class="mandatoryField" value="0" onblur="javascript:return calculateResVacantMRV(this.form)"/></td>
<td class="bodyText"><input type="text" name="commVacantMRV" size="3" class="mandatoryField" value="0" onblur="javascript:return calculateCommVacantMRV(this.form)"/></td>
<td class="bodyText"><input type="text" name="resVacantTotal" size="5" class="mandatoryField" value="0" readonly="readonly"/></td>
<td class="bodyText"><input type="text" name="commVacantTotal" size="5" class="mandatoryField" value="0" readonly="readonly"/></td>
</tr>
<tr>
<td class="boldText">Depriciation</td>
<td class="bodyText"><input type="text" name="resArvDepreciation" size="5" class="mandatoryField" value="0" onblur="javascript:return deductResDepreciation(this.form)"/></td>
<td class="bodyText"><input type="text" name="commArvDepreciation" size="5" class="mandatoryField" value="0" onblur="javascript:return deductCommDepreciation(this.form)"/></td>
<td class="bodyText"></td>
<td class="boldText">Total</td>
<td class="bodyText"></td>
<td class="bodyText"><input type="text" name="resMRVTotal" size="5" class="mandatoryField" value="0" readonly="readonly"/></td>
<td class="bodyText"><input type="text" name="commMRVTotal" size="5" class="mandatoryField" value="0" readonly="readonly"/></td>
</tr>
<tr>
<td class="boldText">ARV (= MRV * 10 months)</td>
<td class="bodyText"><input type="text" name="resArv" size="5" class="mandatoryField" value="0"/></td>
<td class="bodyText"><input type="text" name="commArv" size="5" class="mandatoryField" value="0"/></td>
<td class="bodyText"></td>
<td class="bodyText"></td>
<td class="bodyText"></td>
<td class="bodyText"></td>
<td class="bodyText"></td>
</tr>
<tr>
<td class="boldText">Net ARV</td>
<td class="bodyText"><input type="text" name="netArv" size="5" class="mandatoryField" value="0" readonly="readonly"/></td>
<td class="bodyText"></td>
<td class="bodyText"></td>
<td class="bodyText"></td>
<td class="bodyText"></td>
<td class="bodyText"></td>
<td class="bodyText"></td>
</tr>
</table>

here the thing is I have to convert everything into CSS we should not use table , without table the data should display using div tag

Vivek

[Fotiman]

I have to agree with Robin_reala. This appears to be tabular data (that is, in a table is exactly where it belongs). Because there is a direct correlation of row and column, separating them into divs is not logical. Why would you want to try and put this into DIVs?

[garann]

That doesn't look like tabular data to me...

One possible strategy would be two divide your page with two side by side <div>s titled "Usage" and "MRV", then put the text currently in its own cells in <label>s and define <label>s and <input>s with a width of 25%. You can use spans with a special class defined with the same width for captions like "Residential" and "Commercial".

Do you have the option of changing the layout? If so, you could just use <fieldset>s or <div>s floated next to each other and stack input elements vertically within them. Might be a little more CSS-friendly...

[Fotiman]

> That doesn't look like tabular data to me...

You are correct... upon further inspection I see that it really looks like 2 tables.

> One possible strategy would be two divide your page with two side by side <div>s titled "Usage" and "MRV", then put the text currently in its own cells in <label>s and define <label>s and <input>s with a width of 25%. You can use spans with a special class defined with the same width for captions like "Residential" and "Commercial".

Ummm... I agree with the 2 div part... but inside each div is a table (at least the 1st one is). The first table has 3 columns:
Usage, Residential, Commercial

<table>
<tr>
<th>Usage</th>
<th>Residential</th>
<th>Commercial</th>
</tr>
<tr>
<td>Tenantial</td>
<td><input></td>
<td><input></td>
</tr>
...
</table>

The second table... well, that I'm not really sure of. It's not clear what those represent...