CODEWITHSUNDEEP
htmlcsshtml-table
Aalind Sharma
Aalind Sharma

Reputation: 423

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

Upvotes: 1

Views: 1526

Answers (1)

Sunil Gehlot
Sunil Gehlot

Reputation: 1589

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>

Upvotes: 1

Related Questions