在網頁設計中，經常需要將一張圖片和一段文字組合在一起展示。這時，我們可以使用HTML左圖右字的布局方式，讓我們來看看該如何實現：

<div class="pic-text">
<img src="your-image-src.jpg" alt="your-image-alt">
<p>your-text-here</p>
</div>

以上就是HTML左圖右字的布局代碼。從代碼中可以看出，我們將圖片和文字都包含進了一個div容器中，再通過CSS樣式來控制圖片和文字的布局位置。

除了使用div容器外，我們還可以使用HTML表格標簽來實現左圖右字的布局：

<table>
<tr>
<td><img src="your-image-src.jpg" alt="your-image-alt"></td>
<td><p>your-text-here</p></td>
</tr>
</table>

使用表格標簽可以實現更精細的布局控制，可以通過修改表格的colspan和rowspan來達到不同形式的左圖右字效果。但需要注意的是，表格布局的缺點是代碼量較多，不夠簡潔明了。

在實際項目中，為保證網頁布局的統一性和可復用性，我們通常通過CSS樣式表來控制左圖右字布局的樣式，例如：

.pic-text {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 20px;
}
.pic-text img {
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
}
.pic-text p {
font-size: 18px;
color: #333;
margin-left: 20px;
}

以上CSS樣式代碼可以實現一個圖片和文字左右對齊、垂直居中顯示，并具有一定的響應式效果（當瀏覽器寬度縮小時，圖片和文字會自適應調整大小）。通過CSS樣式的控制，我們可以實現不同風格的左圖右字效果，為網頁布局增添了更多的靈活性和美感。