Sunday, May 23, 2010

Menyisipkan Gambar Pada Tabel

Lagi-lagi tutorial blog dasar ini saya tulis khusus bagi blogger pemula. Topik kali ini adalah cara menyisipkan gambar pada tabel dimana kondisi seperti ini biasanya diperlukan ketika akan menampilkan banyak gambar sebagai galeri agar tata letak gambar menjadi lebih rapih.

Untuk mengatur tata letak gambar agar tampil rapih bisa juga menggunakan bantuan CSS tanpa tabel sama sekali, tetapi saya pikir bagi pemula akan lebih mudah menggunakan tabel.

Bagi sobat yang baru pertama kali menggunakan tabel sebagai salah satu kode HTML, bisa mempelajari terlebih dahulu cara membuat tabel dengan HTML.

Di bawah ini adalah contoh setelah dipublikasikan 6 buah gambar yang diletakan di dalam sebuah tabel disertai link URL. Link URL tersebut nantinya dapat berupa situs atau gambar itu sendiri teapi dengan ukuran yang lebih besar.


Indahnya Berbagi Dinding Coret
Diptara Jabar View
Pujiono Personal Blog Republik Blogger

Di bawah ini adalah kode HTML untuk menyisipkan gambar pada tabel seperti di atas yang terdiri dari 2 kolom dan 3 baris.



Penjelasan:
  1. Pembuatan table dimulai dengan tag <table> dan diakhiri tag </table>
  2. Atribut border berfungsi untuk mengatur ketebalan garis tepi tabel yang dapat disesuaikan dengan kebutuhan misalnya border="1", border="2", border="3" dan seterusnya. Border="0" artinya tabel tersebut tidak memiliki garis tepi.
  3. Target="_blank" berfungsi saat click dilakukan pada gambar, maka akan terbuka URL terkait tetapi pada tab atau jendela baru, kalau dihilangkan atau diganti dengan target="self" maka URL akan terbuka pada jendela yang sama.
  4. Atribut cellpadding untuk mengatur jarang tepi setiap kolom dengan konten dalam hal ini jarak tabel dan gambar yang ada di dalamnya.
  5. Atribut cellspacing berfungsi untuk mengatur jarak antar kolom dan baris.
  6. Ganti URL1, URL2,....URL6 dengan Link URL gambar pada saat nanti diclick.
  7. Ganti gambar1, gambar2,...gambar6 dengan alt yang sesuai dengan gambar.
  8. Ganti URL Gambar 1, URL Gambar 2,...URL Gambar 6 dengan URL gambar Anda sendiri.
  9. Ganti Title Gambar 1, Title Gambar 2,...Title Gambar 3 dengan Title Gambar Anda sendiri.
Selamat mencoba. Semoga bermanfaat.