05.36
willy_anwar
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:
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.
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”
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
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>Tampilannya adalah seperti ini:
<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>
Mengatur Letak Image
|
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.
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
<html>Letaknya seperti ini:
<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>
Meletakkan Image di Tengah Kolom Belajar HTML Table
|
Image B
<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>
Meletakkan Image di bagian Atas Kolom Belajar HTML Table
|
Image C
<html>Letak image nya seperti dibawah ini:
<body>
<table border=”2″ width=”450″ height=”450″ bgcolor=”#99CCFF”>
<tr>
<td align=”right” valign=”bottom”>
<img src=”peragawati.jpg” width=”100″ height=”215″>
</td>
</tr>
</table>
</body>
</html>
Meletakkan image di bagian kanan-bawah kolom HTML Table
|
Silahkan mencoba sendiri dengan berbagai kombinasi align dan valign.
Selamat ber experiment!
Yang Surya
0 komentar:
Posting Komentar