Preeti Preeti - 8 days ago 7
HTML Question

Basic table structure

Display table with

600px
width having three rows. First row should have full width. second row with two td having 50% width each and third row with three td with equal length.

What I have done so far:

<table border="1" cellpadding="0" cellspacing="" width="600">
<tr>
<td colspan="3">
<p>Hey I am first row</p>
</td>
</tr>
<tr>
<td colspan="3">
<table border="1" cellpadding="0" cellspacing="" width="600">
<tr>
<td width="50%">
<p>Hey I am second row</p>
</td>
<td width="50%">
<p>Hey I am second row</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="33.33%">
<p>Hey I am third row</p>
</td>
<td width="33.33%">
<p>Hey I am third row</p>
</td>
<td width="33.33%">
<p>Hey I am third row</p>
</td>
</tr>
</table>

Answer

Yes, this is tricky... You need to keep 6 as your base and work on it, so that you don't need to use nested tables. May be you can do like this:

table {width: 600px; text-align: center;}
table td {border: 1px solid #999; padding: 5px;}
<table>
  <tr>
    <td colspan="6">Full Width</td>
  </tr>
  <tr>
    <td colspan="3">&frac12;</td>
    <td colspan="3">&frac12;</td>
  </tr>
  <tr>
    <td colspan="2">&#8531;</td>
    <td colspan="2">&#8531;</td>
    <td colspan="2">&#8531;</td>
  </tr>
</table>

Hope this helps?