arrange image beside table Options

[weblogfinder]

Hi,

I have a table as below. I'm expecting the image to be displayed in a column beside the row entries. But the image is getting displayed in a separate row.

Can any one please help me out on how to resolve this.


<table>
<tr>
<td>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
</tr>
</td>
<td>
<img src="test.png" />
</td>
</tr>
</table>

[pandy]

The table isn't right. There are TD and TR tags sprinkled a little at random.

CODE

<table>
<tr>
  <td>
    <tr>

The last TR above has nothing there to do. Remove it. The TD is superfluous too since you have a TD below.

CODE

      <td>One</td>
      <td>Two</td>
      <td>Three</td>
    </tr>
    <tr>
      <td>Four</td>
      <td>Five</td>
      <td>Six</td>
    </tr>
    <tr>
      <td>Seven</td>
      <td>Eight</td>
      <td>Nine</td>
    </tr>
  </td>

The above is fine upto the last </td>. Remove it.

CODE

  <td>
   <img src="test.png" />
  </td>

This is all wrong because it isn't in a table row.

CODE

</tr>
</table>

That's the correct way to finish a table.

If you want the image to the right of the text cells you need to add one more column. That means one more cell in one of the rows. The first seems suitable.

CODE

<table>
<tr>
  <td>One</td>
   <td>Two</td>
   <td>Three</td>
   <td rowspan="3"><img src="test.png" /></td>
</tr>

Since you have three rows in the table but want to melt the rightmost cells together for the image you use rowspan="3".


The principle is this. TABLE contains a number of TR. Each TR can contain a number of TD. The elments must come in that order. The TDs must add up for each row and each column (it's a grid). You use colspan or rowspan to melt cells together to a larger cell.

[weblogfinder]

Thanks for the detailed reply.

I would like to have the image to be independent of the table rows.

For this, Do i have to create another table?.

Because, With the above method height of table row is adjusted with the image present.

Let me know how i can proceed with this

[pandy]

Hard to guess since you had placed it in the table.

No, you don't need another table. You can use several approaches. One is to float either the table or the image, with the align attribute in HTML or better with CSS float. I'd float the table to the left rather than the image to the right. If you haven't started with CSS yet it's fine to stick to HTML 'align'.

http://htmlhelp.com/reference/html40/tables/table.html
http://htmlhelp.com/reference/css/box/float.html