MODUL IV, WEB 1

MEMBUAT TABEL
 

1.      TUJUAN
Mahasiswa dapat membuat table dan mengatur sel-sel dalam table untuk ditampilkan dalam dokumen web.
2.      TEORI SINGKAT
         Tabel biadanya digunakand alam  halaman web untuk memperindah tampilan ataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca. Untuk membuat table tag yang digunakan adalah

… yang berada diantara

.

3.      PRAKTEK
         a.      Membuat table sebagai berikut:

Satu baris satu kolom

  

         

  
100

Satu baris tiga kolom

  

         

         

         

  

100 200 300

Dua baris tiga kolom

  

         

         

         

  

  

         

         

         

  

Kolom 1 Kolom 2 Kolom 3
100 200 300

         PEMBAHASAN
Untuk memulai pembuatan sebuah tabel kita harus menggunakan tag

yang mempunyai arti bahwa kita melakukan create sebuah tabel. Suatu tabel tentu saja terdiri dari kolom dan baris. Pada tabel di atas adalah suatu statemen untuk menciptakan tabel dengan kriteria satu baris satu kolom. Dapat dilihat dari banyaknya pasangan … dan . Banyaknya pasangan … akan menunjukkan banyaknya baris dan Banyaknya pasangan akan menunjukkan banyaknya colom. Dapat kita hitung pada script di atas bahwa banyaknya pasangan

..
..

ada sebanyak tiga buah kemudian banyaknya pasangan

….

yang pertama adalah sebanyak 1 buah dan banyaknya pasangan

..

juga hanya satu buah. Artinya tabel tersebut terdiri dari satu baris dan satu kolom. Kenapa pada tampilan di bawah ini tidak terlihat adanya sebuah tabel. Itu karena tabel ini tidak dilengkapi dengan tag border yang akan memerintahkan agar tabel diberi garis tepi.

Kemudian pada tabel yang kedua yang ditandai dengan

….

yang kedua mempunyai pasangan

satu buah. Dan diantara tag tersebut terdapat pasangan

sebanyak 3 buah. Artinya bahwa dalam tabel yang kedua tersebut terdapat satu buah baris dan 3 buah kolom. Juga tidak kelihatan ada tabel di situ karena dalam belum ada taq border.

Untuk tabel yang ketiga terdapat pasangan

… sebanyak dua pasangan sedangkan pasangan diantara masing-masing … ada sebanyak 3 buah. Berarti tabel tersebut terdiri dari dua baris dan tiga kolom. Tidak terlihat juga karena dalam pemakaian

tidak menggunakan taq border. Perbedaannya dapat kita lihat pada hasil praktek script ke dua.

         Hasil Runing:
        
Penambahan perintah

pada masing-masing tabel dalam script di atas akan menghasilkan tampilan sebagaimana di bawah ini:

        
Jadi fungsi dari tag border=”1” mempunyai arti bahwa tabel yang dibuat akan diberi atribut garis sebesar 1 pixel yang ekan mengelilingi tabel. Apabila kita ganti nilai 1 diganti dengan angka 2 atau 3 atau yang lebih besar lagi maka tentu saja garis yang mengelilingi masing-masing tabel akan menjadi semakin besar.
Pada praktek berikutnya kita coba menambah satu tag lagi yaitu bgcolor=”aqua” sebagaimana di bawah. Hasilnya adalah bahwa setiap cell dalam tabel akan diberi background berwarna sesuai dengan value pada taq bgcolor. Kebetulan dari tiga tabel yang ada kita beri warna berbeda sehingga untuk tabel 1 bgcolornya berbeda dengan bgcolor pada tabel ke dua dan ke tiga, yaitu sebagai berikut:
        

        

        

        
Praktek 2. Menggabungkan kolom dan baris
Pada praktek di bawah ini kita akan membuat tabel dengan menggabungkan dua kolom menjadi satu.Tag yang digunakan adalah colspan dan row span. Colspan digunakan untuk menggabungkan beberapa kolom menjadi satu, sedangkan rowspan menggabungkan beberapa baris menjadi satu. Untuk sementara kita lihat dulu script di bawah ini contoh pembuatan dua buah tabel sebagai contoh penggunaan colspan pada tabel pertama dan cotoh penggunaan rowspan pada tabel kedua. Perintah colspan diberikan sebagai variabel pada tag

pertama. Artinya bahwa pada baris pertama sebenarnya terdapat tiga kolom namun karena kolom kedua dan ketiga telah digabungkan menjadi satu maka pada baris pertama tersebut hanya menjadi dua kolom. Yaitu cell kolom yang berisi ”Nama” dan cell kolom yang berisi ”Telepon”. Setelah itu kita membuat baris lagi dengan pasangan … kedua yang berisi 3 buah pasang . Artinya bahwa baris ke dua tersebut berisi 3 kolom tanpa ada yang digabung. Sehingga kolom kedua dan ketiga baris kedua terletak di bawah kolom kedua baris pertama.

Adapun pada tabel kedua kita lihat contoh penggabungan baris. Dengan perintah yang berpasangan dengan taq

… pertama kita mendapatkan tabel dengan dua kolom ditandai dengan adanya padangan kemudian . Kemudian pada baris berikutnya kita dapati perintah disambung artinya bahwa pada baris kedua kolom pertama digabungkan dengan baris ketiga jika nanti ada baris ketiga, sekaligus karena tag berbentuk … yang berisi satu pasang . Walaupun hanya terdapat satu pasangan namun pada baris ketiga tetap terdapat dua kolom, karena pada baris kedua sudah mengidentifikasikan bahwa jika ada baris ketiga, maka program akan mengidentifikasi dan menggabungkan dengan baris kedua diatasnya pada kolom yang sama. Dan pasangan yang muncul akan diidentifikaskan sebagai kolom kedua. Mari kita lihat hasil script di bawah ini, dengan adanya penambahan bgcolor dan border pada kedua tabel tersebut dengan value ”1” untuk border dan ”yellow” dan ”green” maka tabel tersebut mempunyai garis tepi tabel dan warga latar belakang kuning dan hijau untuk tabel kedua.

Gabungan dua kolom

tulisannya sebagai berikut (td colspan=”2”> artinya bahwa java script diperintahkan untuk menggabungkan dua buah kolom menjadi satu. Sedangkan script lanjutannya yaitu kata ”Telepon”, akan dituliskan pada cell hasil menggabungkan dua kolom tersebut. Kita lihat bahwa sebelu tag ada tag pada
yang tertulis . Pada baris pertama atau pasangan
Nama Muhammad Arief Telepon 7006255 maka akan ditebalkan karena diidentifikasi sebagai kepala tabel/kepala kolom. Dan selanjutnya kolom kedua akan dituliskan ”7006255”. Baris ketiga dibuat dengan pasangan tag
0274415156

    

        

        

    

    

        

        

        

    

Nama Telepon
Muhammad 7006255 0274415156

Gabungan dua baris

    

        

        

    

    

        

        

    

    

        

    

Nama Muhammad Arief
Telepon 7006255
0274415156

Hasil Script:
        
LATIHAN:

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

Daftar Warga
Warga Kota
Klaten Yogya Solo Wonogiri Ponorogo Malang
Jenis Kelamin Pria 30 20 30 22 19 9
Wanita 20 8 18 10 15 18

        
PEMBAHASAN:
Untuk latihan maka kita coba membuat tampilan tabel pada web dengan warna latar belakang merah pada web, perintah yang digunakan adalah . Selanjutnya kita membuat tabel dengan judul tabel font berwarna kuning berada diposisi tengah (center) dengan menggunakan perintah

yang artinya judul tabel berada di atas tabel kemudian ditebalkan dengan perintah atau Bold. Sedangkan warna judul tabel kuning merupakan hasil dari perintah .  Dan pada tabel ini jarak antar cell ditentukan dengan cellspacing dan cellpadding yang masing-masing berisi 1 pixel.

Dalam script di atas ditentukan latar belakang tabel adalah aqua atau biru muda/biru air yang terletak pada tag

. Selanjutnya kita mulai mendifinisikan baris dan kolom yang menjadi bagian dari tabel. Baris pertama digabungjan dengan baris kedua sekaligus kolom pertama digabungkan dengan kolom kedua juga, maka perintahnya adalah . Kemudian kita membuat enam buah kolom setelah kolom kedua namun keenam kolom ini juga digabungkan menjadi satu yang kemudian diberi tulisan ”Kota”, sintaknya adalah . Sehingga pada tabel ini terdapat delapan kolom, namun karena ada penggabungan dua macam, yaitu kolom satu dan kedua menjadi satu kolom, dan kolom ketiga sampai kolom ke delapan menjadi satu kolom maka hanya dapat dilihat bahwa tabel tersebut pada baris pertama terdiri dari dua kolom saja.

Selanjutnya kita membuat baris kedua, pada baris kedua ini kita tinggal melanjutkan dengan namun dengan ukuran lebar 80 pixel, sebagaimana berikut:
        

        

        

        

        

        

Sedangkan pada baris ketiga kita membuat baris dengan menggabungkan dua buah baris menjadi satu, yang terletak pada kolom pertama dan menuliskan dengan kata ”Jenis Kelamin” dengan lebar kolom 100 pixel. Perintahnya adalah

baru kemudian melanjutkan perintah untuk menulis kolom-kolom tersebut selengkapnya adalah:

        

        

        

        

        

        

        

        

Dan yang terakhir adalam menuliskan kolom ke dua sampai ke delapan sebagai berikut. Dapat dilihat diatas ketika pada

tidak diisi dengan bgcolor maka warna latar belakang tabel kembali pada warna default tabel yaitu aqua. Dan dibawah ini kita Cuma menuliskan 7 buah isian kolom karena kolom 1 baris ke 4 telah disatukan dengan baris ketiga kolom pertama juga.

 r>
        

        

        

        

        

        

        

TUGAS:
y>

Tugas Membuat tabel Praktikum Pengenalan Web

Warga Kota” Klaten Yogya Solo Wonogiri Ponorogo Malang Jenis Kelamin
Jenis Kelamin Pria 30 20 30 22 19 9
Wanita 20 8 18 10 15 18

    

        

        

    

    

        

        

    

         Namaku Muhammad Arief

         Alamatku Solo
        
tentangku

              

              

                     

              

              

              

              

              

              
Hobi
Memasak nyanyi

        

         Buah yang ku sukai:

        

            
  • apel
            
  • nanas
            
  • anggur
            
HELOOW Semua

         Hasil Tampiran Script.
                    
KESIMPULAN:
  • Penggunaan tabel untuk mendukung tata letak/layout sebuah web sangat diperlukan. Dengan tabel seorang web master dapat dengan mudah membagi tampilan sehingga nampak rapi seperti mempunyai bagian-bagian yang terpisah namun mempunyai satu kesatuan yang saling mendukung. Lebih mudah untuk menempatkan gambar, atau list daftar maupun tabel di dalam tabel dan teks tetap tertata rapi karena setiap cell dari tabel merupakan frame terpisah satu sama lain.
  • Dalam menggunakan script pembuatan tabel yang perlu diperhatikan adalah banyaknya simbol yang menyatakan pergantian baris serta / sebagai tanda awal dan akhir sebuah kolom. Selain itu perhatikan dalam menggunakan colspan dan rowspan suatu perintah untuk menggabungkan cell dalam tabel sesuai dengan kriterianya. Dan perhatikan juga bahwa fungsi tag dan sebenarnya sama dengan perintah dan yaitu sebagai pembatas colom. Namun fungsi dan adalah pembatas kolom yang dipergunakan untuk kepala tabel atau sering disebut kolom paling atas.
  • Kelincahan dalam menggunakan / mengatur tabel untuk memilah-milah antar bagian tampilan web memerlukan latihan yang cukup sehingga tampilan akan terlihat rapi dan nyaman untuk dilihat.
  • Dengan tabel akan 

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s