Tulisan ini akan menjelaskan prosedur untuk menambahkan gambar di dalam sel tabel dalam HTML.
Bagaimana cara menambahkan gambar di dalam sel tabel di HTML?
HTML-nya ” digunakan untuk menyisipkan gambar ke dalam sel tabel.
Sintaksis
Ikuti sintaks untuk menyematkan gambar di dalam sel tabel:
< td >< img src = '' semuanya = '' lebar = '' >< / td >
Di Sini:
- “
” elemen menunjukkan sel tabel tempat gambar perlu ditambahkan. - “
” tag digunakan untuk menentukan gambar.
- “ src ” atribut mengatur jalur gambar.
- “ semuanya ” menandakan teks yang akan ditampilkan di layar jika gambar gagal dimuat.
- “ lebar ” menentukan lebar gambar.
Contoh
Di file HTML, buat tabel dengan mengikuti petunjuk yang diberikan:
- “
” digunakan untuk membuat tabel. - “
” elemen menentukan baris. - “
” menyesuaikan tajuk di mana “ colspan ” properti menandakan berapa banyak kolom yang harus dicakup oleh sel. - “
” membuat sel tabel untuk data. “ ” tag dengan atribut yang diperlukan disisipkan di dalam tag ini untuk menyematkan gambar dalam sel tabel: < meja >
< tr >
< th colspan = '3' gaya = 'ukuran font: 28px;' >Buah dan Sayuran< / th >
< / tr >
< tr >
< th >Nama< / th >
< th gaya = 'lebar: 250px;' >Gambar< / th >
< th > Buah / Sayuran< / th >
< / tr >
< tr >
< td >Apel< / td >
< td >< img src = '/images/apel.jpg' semuanya = 'apel' lebar = '200' >< / td >
< td >Buah< / td >
< / tr >
< tr >
< td >Wortel< / th >
< td >< img src = '/images/wortel.jpg' semuanya = 'wortel' lebar = '200' >< / th >
< td >sayuran< / th >
< / tr >
< tr >
< td >Jeruk< / th >
< td >< img src = '/images/orang.jpg' semuanya = 'jeruk' lebar = '200' >< / th >
< td >Buah< / th >
< / tr >
< / meja >Dapat diamati bahwa tabel HTML telah berhasil dibuat bersama dengan gambar yang disematkan:
CSS
Sekarang, kita akan membahas properti CSS yang digunakan untuk mengatur tata letak tabel.
Elemen gaya 'meja'.
Pertama, akses “
meja {” dengan nama tag dan terapkan properti berikut:
perataan teks : tengah ;
lebar : 800px ;
perbatasan-runtuh : runtuh ;
batas : mobil ;
ukuran huruf : 20px ;
}Deskripsi kode di atas diberikan di bawah ini:
- “ perataan teks ” menyetel perataan teks.
- “ lebar ” menentukan lebar tabel.
- “ perbatasan-runtuh ” properti menentukan apakah perbatasan runtuh atau tidak.
- “ batas ” menambah ruang di sekeliling meja.
- “ ukuran huruf ” menentukan ukuran font teks tabel.
Elemen gaya 'th' dan 'td'.
th , td {
berbatasan : 1px padat ungu ;
}Di sini, “ berbatasan ” menyesuaikan batas di sekitar elemen dengan menentukan nilai untuk lebar, gaya, dan warna batas.
Keluaran
Posting ini adalah tentang menyisipkan gambar di sel tabel dalam HTML.
Kesimpulan
Untuk menambahkan gambar di dalam “
' sel, gunakan ' ' tag dalam HTML '
” elemen. Elemen “ ” menentukan “ src ” untuk menyediakan URL gambar. Lebih khusus lagi, untuk menyesuaikan ukuran gambar, tambahkan “ tinggi ' dan ' lebar ” di dalam tag “
”. Blog ini telah mengilustrasikan prosedur untuk menambahkan gambar di sel tabel HTML.
- “
- “