html table error in spacing and margin

Question

I want to make a table in html like given in the link Table

I have tried but didnt work. MY CODE

 .td1 { background-color: #cccccc; border: 2px solid black; padding: 10px; padding-bottom: 50px; } .td2 { background-color: red; border: 2px solid black; padding: 10px; } .td3 { background-color: green; border: 2px solid black; padding: 10px; padding-bottom: 200px; } .td4 { background-color: blue; border: 2px solid black; padding: 10px; } .td5 { margin: 5px; background-color: yellow; border: 2px solid black; padding: 10px; } .table { border-collapse: separate; border-spacing: 25px 5px; margin: 5px; border: 2px solid black; } 

 <table width="100%" class="table"> <tr><td colspan="3" class="td1" align="center"> <b>DIV1</b> </td></tr> <tr><td class="td2" align="center" rowspan="3"><b>DIV2</b></td> <td></td><td></td></tr> <tr><td class="td3" align="center" rowspan="2"><b>DIV3</b></td> <td></td></tr> <tr><td class="td4" align="center"><b>DIV4</b></td></tr> <tr><td colspan="3" class="td5" align="center"><b>DIV5</b> </td></tr> </table> 

Answer 1

add this in your css

.table tr{
 height:100px;
 }

http://jsfiddle.net/uwokm8oq/1/

Answer 2

You can remove the "rowspan"-attribute, you already have a div inside your tds.

Give the 2nd tr a height in the css and to the three divs in the tds inside, add a height-attribute.

Answer 3

Have noticed that you have:

 border-spacing: 25px 5px;

Change it to:

 border-spacing: 5px 5px;

This spacing is for the distance between the borders of the cells. Here you can read more about border-spacing !