I have to make a very complicated table similar to the one in the picture below. http://irinaciocan.ro/tehnici_web_2012/imagini/tabel_ciudatel29.png
I tried this markup but it doesn't work well. http://jsfiddle.net/miskolc/W9nJU/3/
<body>
<table border="10" cellpadding="0" cellspacing="0">
<tr>
<td colspan="1" rowspan="1">1</td>
<td colspan="2" rowspan="1">2</td>
<td colspan="2" rowspan="1">3</td>
</tr>
<tr>
<td colspan="2" rowspan="4">4</td>
<td colspan="3" rowspan="2">5</td>
</tr>
<tr>
<td colspan="2" rowspan="2">6</td>
<td colspan="1" rowspan="4">7</td>
</tr>
<tr>
<td rowspan="4" colspan="1">8</td>
<td rowspan="1" colspan="1">9</td>
<td rowspan="1" colspan="1">10</td>
<td rowspan="2" colspan="1">11</td>
</tr>
<tr>
<td rowspan="1" colspan="2">12</td>
</tr>
<tr>
<td rowspan="3" colspan="1">13</td>
<td rowspan="1" colspan="3">14</td>
</tr>
<tr>
<td rowspan="1" colspan="2">15</td>
<td rowspan="1" colspan="1">16</td>
</tr>
<tr>
<td rowspan="1" colspan="2">17</td>
</tr>
</table>
</body>
AND the CSS
td {
width:50px;
height:50px;
padding:0px;
}
I don't understand why cell 6 remains on the same row as cell 5 even though they are inside different tr tags. I also don't understand why cells 1,2,3 don't have the correct spaning sizes. Can someone please tell me how to tackle this problem?
See Question&Answers more detail:os
