Web sitenize HTML'nin tablo etiketlerini kullanarak, responsive bir şekilde yan yana resimler eklemek isteyebilirsiniz. Normalde bildiğiniz gibi, "table" parametresi responsive değil ve bunun için de birtakım CSS kodları kullanmak gerekmektedir.

Aşağıdaki kodları kullanarak, Internet Explorer dahil, birçok tarayıcı ile uyumlu ve yan yana responsive resim ekleme işlemini kolaylıkla gerçekleştirebilirsiniz. Örnek bir kullanım aşağıda yer almakta olup, ilgili resim linklerini ise kendinize göre güncellemeyi lütfen unutmayınız.

AYRICA: HTML Tablo Yapısındaki Boşlukları Kaldıralım

Yan Yana Responsive Resim Ekleme Nasıl Yapılır?

1) CSS kodlarımız aşağıdaki gibi olacaktır.

img {
height: auto;
max-width: 100%;
}
.image-table {
border: 0px solid rgba(0, 0, 0, 0);
border-collapse: separate;
border-spacing: 6px;
table-layout: fixed;
text-align: center;
width: 100%;
}
.image-table img {
border: 10px solid #fff;
box-sizing: border-box;
-webkit-box-shadow: 0 0 10px #999;
box-shadow: 0 0 10px #999;
}

2) HTML kodlarımız ise aşağıdaki gibidir.

<table class="image-table">
<tbody>
<tr>
<td>
<img src="resim-linki-1" alt="Açıklama" title="Başlık">
</td>
<td>
<img src="resim-linki-2" alt="Açıklama" title="Başlık">
</td>
<td>
<img src="resim-linki-3" alt="Açıklama" title="Başlık">
</td>
</tr>
</tbody>
</table>


Not: Yukarıdaki kırmızı alanları değiştirmeyi unutmayınız.