Untuk membuat suatu tabel diperlukan tiga elemen tabel, yaitu Tag < TABLE

PERTEMUAN 5 Membuat Tabel

  

Tabel biasanya digunakan untuk menempatkan data secara spreadsheet , tapi untuk desain suatu web,

selain untuk menempatkan data, tabel digunakan untuk merapikan teks, ataupun gambar. Dengan

menggunakan tabel, teks ataupun gambar dapat disusun menjadi lebih rapi. Tampilan halaman web

akan menjadi lebih baik, apabila dasar/kerangkanya menggunakan tabel.

  Adapun elemen-elemen yang digunakan untuk membuat suatu tabel adalah : Element

Fungsi

  &lt; TABLE &gt; ... &lt; /TABLE &gt; Tag utama. Digunakan untuk memberitahu browser "ini adalah tabel", bersama dengan beberapa atribut seperti ukuran, lebar border dan beberapa hal lagi.

  &lt; TR &gt; ..... &lt;/ TR &gt; Baris Tabel, yaitu pasangan baris yang dinyatakan dalam tabel.

&lt; TD &gt; ..... &lt;/ TD &gt; Data tabel, yaitu isi dari tabel dan merupakan kolom dari suatu table.

  &lt; TH &gt; ..... &lt;/ TH &gt; Judul tabel, biasnya terletak di bagian paling atas atau paling kiri dari suatu tabel. Tabel header yang terletak di bagian atas adalah judul kolom tabel, sedang tabel header yan terletak di bagian kiri adalah judul baris tabel.

  

&lt; CAPTION &gt; ...&lt;/ CAPTION &gt; Judul tabel yang terletak diluar tabel biasanya di bagian atas/bawah tabel.

Sedangkan atribut yang digunakan oleh tabel adalah sebagai berikut :

Atribut Value Keterangan BORDER Angka Menentukan tebal bingkai tabel

  CELLSPACING Angka Menentukan jumlah spasi antara sel. CELLPADDING Angka Menentukan jumlah spasi antar data dalam sel.

  WIDTH Angka Untuk mengatur lebar tabel.

  

ALIGN Left, Center, Right Untuk perataan tabel secara horizontal.

  VALIGN Midle, Bottom, Baseline Untuk perataan tabel secara vertikal. BGCOLOR Warna Warna latar dari tabel atau pada sel. ROWSPAN Angka Menggabungkan beberapa baris tabel.

COLSPAN Angka Menggabungkan beberapa kolom tabel

  

Untuk membuat suatu tabel diperlukan tiga elemen tabel, yaitu Tag &lt; TABLE &gt; yang digunakan sebagai

awal pembuatan tabel, tag &lt; TR &gt; digunakan untuk mendifinisikan berapa banyak baris pada tabel, dan

tag &lt; TD &gt; digunakan untuk menampung sel data dari tabel tersebut.

  Contoh:

  &lt;html&gt; &lt;body&gt; &lt;title&gt; Belajar membuat Tabel &lt;/title&gt; &lt;h3&gt;&lt;u&gt; Contoh tabel sederhana &lt;/u&gt;&lt;/h3&gt; &lt; table &gt; &lt; tr &gt; &lt; td &gt;Tabel sederhana Tanpa border&lt;/ td &gt; &lt;/ tr &gt; &lt;/ table &gt; &lt;br&gt; &lt; table border = "1"&gt; &lt; tr &gt; &lt; td &gt; Tabel sederhana dengan menggunakan border &lt;/ td &gt; &lt;/ tr &gt; &lt;/ table &gt; &lt;br&gt; &lt; table border = "5"&gt; &lt; tr &gt; &lt; td &gt;Tabel sederhana dengan menggunakan tebal border 5&lt;/ td &gt; &lt;/ tr &gt; &lt;/ table &gt; &lt;/body&gt; &lt;/html&gt;

  

Tabel biasanya tidak hanya terdiri dari dari 1 dimensi atau 1 kolom saja , tapi bisa 2, 3 atau sesuai

dengan kebutuhan kita. Untuk membuat tabel dua dimensi, dibutuhkan elemen tag &lt; TR &gt; sebanyak 2

kemudian kolom tabel disusaikan dengan data yang akan diisikan.

  Contoh : .....

  &lt; table border = "3"&gt; &lt; tr &gt; &lt; td &gt; Baris 1 Kolom 1 &lt;/ td &gt; &lt; td &gt; Baris 1 Kolom 2 &lt;/ td &gt; &lt; td &gt; Baris 1 Kolom 3 &lt;/ td &gt; &lt;/ tr &gt; &lt; tr &gt; &lt; td &gt; Baris 2 Kolom 1 &lt;/ td &gt; &lt; td &gt; Baris 2 Kolom 2 &lt;/ td &gt; &lt; td &gt; Baris 2 Kolom 3 &lt;/ td &gt; &lt;/ tr &gt; &lt;/ table &gt; .....

  

Suatu tabel biasanya memiliki judul. Judul pada tabel dibedakan menjadi tiga macam yaitu, judul tabel

itu sendiri, judul kolom tabel, dan judul baris tabel. Untuk membuat judul diluar tabel, tag yang

digunakan adalah &lt; CAPTION &gt;, sedang untuk membuat judul kolom atau baris pada tabel menggunakan

tag &lt; TH &gt;. Bagian yang merupakan judul tabel akan ditebalkan penulisannya.

  Contoh judul tabel dengan CAPTION : .....

  &lt; table border = "5"&gt; &lt; caption &gt;&lt;b&gt; Judul Tabel dengan Caption &lt;/b&gt;&lt;/ caption &gt; &lt; tr &gt; &lt; td &gt; Baris 1 Kolom 1 &lt;/ td &gt; &lt; td &gt; Baris 1 Kolom 2 &lt;/ td &gt; &lt; td &gt; Baris 1 Kolom 3 &lt;/ td &gt; &lt;/ tr &gt; &lt; tr &gt; &lt; td &gt; Baris 2 Kolom 1 &lt;/ td &gt; &lt; td &gt; Baris 2 Kolom 2 &lt;/ td &gt; &lt; td &gt; Baris 2 Kolom 3 &lt;/ td &gt; &lt;/ tr &gt; &lt;/ table &gt; .....

  Contoh judul tabel dengan tag &lt;TH&gt; : …..

  &lt; table border = "5"&gt; &lt; caption &gt; Tabel Header &lt;/ caption &gt; &lt; tr &gt; &lt; th &gt; Judul 1 &lt;/ th &gt; &lt; th &gt; Judul 2 &lt;/ th &gt; &lt; th &gt; Judul 3 &lt;/ th &gt; &lt;/ tr &gt; &lt; tr &gt; &lt; td &gt; isi tabel &lt;/ td &gt; &lt; td &gt; isi tabel &lt;/ td &gt; &lt; td &gt; isi tabel &lt;/ td &gt; &lt;/ tr &gt; &lt;/ table &gt; …..

  

Tabel yang memiliki judul kolom dan judul baris biasanya memiliki suatu sel kosong pada bagian kiri

atasnya. Untuk membuatnya, cukup dengan mendefinisikan sel tersebut dengan tag &lt; TD &gt; atau tag &lt; TH &gt;

tanpa diisi dengan data apapun.

  Contoh Penggunaan sel kosong : …..

  &lt; table border = "4"&gt; &lt; caption &gt;&lt;b&gt; Jadwal Aplikasi IT I &lt;/b&gt;&lt;/ caption &gt; &lt; tr &gt; &lt; td &gt; &lt; br &gt; &lt;/ td &gt; &lt; th &gt; Senin &lt;/ th &gt; &lt; th &gt; Selasa &lt;/ th &gt; &lt; th &gt; Rabu &lt;/ th &gt; &lt;/ tr &gt; &lt; tr &gt; &lt; th &gt; Pagi &lt;/ th &gt; &lt; td &gt; IF-5 &lt;/ td &gt; &lt; td &gt; IF-7 &lt;/ td &gt; &lt; td &gt; IF-9 &lt;/ td &gt; &lt;/ tr &gt; &lt; tr &gt; &lt; th &gt; Siang &lt;/ th &gt; &lt; td &gt; IF-10 &lt;/ td &gt; &lt; td &gt; IF-15 &lt;/ td &gt; &lt; td &gt; IF-13 &lt;/ td &gt; &lt;/ tr &gt; &lt;tr&gt; &lt; th &gt; Malam &lt;/ th &gt; &lt; td &gt; IF-14 &lt;/ td &gt; &lt; td &gt; IF-16 &lt;/ td &gt; &lt; td &gt; IF-12 &lt;/ td &gt; &lt;/ tr &gt; &lt;/ table &gt; …..

  

Tabel dapat diratakan baik secara horizontal maupun secara vertikal. Seperti diketahui perataan

horizontal mempunyai orientasi ke kiri, kanan dan tengah. Sedang perataan vertikal orientasinya ke

atas, bawah dan tengah. Atribut dan elemen yang digunakan adalah sebagai berikut :

  

Atribut Elemen Value

&lt; CAPTION &gt; Top

  Bottom ALIGN

  Left &lt; TH &gt; , &lt; TR &gt; , &lt; TD &gt; Center

  Right Top

  VALIGN &lt; TH &gt; , &lt; TR &gt; , &lt; TD &gt; Middle Bottom Baseline Contoh perataan pada tabel dengan menggunakan atribut ALIGN dan

  VALIGN : …..

  &lt; table border = "2"&gt; &lt; caption &gt;&lt;b&gt; Perataan Pada Tabel &lt;/b&gt;&lt;/ caption &gt; &lt; tr &gt; &lt; td &gt; &lt;br&gt; &lt;/ td &gt; &lt; th width = "50"&gt; Kiri &lt;/ th &gt; &lt; th &gt; Tengah &lt;/ th &gt; &lt; th &gt; Kanan &lt;/ th &gt; &lt;/ tr &gt; &lt; tr &gt; &lt; th &gt;&lt;h3&gt; Atas &lt;/h3&gt;&lt;/ th &gt; &lt; td align = "left" valign = "top"&gt; isi &lt;/ td &gt; &lt; td align = "center" valign = "top"&gt; isi &lt;/ td &gt; &lt; td align = "right" valign =" top"&gt; isi &lt;/ td &gt; &lt;/ tr &gt; &lt; tr &gt; &lt; th &gt;&lt;h3&gt; Tengah &lt;/h3&gt;&lt;/ th &gt; &lt; td align = "left" valign = "middle"&gt; isi &lt;/ td &gt; &lt; td align = "center" valign = "middle"&gt; isi &lt;/ td &gt; &lt; td align = "right" valign = "middle"&gt; isi &lt;/ td &gt; &lt;/ tr &gt; &lt; tr &gt; &lt; th &gt;&lt;h3&gt; Bawah &lt;/h3&gt;&lt;/ th &gt; &lt; td align = "left" valign = "bottom"&gt; isi &lt;/ td &gt; &lt; td align = "center" valign = "bottom"&gt; isi &lt;/ td &gt; &lt; td align = "right" valign = "bottom"&gt; isi &lt;/ td &gt; &lt;/ tr &gt; &lt;/ table &gt; …..

  

Ukuran sel dalam sebuah tabel dapat diubah dengan menggunakan atribut &lt; WIDTH &gt; yang juga berguna

untuk mengubah ukuran kolom dalam tabel. Berikut adalah elemen

• – elemen yang dapat digunakan dengan atribut &lt; WIDTH &gt; :

Atribut Elemen Value Keterangan

  TABLE Angka Lebar tabel pada browser WIDTH

TH Angka Lebar kolom pada tabel TD Angka Lebar sel pada tabel

  

Pemberian warna juga dapat dilakukan pada sel maupun pada border dari suatu tabel. Atribut yang

dipakai adalah &lt; BGCOLOR &gt; yang ditambahkan pada tag &lt; TABLE &gt;, &lt; TD &gt;, &lt; TR &gt;. Sedangkan untuk

mengubah warna border tabel dan hanya dapat diterapkan pada browser internet explorer , atribut yang

digunakan adalah :

  Atribut Fungsi

  BORDERCOLOR Warna border tabel BORDERCOLORLIGHT Warna border bagian atas dan kiri BORDERCOLORDARK Warna border bagian bawah dan kanan

Berikutnya adalah mengatur spasi. Atribut yang digunakan untuk mengatur spasi dalam tabel adalah

&lt; CELLSPACING &gt; dan &lt; CELLPADDING &gt; dalam tag &lt; TABLE &gt;. atribut &lt; CELLSPACING &gt; digunakan untuk

menentukan jumlah spasi yang terdapat diantara dua buah sel dalam sebuah tabel, sedangkan atribut

&lt; CELLPADDING &gt; digunakan untuk menentukan jumlah spasi yang terdapat diantara border sel dan

dengan isi/data yang ada didalam sel tersebut.

  Contoh penggunaan spasi dalam tabel : …..

  = ”center”&gt; &lt; table border = "5" cellpadding = "15" cellspacing = "25" align &lt; tr &gt; &lt; td &gt; ini &lt;/ td &gt; &lt; td &gt; adalah &lt;/ td &gt; &lt; td &gt; contoh &lt;/ td &gt; &lt;/ tr &gt; &lt; tr &gt; &lt; td &gt; spasi &lt;/ td &gt; &lt; td &gt; dalam &lt;/ td &gt; &lt; td &gt; tabel &lt;/ td &gt; &lt;/ tr &gt; &lt;/ table &gt;

  

Salah satu sifat tabel pada umum nya adalah dapat menggabungkan dua atau lebih kolom atau baris

menjadi satu dalam suatu tabel (merge). Atribut yang digunakan untuk menggabungkan kolom adalah

&lt; COLSPAN &gt;, sedangkan atribut untuk menggabungkan baris adalah &lt; ROWSPAN &gt;. Kedua atribut ini di

pakai bersama tag &lt; TH &gt; dan tag &lt; TD &gt; dalam suatu tabel. Berikut adalah contoh penggunaan nya : Contoh penggunaan &lt; COLSPAN &gt; : …..

  &lt; table border = "1" width = "

  50 %"&gt;

   &lt; tr &gt; &lt; td align = "center"&gt; Data-1 &lt;/ td &gt; &lt; td colspan = "2" align = "center"&gt; Data-2 &lt;/ td &gt; &lt;/ tr &gt; &lt; tr &gt; &lt; td align = "center"&gt; isi &lt;/ td &gt; &lt; td align = "center"&gt; isi &lt;/ td &gt; &lt; td align = "center"&gt; isi &lt;/ td &gt; &lt;/ tr &gt; &lt;/ table &gt;

  Contoh penggunaan &lt; ROWSPAN &gt; : …..

  &lt; table border = "1" width = "

  50 %"&gt;

   &lt; tr &gt; &lt; td rowspan = "2" align = "center"&gt; Data1 &lt;/ td &gt; &lt; td align = "center"&gt; Data 2 &lt;/ td &gt; &lt; td align = "center"&gt; Data 3 &lt;/ td &gt; &lt; td align = "center"&gt; Data 4 &lt;/ td &gt; &lt;/ tr &gt; &lt; tr &gt; &lt; td align = "center"&gt; isi &lt;/ td &gt; &lt; td align = "center"&gt; isi &lt;/ td &gt; &lt; td align = "center"&gt; isi &lt;/ td &gt; &lt;/ tr &gt; &lt;/ table &gt; …..

  Contoh penggabungan penggunaan &lt; COLSPAN &gt; dan &lt; ROWSPAN &gt; : …..

  &lt; table border = "1" width = "50%"&gt; &lt; tr &gt; &lt; th rowspan = "2" colspan = "2"&gt; &lt;br&gt; &lt;/ th &gt; &lt; th colspan = "2"&gt; COLSPAN &lt;/ th &gt; &lt;/ tr &gt; &lt; tr &gt; &lt; th &gt; Kolom 1 &lt;/ th &gt; &lt; th &gt; Kolom 2 &lt;/ th &gt; &lt;/ tr &gt; &lt; tr &gt; &lt; th rowspan = "2"&gt; ROWSPAN &lt;/ th &gt; &lt; th &gt; Baris 1 &lt;/ th &gt; &lt; td align = "center"&gt; isi &lt;/ td &gt; &lt; td align = "center"&gt; isi &lt;/ td &gt; &lt;/ tr &gt; &lt; tr &gt; &lt; th &gt; Baris 1 &lt;/ th &gt; &lt; td align = "center"&gt; isi &lt;/ td &gt; &lt; td align = "center"&gt; isi &lt;/ td &gt; &lt;/ tr &gt; &lt;/ table &gt; …..