CSS左邊圖右邊表是一種常見的網頁布局方式，可以讓網頁呈現出美觀舒適的視覺效果。下面我們將詳細介紹如何采用該布局：

<style type="text/css">
.container {
display: flex;
flex-direction: row;
align-items: center;
}
.image {
margin-right: 20px;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table td, .table th {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.table th {
background: #f2f2f2;
}
</style>
<div class="container">
<img src="left-image.jpg" class="image" />
<table class="table">
<tr>
<th>姓名</th>
<th>年齡</th>
<th>城市</th>
</tr>
<tr>
<td>張三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</table>
</div>

我們首先創建一個 div 容器，將圖像和表格放入其中。通過 flexbox 布局，使其成為一個水平排列的盒子。我們將 img 元素設置為一個類 image，將其右邊的距離 margin-right 設置為 20 像素，以便圖像和表格之間有足夠的間距。我們將表格設置為 100% 的寬度，并且隱藏表格中的邊框線條（即合并為一行）。

最后，我們為表頭和表格的單元格分配樣式樣式，以使其更具有可讀性和美觀性。通過使用這種布局方式，我們可以輕松地在網頁中創建有吸引力的圖像和表格組合，提供更好的信息呈現和易于閱讀的界面。