在網頁設計中，常常需要使用表格來展示數據。但是僅僅顯示一張普通的表格很容易顯得單調和乏味。為了增加頁面的視覺效果，我們可以將表格設置在圖片上。

<style>
.table-wrap {
position: relative;
}
.table-wrap img {
display: block;
max-width: 100%;
}
.table-wrap table {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="table-wrap">
<img src="table-bg.jpg" alt="table background">
<table>
<tr>
<th>姓名</th>
<th>電話</th>
<th>地址</th>
</tr>
<tr>
<td>張三</td>
<td>13888888888</td>
<td>北京市海淀區</td>
</tr>
<tr>
<td>李四</td>
<td>13999999999</td>
<td>上海市浦東新區</td>
</tr>
</table>
</div>

以上是一個示例代碼，通過設置表格外層div的position屬性來定位，使圖片作為div背景。通過絕對定位的方式將表格定位在圖片的中心位置，以達到很好的效果。