Paskan gambar ke sel tabel [HTML Murni]
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, 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;
}
