Reputation: 918
I have a table and I am trying to accomplish something like this,
So far I have following html, I think I can use rowspan but tried and it's not giving me desired outcome
<table class="table tab-content" style="width:95%" align="center">
<tr class="row">
<td colspan="2">
<h4 class="h4">This is a new Car please call</h4>
</td>
</tr>
<tr class="row">
<td style="width:100px; height=100%;" rowspan="2">
<img width="100%" src="adimg/autos/11.jpg" />
</td>
<td style="width:70%">this is a car ad this is a car adthis is a car adthis is a car adthis is a car ad this is a car adthis is a car adthis is a car adthis is a car adthis is a car ad this is a car ad this is a car adthis is a car adthis is a car adthis is a car ad this is a car adthis is a car adthis is a car ...    <a style="font-weight:bold; color:Red" href="#">3 mins ago</a>
</td>
<td valign="top">$5000</td>
<td><b>Smart Cars</b>
</td>
</tr>
</table>
Upvotes: 0
Views: 2393
Reputation: 1776
The image should be on the top row with rowspan=2 which will put it in 2 rows. Also, the td containing should have colspan=3 to cover the rest of the row. Colspan=2 here will leave a gap in this row above the cell "Smart Cars".
The second row automatically fits in the first column with the image since the rowspan given earlier and the remaining 3 columns of the row follows.
<table class="table tab-content" style="width:95%" align="center">
<tr class="row">
<td style="width:100px; height=100%;" rowspan="2">
<img width="100%" src="adimg/autos/11.jpg" />
</td>
<td colspan="3">
<h4 class="h4">This is a new Car please call</h4>
</td>
</tr>
<tr class="row">
<td style="width:70%">this is a car ad this is a car adthis is a car adthis is a car adthis is a car ad this is a car adthis is a car adthis is a car adthis is a car adthis is a car ad this is a car ad this is a car adthis is a car adthis is a car adthis is a car ad this is a car adthis is a car adthis is a car ...    <a style="font-weight:bold; color:Red" href="#">3 mins ago</a>
</td>
<td valign="top">$5000</td>
<td><b>Smart Cars</b>
</td>
</tr>
Upvotes: 0
Reputation: 1161
You've got to place the rowspan <td>
as the first element in your first <tr>
.
The span works downward, so what you have right now is the second row spanning into the third.
Upvotes: 3
Reputation: 61
Place the with image in the top row , and it should work fine.
<table class="table tab-content" style="width:95%" align="center">
<tr class="row">
<td style="width:100px; height=100%;" rowspan="2">
<img width="100%" src="adimg/autos/11.jpg" />
</td>
<td colspan="2">
<h4 class="h4">This is a new Car please call</h4>
</td>
</tr>
<tr class="row">
<td style="width:70%">this is a car ad this is a car adthis is a car adthis is a car adthis is a car ad this is a car adthis is a car adthis is a car adthis is a car adthis is a car ad this is a car ad this is a car adthis is a car adthis is a car adthis is a car ad this is a car adthis is a car adthis is a car ...    <a style="font-weight:bold; color:Red" href="#">3 mins ago</a>
</td>
<td valign="top">$5000</td>
<td><b>Smart Cars</b>
</td>
</tr>
Upvotes: 0