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][1], gambar tersebut tidak muat ke dalam sel td.

Tangkapan layar:

Apa yang saya lakukan salah?

Saran apa pun akan luar biasa.

Pemrograman
html
30 Juni 2013 в 5:40
11 tayangan
Larutan

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;

atau gunakan vertical-align: bottom;

lrineau
Jawaban edit 27 November 2014 в 10:50
Komentar (1)

Ini semua tentang display: block :)

Diperbarui:

Ok, jadi Anda memiliki tag tabel, tr dan td:

<table>
  <tr>
    <td>

    </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;
}
lrineau
Jawaban edit 27 November 2014 в 10:48
Komentar (4)

Gunakan alat pilihan pengembang Anda dan periksa apakah tr, td atau img memiliki padding atau margin.

Komentar (2)