如何將圖像置於html表中

我想通過html表格和中心顯示圖像。如何實現這一目標？這個圖像不過是一個進度條。所以這個圖像會在加載時出現在html表格上。我嘗試像下面這樣，但它不是通過html表和中心的表。如何將圖像置於html表中

<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>

希望它澄清我的問題。讓我知道你是否需要更多信息。

UPDATE1

現在我已經加入圖像上表，而不是TD，但仍然沒有顯示出來

UPDATE2 我通過Ajax調用數據加載到我的jQuery模板。不知道是否需要顯示我的代碼的Ajax調用。因此圖像會出現數據被加載時，它應該熄滅時，其成品裝載

來源

2013-07-18 Happy

你所需要的進度條在桌子加載時出現在桌子的頂部，在加載結束後消失完成了嗎？您可能需要使用JavaScript。你是說圖像沒有加載或僅在桌子中央加載？ –

把圖像放在一個div中，然後將它懸浮在表格頂部 – prospector

@HarikrishnanT你說得很對。這個怎麼做？ – Happy

在樣式屬性，只需添加：

background-position: center center;

所以beacame：

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

在這裏閱讀更多 - >http://www.w3schools.com/cssref/pr_background-position.asp

ps：如果您是合成的，則樣式屬性會更好，因此您可以用這種方法寫所有

這裏

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

看，學習如何「背景」屬性的工作 - >http://www.w3schools.com/css/css_background.asp

編輯：

如果wantto把加載IMG的標籤，並將其放置在TD的中心，你必須分配給圖像這種風格：

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

但是，請給該圖像的類，並在css文件中寫入樣式。

來源

2013-07-18 07:27:55 PaoloCargnin

所以你把它放在一個圖像上，這樣你就不得不在加載準備好的時候刪除它，我在註釋中寫下了img標籤的正確樣式。 – PaoloCargnin

我想你只需要添加：

position: relative表
background-position: center center; position: absolute; left: 0; right: 0; left: 0; bottom: 0;您TD

所以，你的代碼將是：

<div style="overflow: auto;height: 400px"> 
    <table id ="tbl" style="position: relative; width: 100%;" > 
     <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 style="background-image: url(img/img1.gif); background-position: center center; position: absolute; left: 0; right: 0; left: 0; bottom: 0;"></td> 
      <td>${Name}</td> 
     </tr> 
     </script> 

     <tbody id="List"> 
     </tbody> 
    </table> 
</div>

來源

2013-07-18 07:33:18

你可以修改我的代碼嗎？ – Happy

是沒問題。我編輯了我的答案。 –

它根本沒有加載圖像。我通過wcf服務將數據加載到jquery模板中。所以我希望我的圖像在加載數據時加載，並且圖像在完成時應該關閉 – Happy

如何將圖像置於html表中

回答

相關問題