Ошибка HTML таблицы в интервал и полях

Question

Я хочу сделать таблицу в HTML, как дано в ссылке Table

Я пытался, но не работал. МОЙ КОД

.td1 { 
 
\t background-color: #cccccc; 
 
\t border: 2px solid black; 
 
\t padding: 10px; 
 
\t padding-bottom: 50px; 
 
} 
 

 
.td2 { 
 
\t background-color: red; 
 
\t border: 2px solid black; 
 
\t padding: 10px; 
 
} 
 

 
.td3 { 
 
\t background-color: green; 
 
\t border: 2px solid black; 
 
\t padding: 10px; 
 
\t padding-bottom: 200px; 
 
} 
 

 
.td4 { 
 
\t background-color: blue; 
 
\t border: 2px solid black; 
 
\t padding: 10px; 
 
} 
 

 
.td5 { 
 
\t margin: 5px; 
 
\t background-color: yellow; 
 
\t border: 2px solid black; 
 
\t padding: 10px; 
 
} 
 

 
.table { 
 
    border-collapse: separate; 
 
\t border-spacing: 25px 5px; 
 
\t margin: 5px; 
 
\t 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

добавить это в вашем CSS

.table tr{ 
height:100px; 
} 

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

Answer 2

Вы можете удалить "RowSpan" атрибута по, у вас уже есть DIV внутри вашего с.в..

Дайте 2-й tr высоты в css и трех divs внутри tds внутри, добавьте атрибут height.

Answer 3

Заметили, что у вас есть:

border-spacing: 25px 5px; 

Изменить это:

border-spacing: 5px 5px; 

Это расстояние для расстояния между границами ячеек. Здесь вы можете узнать больше о border-spacing!