How to create a correct table? - html

Question

I have a problem with making a table in HTML.
The table should look like in this image:
And the second image is how I made:
This is my code:
<table width="730" border="1px" cellspacing="0" cellpadding="3">
<tr align="center">
<td rowspan="3">A</td>
<td rowspan="2">B</td>
<td rowspan="3">D</td>
<td>E</td>
<td>F</td>
<td>G</td>
</tr>
<tr align="center">
<td rowspan="2" colspan="3">H</td>
</tr>
<tr align="center">
<td>C</td>
</tr>
</table>
How to create a table like in the first image?

Answer 1

.grey{ background: rgba(128,128,128,0.7); }
<table width="730" border="1px" cellspacing="0" cellpadding="3">
<tr align="center">
<td rowspan="3">A</td>
<td rowspan="2" height="60px">B</td>
<td rowspan="3">D</td>
<td class="grey">E</td>
<td class="grey">F</td>
<td class="grey">G</td>
</tr>
<tr align="center">
<td rowspan="2" colspan="3">H</td>
</tr>
<tr align="center">
<td>C</td>
</tr>
</table>

Answer 2

In this particular case the only things you can do are
1.) Add more content to the cells. If the amount of contents corresponds to the cell heights, they will adjust automatically.
or
2.) If you intend to have as little contents as in your example code, add a height setting to one of the cells that are supposed to span two rows - see snippet below.
<table width="730" border="1px" cellspacing="0" cellpadding="3">
<tr align="center">
<td rowspan="3">A</td>
<td rowspan="2" style="height:3em;">B</td>
<td rowspan="3">D</td>
<td>E</td>
<td>F</td>
<td>G</td>
</tr>
<tr align="center">
<td rowspan="2" colspan="3">H</td>
</tr>
<tr align="center">
<td>C</td>
</tr>
</table>