How to create a side by side HTML table grid? - html

Question

I want to create a table with stuff in it like this:
What I have right now:
<table class="table">
<td>
<tr>
<div style="width: 100px;height:100px; background-color: blue;"></div>
</tr>
<tr>
<div style="width: 100px;height:100px; background-color: red;"></div>
</tr>
</td>
<td>
<div style="width: 100px;height:200px; background-color: yellow;"></div>
</td>
</table>

Answer 1

Use rowspan, and td cannot be direct child of a table.
table {
border-collapse: collapse;
}
td {
width: 100px;
text-align: center;
vertical-align: middle;
}
.blue {
background-color: royalblue;
height: 100px;
}
.yellow {
background-color: yellow;
height: 200px;
}
.red {
background-color: red;
height: 100px;
}
<table>
<tr>
<td class="blue">1</td>
<td class="yellow" rowspan="2">3</td>
</tr>
<tr>
<td class="red">2</td>
</tr>
</table>

Answer 2

Well, firstly, your table syntax is off. It should look like this.
<table>
<tr>
<td> </td>
</tr>
</table>
Next, what you want is the first row to have two columns, with the second column taking up the space of two rows. The next row will have one column. This can be done using rowspan.
Here's your refactored code.
<table class="table">
<tr>
<td rowspan="1">
<div style="width: 100px;height:100px; background-color: blue;"></div>
</td>
<td rowspan="2">
<div style="width: 100px;height:200px; background-color: yellow;"></div>
</td>
</tr>
<tr>
<td rowspan="1">
<div style="width: 100px;height:100px; background-color: red;"></div>
</td>
</tr>
</table>

Answer 3

Your code must like this: use rowspan for second td
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100px;height:100px; background-color: blue;"></td>
<td rowspan="2" style="width: 100px;height:200px; background-color: yellow;"></td>
</tr>
<tr>
<td style="width: 100px;height:100px; background-color: red;"></td>
</tr>
</table>
</tr>
</table>