[RESOLVED]align image in table after text.

CSS, HTML, Image, Post, Table, Web Forms, , , , ,

Hi. I just need to have a <td>texttttt <image> </td> but i need the image to align in the same horizontal position in every td

so i need that:

Textextextext IMAGE

textt IMAGE

to be like

Texttextet IMAGE

Text         IMAGE

what i have

  <style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}

table td img
{
   
    vertical-align: middle;
    display: inline-block;
     text-align: center;
    
}
                     </style>
</head>

-----etc
<table  style="width:50%; border:1px solid" class="tg">                                  
                     <tr>                  
                     <th colspan="2" bgcolor="#AE5454" style="font-weight:bold;">
                     -TOTAL  ALL SITES : 19856 
                     </th>
                     </tr>
<tr>
<td style="width:50%;">
Myfirsttext
</td>
  
<td style="width:50%;" >
4264 &nbsp <img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
</td>

</tr>

<tr>
<td style="width:50%;">
Mysecondtext
</td>
  
<td style="width:50%;" >
27074 &nbsp <img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
</td>
---etx

obviously &nbsp will go but i put it as a test here.

Thanks.

You can put the images in to another td like given below so that it will start at same point

<table style="width: 50%; border: 1px solid" class="tg">
    <tr>
        <th colspan="2" bgcolor="#AE5454" style="font-weight: bold;">
            -TOTAL ALL SITES : 19856
        </th>
    </tr>
    <tr>
        <td style="width: 50%;">
            Myfirsttext
        </td>
        <td style="width: 20%;">
            4264 &nbsp
        </td>
        <td style="width: 30%;">
            <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
            <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
            <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
            <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
        </td>
    </tr>
    <tr>
        <td style="width: 50%;">
            Mysecondtext
        </td>
        <td style="width: 20%;">
            27074 &nbsp
        </td>
        <td style="width: 30%;">
            <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
            <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
            <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
            <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
            <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
        </td>
</table>

Hi sapator,

Thanks for your post.

sapator

I just need to have a <td>texttttt <image> </td> but i need the image to align in the same horizontal position in every td

As for your problem, we could put contents and images in two block elements then make them float to left or right.

.content {
    display: block;
    width: 60px;
    float: left;
}
.imgs{
    display:block;
    float:left;
} 

<div>
    <table style="width: 50%; border: 1px solid" class="tg">
        <tr>
            <th colspan="2" bgcolor="#AE5454" style="font-weight: bold;">-TOTAL  ALL SITES : 19856 
            </th>
        </tr>
        <tr>
            <td style="width: 50%;">Myfirsttext
            </td>

            <td style="width: 50%;"><span class="content">4264</span> &nbsp
                <div class="imgs">
                    <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
                    <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
                    <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
                    <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
                </div>
            </td>

        </tr>

        <tr>
            <td style="width: 50%;">Mysecondtext
            </td>

            <td style="width: 50%;"><span class="content">27074</span> &nbsp
                <div class="imgs">
                    <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
                    <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
                    <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
                    <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
                    <img src="image_temp/film_reel.png" alt="" height="12" width="12" />
                </div>
            </td>
        </tr>
    </table>
</div>

If you have any question about this issue, please post back freely.

Best Regards,

Fei Han

Hi sapator,

Although I agree with Mr.A2H, you need to modify  your code as below,

       

 <tr>
         <th colspan="3" bgcolor="#AE5454" style="font-weight: bold;">

              -TOTAL ALL SITES : 19856

         </th><!--change the colspan into 3-->

  </tr>

Above code will merge the first row of cells to your requirements .

Best regards,

Aswecan

will have a look. I always used the 3rd td but i was hoping for a simple solution but i guess is ok if it work. However i would like NOT to show the vertical table lines so it would be

text    image  and not    text   | image  .

I hope border =0 will do that?

Ok went with 3rd td but i also have an issues here, if you don’t mind taking a look

http://forums.asp.net/p/2014396/5797628.aspx?p=True&t=635496392152233661&pagenum=1

Leave a Reply