Untuk memasang image atau gambar pada table adalah mudah sekali.
Pertama pilih image atau gambar yang akan dipasang. Dan kemudian simpan dalam file yang sama dengan file yang akan diisi gambar tersebut.
Misalkan image yang akan dipasang adalah photo seperti disamping ini:
Ukuran photo ini adalah lebar = 150px dan tingginya = 206px.
Pertama pilih image atau gambar yang akan dipasang. Dan kemudian simpan dalam file yang sama dengan file yang akan diisi gambar tersebut.
Misalkan image yang akan dipasang adalah photo seperti disamping ini:
Ukuran photo ini adalah lebar = 150px dan tingginya = 206px.
Image ini akan kita pasang pada kolom 2B.
maka kita sisipkan <img title=”Hawaiian Girl” src=”Hawaiian Girl.jpg” alt=”Hawaiian Girl”/> mengantikan nama Kolom 2B.
alt=”Hawaiian Girl” diperlukan jika browser tidak dapat menampilkan image tersebut, maka akan tampil tulisanHawaiian Girl sebagai penggantinya.
Sedangkan title akan menampilkan tulisan jika panah diletakkan pada image tersebut. (Lihat tanda panah pada hasil gambar Belajar HTML Table Memasang Image)
maka kita sisipkan <img title=”Hawaiian Girl” src=”Hawaiian Girl.jpg” alt=”Hawaiian Girl”/> mengantikan nama Kolom 2B.
alt=”Hawaiian Girl” diperlukan jika browser tidak dapat menampilkan image tersebut, maka akan tampil tulisanHawaiian Girl sebagai penggantinya.
Sedangkan title akan menampilkan tulisan jika panah diletakkan pada image tersebut. (Lihat tanda panah pada hasil gambar Belajar HTML Table Memasang Image)
Oleh karena lebar gambar 150px dan tingginya 206px, maka kita taruh width=”150″ dan height=”206″ pada tag nya Kolom 2B itu. Supaya lebar dan tinggi kolomnya sesuai dengan lebar dan tinggi image yang akan dipasang.
Yang juga harus diperhatikan pada waktu memasang image pada table adalah nama pada image juga harus sama persis dengan nama yang ditulis pada img src. Sebab kalau namanya berbeda maka imagenya tidak akan muncul.
Misalnya nama imagenya Hawaiian.jpg, maka jangan ditulis sebagai hawaian.jpg. Perbedaan satu huruf saja akan menyebabkan image tidak muncul.
Yang juga harus diperhatikan pada waktu memasang image pada table adalah nama pada image juga harus sama persis dengan nama yang ditulis pada img src. Sebab kalau namanya berbeda maka imagenya tidak akan muncul.
Misalnya nama imagenya Hawaiian.jpg, maka jangan ditulis sebagai hawaian.jpg. Perbedaan satu huruf saja akan menyebabkan image tidak muncul.
Nah, setelah kita masukkan img src tadi, maka Kode HTML nya sekarang menjadi seperti ini:
<html>
<head>
<title>Belajar HTML Table</title>
</head>
<body>
<table border=”2″ width=”450″>
<tr>
<td colspan=”3″ bgcolor=”#FF9900″>Kolom 1+2+3 </td>
</tr>
<tr>
<td rowspan=”2″>Kolom 1A<br />+Kolom 1B</td>
<td>Kolom 2A</td>
<td>Kolom 3A<br />+Kolom 3B</td>
</tr>
<tr>
<td width=”150″ height=”206″>
<img title=”Hawaiian Girl” src=”Hawaiian-Girl.jpg” alt=”Hawaiian Girl”>
</td>
</tr>
<tr>
<td>Kolom 1C</td><td>Kolom 2C</td><td>Kolom 3C</td>
</tr>
</table>
</body>
</html>
Dan tampilannya sekarang adalah seperti ini :
Tidak ada komentar:
Posting Komentar