1 MODUL PEMROGRAMAN WEB OLEH : Yunita Prastyaningsih, S.Kom2 Dalam HTML, table memiliki dua fungsi : Modul 4 TABEL Untuk mengatur informasi ke dalam b...
Modul 4 TABEL Dalam HTML, table memiliki dua fungsi : ·
Untuk mengatur informasi ke dalam bentuk tabular
·
Untuk mengatur tampilan (layout) dari suatu halaman atau bagian tertentu
1. Bagian – bagian table : ·
Kolom : merupakan atribut table. Setiap table dapat memiliki beberapa kolom
·
Baris : merupakan isi sebuah record dari table bersangkutan
·
Sel : bagian terkecil dari suatu table yang berisi data atau nilai dari kolom dan baris tertentu
2. Tag HTML Table Elemen TABLE TR TD
TH
CAPTION
Kegunaan Tag utama. Digunakan untuk memberitahu browser "ini adalah tabel", bersama dengan beberapa atribut seperti ukuran, lebar border dan beberapa hal lagi. Tag
..
Baris Tabel, yaitu baris-baris pada suatu tabel, yang dinyatakan dalam pasangan tag
..
Data tabel, yaitu tempat dimana informasi/data dimasukkan dalam tabel. tabel data adalah colom dari suatu baris tabel. tabel data dinyatakan dengan tag
..
Judul tabel, biasanya 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. Tag yang digunakan adalah
…
Judul tabel yang terletak diluar tabel biasanya di bagian atas/bawah tabel. tag
..
Selain elemen-elemen diatas, tabel juga mempunyai bermacam-macam atribut yang dapat mempercantik bentuk tabel tersebut, seperti atribut-atribut :
Keterangan Digunakan untuk menentukan tebal garis batas tepi tabel Digunakan untuk menentukan jumlah spasi/celah diantara tiap-tiap sel Digunakan untuk menentukan jumlah spasi antara data dalam suatu sel Digunakan untuk mengatur lebar tabel, dapat menggunakan ukuran piksel atau persentasi % Digunakan untuk perataan tabel secara horizontal Digunakan untuk perataan tabel secara vertikal Warna latar dari tabel atau pada sel Menggabungkan beberapa baris tabel Menggabungkan beberapa kolom tabel
<TITLE> Menggunakan Tabel
Judul Tabel dengan Caption
Judul header 1
Judul header 2
Judul header 3
Baris 1 kolom 1
Baris 1 kolom 2
Baris 1 kolom 3
Baris 2 kolom 1
Baris 2 kolom 2
Baris 2 kolom 3
3. Menentukan Border Table Untuk menentukan border (bingkai) table, atribut yang digunakan adalah BORDER pada tag
. Agar border terlihat pada masing-masing sel table, kita perlu mengisi nilai lebih dari nol, semakin besar nilai yang kita berikan semakin besar pula ketebelan border table tersebut. <TITLE> Menggunakan Tabel
Tabel Border
Judul header 1
Judul header 2
Judul header 3
Baris 1 kolom 1
Baris 1 kolom 2
Baris 1 kolom 3
Baris 2 kolom 1
Baris 2 kolom 2
Baris 2 kolom 3
4. Perataan Tabel 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
Elemen CAPTION TH, TR, TD
Value top,bottom left, right, center
Atribut
Elemen
VALIGN
TH, TR, TD
Value middle, top, baseline
ALIGN
bottom,
Berikut adalah contoh perataan tabel dengan menggunakan perintah ALIGN dan VALIGN. <TITLE>Tabel
Perataan Pada Tabel
Kiri
Tengah
Kanan
Atas
align="left" valign="top">0
0
0
Tengah
0
align="center" valign="middle">0
0
Bawah
0
align="center" valign="bottom">0
0
5. Mengatur Lebar Tabel Untuk mengatur lebar di dalam table, menggunakan atribut WIDTH Elemen-elemen yang dapat disisipi dengan atribut WIDTH adalah ; Atribut Elemen Orientasi TABLE Lebar tabel terhadap browser WIDTH TH Lebar kolom terhadap tabel Lebar kolom terhadap tabel TD Berikut diberikan contoh penggunaan width pada tabel dan pada tabel data : <TITLE>Tabel
tabel dengan width 70%
width 50%
width 50%
lebar sel 50% dari lebar tabel
lebar sel 50% dari lebar tabel
tabel dengan width 100%
width 30%
width 70%
lebar sel 30% dari lebar tabel
lebar sel 70% dari lebar tabel
Value “xx%” atau pixel “xx%” atau pixel “xx%” atau pixel
6. Atribut CELLSPACING dan CELLPADDING Tag
memiliki dua atribut yang cukup berguna dalam pembuatan table, yaitu CELLSPACING dan CELLPADDING. Atribut CELLSPACING digunakan untuk mengatur jarak atau spasi antar sel (dalam satuan piksel). Dalam keadaan default, nilai atribut dianggap nol (0). <TITLE> Menggunakan Tabel
Tabel CELLSPACING
Judul header 1
Judul header 2
Judul header 3
Baris 1 kolom 1
Baris 1 kolom 2
Baris 1 kolom 3
Baris 2 kolom 1
Baris 2 kolom 2
Baris 2 kolom 3
Atribut CELLPADDING digunakan untuk menentukan jarak antara data yang ada dalam suatu sel dengan border dari sel itu sendiri. Dalam keadaan default, nilai atribut dianggap nol (0). <TITLE> Menggunakan Tabel
Tabel CELLPADDING
Judul header 1
Judul header 2
Judul header 3
Baris 1 kolom 1
Baris 1 kolom 2
Baris 1 kolom 3
Baris 2 kolom 1
Baris 2 kolom 2
Baris 2 kolom 3
7. Atribut ROWSPAN dan COLSPAN Dalam beberapa kasus, ada kalanya kita dituntut untuk membuat table yang relative lebih rumit dibandingkan dengan table normal. Sel HTML dapat digabungkan berdasarkan kolom maupun baris, dengan menggunakan atribut ROWSPAN dan COLSPAN, yang masing – masing merupakan atribut tag
atau
. Atribut yang digunakan untuk menggabungkan kolom adalah COLSPAN, sedang atribut untuk menggabungkan baris adalah ROWSPAN. Tabel dengan COLSPAN
Data1
Data 2
Data 1
Data2a
Data2b
Tabel dengan ROWSPAN
Data1
Data 2
Data 3
Data 4
Data 2
Data 3
Data 4
Tabel Gabungan ROWSPAN dan COLSPAN
GABUNGAN
COLSPAN
Kolom 1
Kolom 2
ROWSPAN
Baris 1
1,1
1,2
Baris 1
1,1
1,2
8. Pewarnaan Tabel Pemberian warna dapat dilakukan pada tabel, sel maupun pada border dari suatu tabel. Warna dapat ditulis dengan menggunakan bilangan Hexadesimal RRGGBB atau dengan menyebutkan warnanya. Atribut BGCOLOR digunakan pada perintah TABLE, TD, TR. Sedang untuk mengubah warna border tabel, hanya dapat dilakukan pada internet explorer yang menyediakan beberapa macam atribut, yaitu Atribut BORDERCOLOR BORDERCOLORLIGHT BORDERCOLORDARK
fungsi Warna border tabel Warna border bagian atas dan kiri Warna border bagian bawah dan kanan
Ketiga atribut diatas harus digunakan bersama atribut BORDER. Berikut ini adalah contoh pewarnaan yang terjadi pada suatu tabel. <TITLE>Tabel
Warna pada Tabel
warna kuning
warna kuning
warna merah
warna hijau
9. Memasukkan Gambar Ke Dalam Tabel Dalam pembuatan dokumen HTML, kita juga diizinkan untuk memasukkan gambar ke dalam table. Caranya dengan menempatkan tag diantara tag
