Aalind Sharma Aalind Sharma - 1 month ago 4
CSS Question

Complex table rowspan and colspan to show the following image



<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
td, th{
height: 20px;
width: 80px;
}
</style>
</head>
<body>

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td rowspan="2" colspan="3"></td>
</tr>
</table>

</body>
</html>





The image contains the desired result which should be generated from the code.I have written the following code but somehow the rowspan and colspan are not working together and some other output is generated.
The image is show in the following link :-
https://drive.google.com/file/d/0B3C84zpiG_wXVEVKU3ZlRFVBd00/view?usp=sharing

Answer

I have created that structure using rowspan & colspan, please check updated fiddle

OR

Below code:

td{
   padding:10px;
   text-align:center;
   background:#CCC;
}
<table border="1" cellpadding="0" cellspacing="0" width="100%">
    	<tr>
        	<td>
    	        Colspan 1
            </td>
        	<td>
    	        Colspan 1
            </td>
        	<td>
    	        Colspan 1
            </td>
        </tr>
    	<tr>
        	<td>
    	        Colspan 1
            </td>
        	<td colspan="2">
    	        Colspan 2
            </td>
        </tr>
    	<tr>
        	<td rowspan="2">
            	Rowspan 2
            </td>
        	<td colspan="2">
            	Colspan 2
            </td>
        </tr>
    	<tr>
        	<td colspan="2" rowspan="2">	        
            	Colspan 1 <br> Rowspan 2
            </td>
        </tr>
    	<tr>
        	<td>	        
            	Colspan 1
            </td>
        </tr>
    	<tr>
        	<td colspan="3" rowspan="3">
            	Colspan 3 <br> Rowspan 3
            </td>
        </tr>			
    </table>