[See it in action]
HTML
<div id="overlay">
<img src="http://www.sanbaldo.com/wordpress/wp-content/bigrotation2.gif"
id="img-load" />
</div>
CSS
#overlay {
display:none;
position:absolute;
background:#fff;
}
#img-load {
position:absolute;
}
Javascript
$t = $("#table"); // CHANGE it to the table's id you have
$("#overlay").css({
opacity : 0.5,
top : $t.offset().top,
width : $t.outerWidth(),
height : $t.outerHeight()
});
$("#img-load").css({
top : ($t.height() / 2),
left : ($t.width() / 2)
});
Then when you're loading things you just say:
$("#overlay").fadeIn();
And when you finished
$("#overlay").fadeOut();
Note: the loading image appears centered both
vertically and horizontally as requested. Only the table will have the
overlay not the whole page as requested.