Minggu, 01 April 2012
Mengatur Letak Image Dalam Kolom
Letak Image dalam kolom dapat diatur sesuai dengan tempat yang kita inginkan.
Secara default image akan berada dibagian kiri-tengah pada bidang gambar atau kolom.
Pada posting yang lalu, yaitu Memasang Image, ukuran kolom sudah sengaja dibuat sama dengan ukuran image. Jadi otomatis image akan berada tepat pada kolom yang disediakan.
Tapi apabila ukuran kolom lebih besar daripada ukuran image, maka image akan berada pada bagian kiri-tengah kolom.
Sekarang kita sediakan image yang akan dipasang. Misalnya image peragawati disamping kiri ini yang ukurannya lebar = 100px dan tinggi = 215px.
Kemudian sebagai contoh saya akan membuat sebuah table sederhana dengan satu kolom yang ukurannya lebar = 450px dan tinggi = 450px.
Kode HTML nya adalah sbb:
<html>
<body>
<table border=”2″ width=”450″ height=”450″ bgcolor=”#99CCFF”>
<tr>
<td>
<img src=”peragawati.jpg” width=”100″ height=”215″>
</td>
</tr>
</table>
</body>
</html>
Tampilannya adalah seperti ini:
Karena posisi image tidak ditentukan, maka image akan berada dibagian kiri-tengah kolom.
Untuk mengubah letak image dipakai kode tambahan align dan/atau valign.
Align untuk menentukan posisi image disebelah kiri, tengah atau kanan pada kolom. Kodenya seperti ini: align=”center” untuk meletakkan image ketengah dan align=”right” untuk meletakkan image kesebelah kanan.
Sedangkan untuk meletakkan image dibagian kiri kolom tidak perlu ditulis. Tapi kalau mau ditulis align=”left” juga boleh meskipun sebetulnya secara default image akan terletak dibagian kiri-tengah dalam kolom.
Align untuk menentukan posisi image disebelah kiri, tengah atau kanan pada kolom. Kodenya seperti ini: align=”center” untuk meletakkan image ketengah dan align=”right” untuk meletakkan image kesebelah kanan.
Sedangkan untuk meletakkan image dibagian kiri kolom tidak perlu ditulis. Tapi kalau mau ditulis align=”left” juga boleh meskipun sebetulnya secara default image akan terletak dibagian kiri-tengah dalam kolom.
Valign adalah untuk menentukan letak image disebelah atas, tengah atau bawah pada kolom. Kode yang bisa ditulis untuk valign adalah valign=”top” untuk meletakkan image di bagian sebelah atas kolom, valign=”middle” untuk meletakkan image dibagian tengah kolom dan valign=”bottom” supaya image berada dibagian bawah kolom.
Align dan valign juga bisa digabungkan dalam mengatur letak image. Misalnya align=”right” valign=”bottom” maka image akan berada disudut kanan-bawah pada kolom.
Mari kita buat sebuah kolom html table dengan image yang kita letakkan dibeberapa tempat didalam kolom.
Image A: ditengah kolom; kodenya: align=”center”
Image B: di kiri-atas kolom; kodenya: valign=”top”
Image C: di kanan-bawah kolom; kodenya: align=”right” valign=”bottom”
Image A: ditengah kolom; kodenya: align=”center”
Image B: di kiri-atas kolom; kodenya: valign=”top”
Image C: di kanan-bawah kolom; kodenya: align=”right” valign=”bottom”
Image A
<html>
<body>
<table border=”2″ width=”450″ height=”450″ bgcolor=”#99CCFF”>
<tr>
<td align=”center”>
<img src=”peragawati.jpg” width=”100″ height=”215″>
</td>
</tr>
</table>
</body>
</html>
<body>
<table border=”2″ width=”450″ height=”450″ bgcolor=”#99CCFF”>
<tr>
<td align=”center”>
<img src=”peragawati.jpg” width=”100″ height=”215″>
</td>
</tr>
</table>
</body>
</html>
Letaknya seperti ini:
<html>
<body>
<table border=”2″ width=”450″ height=”450″ bgcolor=”#99CCFF”>
<tr>
<td valign=”top”>
<img src=”peragawati.jpg” width=”100″ height=”215″>
</td>
</tr>
</table>
</body>
</html>
Tampilannya :
<body>
<table border=”2″ width=”450″ height=”450″ bgcolor=”#99CCFF”>
<tr>
<td valign=”top”>
<img src=”peragawati.jpg” width=”100″ height=”215″>
</td>
</tr>
</table>
</body>
</html>
Tampilannya :
Sekarang Anda sudah tahu cara mengatur Letak Image dalam Belajar HTML Table.
Silahkan mencoba sendiri dengan berbagai kombinasi align dan valign.
Selamat ber experiment!
Yang Surya
Silahkan mencoba sendiri dengan berbagai kombinasi align dan valign.
Selamat ber experiment!
Yang Surya
0 komentar:
Posting Komentar