Bagaimana cara memasukkan gambar ke sel tabel td
? [HTML Murni]
Saya telah mencoba kode di bawah ini untuk memasukkan gambar ke dalam sel tabel td
.
Kode HTML ada di sini:
<table border="1" bordercolor="#aaa" cellspacing="0" cellpadding="0">
<tr>
<td><img width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" /></td>
</tr>
</table>
Seperti yang dapat Anda lihat di screenshot berikut dan di [JsFiddle DEMO][1], gambar tersebut tidak muat ke dalam sel td
.
Tangkapan layar:
Apa yang saya lakukan salah?
Saran apa pun akan luar biasa.
Konten sebaris menyisakan ruang di bagian bawah untuk karakter yang turun (j, y, q):
https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps
Ada beberapa perbaikan:
Gunakan display: block;
<img style="display:block;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
atau gunakan vertical-align: bottom;
<img style="vertical-align: bottom;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
Ini semua tentang display: block
:)
Diperbarui:
Ok, jadi Anda memiliki tag tabel, tr dan td:
<table>
<tr>
<td>
<!-- your image goes here -->
</td>
</tr>
</table>
Katakanlah table
atau td
(apapun yang menentukan lebar Anda) memiliki properti width: 360px;
. Sekarang, ketika Anda mencoba mengganti komentar html dengan gambar yang sebenarnya dan mengatur properti gambar itu misalnya width: 100%;
yang seharusnya mengisi penuh sel td
Anda akan menghadapi masalah.
Masalahnya adalah sel tabel Anda (td
) tidak terisi gambar dengan benar. Anda akan melihat ruang di bagian bawah sel yang tidak tertutupi oleh gambar Anda (paddingnya seperti 5px).
**Bagaimana cara mengatasi hal ini dengan cara yang paling sederhana?
Anda bekerja dengan tabel, bukan? Anda hanya perlu menambahkan properti display ke gambar Anda sehingga gambar Anda memiliki properti berikut:
img {
width: 100%;
display: block;
}