how to centre image over html table -

i want show image on html table , in centre. how achieve this? image nothing progress bar. image appear on html table while loading. tried below not coming on html table , in center of table.

<div style="overflow: auto;height: 400px">     <table id ="tbl"  style="width: 100%;background-image: url(img/busyindicator.gif);background-repeat: no-repeat;background-position: center" >         <colgroup>             <col style="width: 30px"/>             <col style="width: 10px"/>             <col style="width: 1px" />             <col style="width: 80px"/>             <col/>         </colgroup>         <script id="template" type="text/x-jquery-tmpl">         <tr >             <td>${id}</td>             <td>${age}</td>             <td></td>             <td>${name}</td>         </tr>         </script>          <tbody id="list">         </tbody>     </table> </div> 

hope clarifies question. let me know if need more info.

update1

i have added image on table instead of td still not showing up

update2 loading data jquery template via ajax call. not sure if need show code ajax call. image should appear when data loading , should go off when finished loading

in style property, add:

background-position: center center; 

so beacame:

<td style="background-image: url(img/img1.gif); background-position: center center" ></td> 

read more here -> http://www.w3schools.com/cssref/pr_background-position.asp

ps: in style attribute better if synthetic, can write in way

background: url(img/img1.gif) center center;  

look here learn how "background" property work -> http://www.w3schools.com/css/css_background.asp

edit:

if wantto put loading img in tag , position in center of td, have assign image style:

style="display:table-cell;vertical-align:middle; margin:auto" 

but, please, give class on image , write style in css file.