MODUL IV, WEB 1

MEMBUAT TABEL
 

1.      TUJUAN
Mahasiswa dapat membuat table dan mengatur sel-sel dalamtable untuk ditampilkan dalam dokumen web.
2.      TEORISINGKAT
         Tabel biadanya digunakand alam  halaman web untuk memperindah tampilanataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enakdibaca. Untuk membuat table tag yang digunakan adalah

…yang berada diantara

.

3.      PRAKTEK
         a.      Membuattable sebagai berikut:

Satu baris satukolom

  

         

  
100

Satu baris tigakolom

  

         

         

         

  

100 200 300

Dua baris tigakolom

  

         

         

         

  

  

         

         

         

  

Kolom 1 Kolom 2 Kolom 3
100 200 300

         PEMBAHASAN
Untuk memulai pembuatan sebuah tabel kita harusmenggunakan tag

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

..
..

ada sebanyak tiga buah kemudian banyaknya pasangan

….

yang pertama adalah sebanyak1 buah dan banyaknya pasangan

..

juga hanya satu buah.Artinya tabel tersebut terdiri dari satu baris dan satu kolom. Kenapa padatampilan di bawah ini tidak terlihat adanya sebuah tabel. Itu karena tabel initidak dilengkapi dengan tag border yang akan memerintahkan agar tabel diberigaris 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 keduatersebut terdapat satu buah baris dan 3 buah kolom. Juga tidak kelihatan adatabel di situ karena dalam belum ada taq border.

Untuk tabel yang ketiga terdapat pasangan

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

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

         HasilRuning:
        
Penambahan perintah

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

        
Jadi fungsi dari tag border=”1” mempunyai arti bahwatabel yang dibuat akan diberi atribut garis sebesar 1 pixel yang ekanmengelilingi tabel. Apabila kita ganti nilai 1 diganti dengan angka 2 atau 3atau yang lebih besar lagi maka tentu saja garis yang mengelilingimasing-masing tabel akan menjadi semakin besar.
Pada praktek berikutnya kita coba menambah satu tag lagiyaitu bgcolor=”aqua” sebagaimana di bawah. Hasilnya adalah bahwa setiap celldalam tabel akan diberi background berwarna sesuai dengan value pada taqbgcolor. Kebetulan dari tiga tabel yang ada kita beri warna berbeda sehinggauntuk 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 denganmenggabungkan dua kolom menjadi satu.Tag yang digunakan adalah colspan dan rowspan. Colspan digunakan untuk menggabungkan beberapa kolom menjadi satu,sedangkan rowspan menggabungkan beberapa baris menjadi satu. Untuk sementara kitalihat dulu script di bawah ini contoh pembuatan dua buah tabel sebagai contohpenggunaan colspan pada tabel pertama dan cotoh penggunaan rowspan pada tabelkedua. Perintah colspan diberikan sebagai variabel pada tag

pertama. Artinya bahwa pada baris pertama sebenarnya terdapattiga kolom namun karena kolom kedua dan ketiga telah digabungkan menjadi satumaka pada baris pertama tersebut hanya menjadi dua kolom. Yaitu cell kolom yangberisi ”Nama” dan cell kolom yang berisi ”Telepon”. Setelah itu kita membuatbaris lagi dengan pasangan … kedua yang berisi 3 buahpasang . Artinya bahwa baris ke dua tersebut berisi 3kolom tanpa ada yang digabung. Sehingga kolom kedua dan ketiga baris keduaterletak di bawah kolom kedua baris pertama.

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

… pertama kita mendapatkan tabel dengan dua kolomditandai dengan adanya padangan kemudian. Kemudian pada baris berikutnya kita dapatiperintah disambung artinya bahwa pada baris kedua kolom pertamadigabungkan dengan baris ketiga jika nanti ada baris ketiga, sekaligus karenatag berbentuk … yangberisi satu pasang . Walaupun hanya terdapatsatu pasangan namun pada baris ketiga tetap terdapatdua kolom, karena pada baris kedua sudah mengidentifikasikan bahwa jika adabaris ketiga, maka program akan mengidentifikasi dan menggabungkan dengan bariskedua diatasnya pada kolom yang sama. Dan pasangan yang muncul akan diidentifikaskan sebagai kolom kedua. Mari kita lihat hasilscript di bawah ini, dengan adanya penambahan bgcolor dan border pada keduatabel tersebut dengan value ”1” untuk border dan ”yellow” dan ”green” makatabel tersebut mempunyai garis tepi tabel dan warga latar belakang kuning danhijau untuk tabel kedua.

Gabungandua kolom

tulisannya sebagai berikut (td colspan=”2”> artinya bahwa java scriptdiperintahkan untuk menggabungkan dua buah kolom menjadi satu. Sedangkan scriptlanjutannya yaitu kata ”Telepon”, akan dituliskan pada cell hasil menggabungkandua 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 sebagaikepala tabel/kepala kolom. Dan selanjutnya kolom kedua akan dituliskan”7006255”. Baris ketiga dibuat dengan pasangan tag
0274415156

    

        

        

    

    

        

        

        

    

Nama Telepon
Muhammad 7006255 0274415156

Gabungandua baris

    

        

        

    

    

        

        

    

    

        

    

Nama Muhammad Arief
Telepon 7006255
0274415156

HasilScript:
        
LATIHAN:

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

DaftarWarga
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:
Untuklatihan maka kita coba membuat tampilan tabel pada web dengan warna latarbelakang merah pada web, perintah yang digunakan adalah . Selanjutnya kita membuat tabel dengan judul tabel fontberwarna kuning berada diposisi tengah (center) dengan menggunakan perintah

yang artinya judul tabel berada di atas tabel kemudianditebalkan dengan perintah atau Bold. Sedangkan warna judul tabelkuning merupakan hasil dari perintah .  Dan pada tabel inijarak antar cell ditentukan dengan cellspacing dan cellpadding yangmasing-masing berisi 1 pixel.

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

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

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

        

        

        

        

        

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

baru kemudian melanjutkanperintah untuk menulis kolom-kolom tersebut selengkapnya adalah:

        

        

        

        

        

        

        

        

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

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

 r>
        

        

        

        

        

        

        

TUGAS:
y>

TugasMembuat 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

         AlamatkuSolo
        
tentangku

              

              

                     

              

              

              

              

              

              
Hobi
Memasak nyanyi

        

         Buahyang ku sukai:

        

            
  • apel
            
  • nanas
            
  • anggur
            
HELOOWSemua

         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