Question

Say I have a table:

  <table id="table1" border="1">
    <tr>
      <td id='id1'  style="width:200px"></td>
      <td id='id2'  style="width:200px">2222</td> 
    </tr>

  </table>

I am using following code to add images to these table cells

$('#id1').append('<img src=images/image1.jpg />');
$('#id1').append('<img src=images/image2.jpg />');
$('#id1').append('<img src=images/image3.jpg />');

$('#id2').append('<img src=images/image4.jpg />');

Now what I want to achieve is this:
1. for cell “id2”, i want the image always align to the right so it’s not next to the text.
2. for cell “id1”, since those 3 images has different sizes (24×24, 32×32, 24×24), i don’t want them to be next to each other. what I want is that as if there are 3 small cells in that cell, each with size 32×32, and put those images into those small cells one by one.

I am not good at html or javascript. is it possible to do so?

Answer 1

CSS

#id2 img { float: right; }

HTML

    <table id="table1" border="1">
    <tr>
      <td id='id1'  style="width:200px"><table><tr></tr></table></td>
      <td id='id2'  style="width:200px">2222</td> 
    </tr>
  </table>

Javascript

$('#id1').find('tr').append('<td><img src=images/image1.jpg /></td>');
...