Table with fused rows - html

Question

I need the following type of table in html
i.e., with fused rows in the second column (one entity). Basically, there would be text in the four non-fused cells and an image in the fused ones. How can I do this? If there is a way wherein I can avoid the use of tables, that would be better.

Answer 1

You need to use rowspan="4" attribute in the second TD of the first row. e.g.
<table>
<tr>
<td></td>
<td rowspan="4"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
This specifies that the second cell in the first row spans over 4 rows. Notice that in the 2nd to 4th rows there is no need to specify a second column as that is already specified in the first row.
However: if you are using this just for layout then I would avoid the table altogether and use some divs and CSS to achieve the same result.
<div class="outer">
<div class="left">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="right">
<!-- image here -->
</div>
<br style="clear:both;"/>
</div>
And CSS:
.left{
float:left;
}
.right{
float:left
}
You can find some good advice on this layout in this answer.
Or with Bootstrap:
<div class="row">
<div class="col-md-6">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
<div class="col-md-6">Your Image Here</div>
</div>