MODUL PEMROGRAMAN WEB OLEH : Yunita Prastyaningsih, S.Kom
Dalam HTML, table memiliki dua fungsi : Modul 4 TABEL 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 <TABLE>..<TABLE> 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 <TD>..<TD> 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 <TH> </TH> Judul tabel yang terletak diluar tabel biasanya di bagian atas/bawah tabel. tag <CAPTION>..</CAPTION> Selain elemen-elemen diatas, tabel juga mempunyai bermacam-macam atribut yang dapat mempercantik bentuk tabel tersebut, seperti atribut-atribut :
Atribut Nilai Keterangan Border Angka 0, 1 dst Digunakan untuk menentukan tebal garis batas tepi tabel Cellspacing Angka 1,2,3 dst Digunakan untuk menentukan jumlah spasi/celah diantara tiap-tiap sel Cellpadding Angka 1,2,3 dst Digunakan untuk menentukan jumlah spasi antara data dalam suatu sel width Pixel / persentase Digunakan untuk mengatur lebar tabel, dapat menggunakan ukuran piksel atau persentasi % Align Left, center.right Digunakan untuk horizontal perataan tabel secara Valign Middle, bottom, Digunakan untuk perataan tabel secara baseline vertikal bgcolor Warna/bil.hexadesimal Warna latar dari tabel atau pada sel Rowspan Angka 1,2,3 dst Menggabungkan beberapa baris tabel Colspan Angka 1,2,3 dst Menggabungkan beberapa kolom tabel <TITLE> Menggunakan Tabel </TITLE> <TABLE> <caption><b>judul Tabel dengan Caption</b></caption> <TH> Judul header 1 </TH> <TH> Judul header 2 </TH> <TH> Judul header 3 </TH> <TD> Baris 1 kolom 1 </TD> <TD> Baris 1 kolom 2 </TD> <TD> Baris 1 kolom 3 </TD> <TD> Baris 2 kolom 1 </TD> <TD> Baris 2 kolom 2 </TD> <TD> Baris 2 kolom 3 </TD> </TABLE>
3. Menentukan Border Table Untuk menentukan border (bingkai) table, atribut yang digunakan adalah BORDER pada tag <table>. 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 </TITLE> <TABLE BORDER="3"> <caption><b>tabel Border</b></caption> <TH> Judul header 1 </TH> <TH> Judul header 2 </TH> <TH> Judul header 3 </TH> <TD> Baris 1 kolom 1 </TD> <TD> Baris 1 kolom 2 </TD> <TD> Baris 1 kolom 3 </TD> <TD> Baris 2 kolom 1 </TD> <TD> Baris 2 kolom 2 </TD> <TD> Baris 2 kolom 3 </TD> </TABLE>
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 Value CAPTION top,bottom ALIGN TH, TR, TD left, right, center Atribut Elemen Value top, middle, bottom, VALIGN TH, TR, TD baseline Berikut adalah contoh perataan tabel dengan menggunakan perintah ALIGN dan VALIGN. <TITLE>Tabel </TITLE> <table border=5> <caption><h4> Perataan Pada Tabel</h4></caption> <td></td> <th><h3>kiri </h3></th> <th><h3>tengah</h3></th> <th><h3>kanan </h3></th> <th><h3>atas </h3></th> <td align="left" valign="top">0</td> <td align="center" valign="top">0</td> <td align="right" valign="top">0</td> <th><h3>tengah </h3></th> <td align="left" valign="middle">0</td> <td align="center" valign="middle">0</td> <td align="right" valign="middle">0</td> <th><h3>bawah </h3></th> <td align="left" valign="bottom">0</td> <td align="center" valign="bottom">0</td> <td align="right" valign="bottom">0</td>
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 Value TABLE Lebar tabel terhadap browser xx% atau pixel WIDTH TH Lebar kolom terhadap tabel xx% atau pixel TD Lebar kolom terhadap tabel xx% atau pixel Berikut diberikan contoh penggunaan width pada tabel dan pada tabel data : <TITLE>Tabel </TITLE> <table border=1 width="70%"> <caption align="bottom"> <h5> tabel dengan width 70%</h5> </caption> <td width="50%">width 50%</td> <td width="50%">width 50%</td> <td>lebar sel 50% dari lebar tabel</td> <td>lebar sel 50% dari lebar tabel</td> <table border=1 width="100%"> <caption align="bottom"> <h5> tabel dengan width 100%</h5> </caption> <td width="30%">width 30%</td> <td width="70%">width 70%</td> <td>lebar sel 30% dari lebar tabel</td> <td>lebar sel 70% dari lebar tabel</td>
6. Atribut CELLSPACING dan CELLPADDING Tag <table> 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 </TITLE> <TABLE BORDER="1" CELLSPACING="15"> <caption><b>tabel CELLSPACING</b></caption> <TH> Judul header 1 </TH> <TH> Judul header 2 </TH> <TH> Judul header 3 </TH> <TD> Baris 1 kolom 1 </TD> <TD> Baris 1 kolom 2 </TD> <TD> Baris 1 kolom 3 </TD> <TD> Baris 2 kolom 1 </TD> <TD> Baris 2 kolom 2 </TD> <TD> Baris 2 kolom 3 </TD> </TABLE>
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 </TITLE> <TABLE BORDER="1" CELLPADDING="10"> <caption><b>tabel CELLPADDING</b></caption> <TH> Judul header 1 </TH> <TH> Judul header 2 </TH> <TH> Judul header 3 </TH> <TD> Baris 1 kolom 1 </TD> <TD> Baris 1 kolom 2 </TD> <TD> Baris 1 kolom 3 </TD> <TD> Baris 2 kolom 1 </TD> <TD> Baris 2 kolom 2 </TD> <TD> Baris 2 kolom 3 </TD> </TABLE>
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 <th> atau <td>. Atribut yang digunakan untuk menggabungkan kolom adalah COLSPAN, sedang atribut untuk menggabungkan baris adalah ROWSPAN. <html> <body> Tabel dengan COLSPAN<br> <table border=1 width="50%"> <td align="center">data1</td> <td colspan=2 align="center">data 2</td> <td align="center">data 1</td> <td align="center">data2a</td> <td align="center">data2b</td> <br> Tabel dengan ROWSPAN<br> <table border=1 width="50%"> <td rowspan=2 align="center">data1</td> <td align="center">data 2</td> <td align="center">data 3</td> <td align="center">data 4</td> <td align="center">data 2</td>
<td align="center">data 3</td> <td align="center">data 4</td> <br> Tabel Gabungan ROWSPAN dan COLSPAN<br> <table border=1 width="50%"> <th rowspan=2 colspan=2>gabungan</th> <th colspan=2>colspan</th> <th>kolom 1</th> <th>kolom 2</th> <th rowspan=2>rowspan</th> <th>baris 1</th> <td align="center">1,1</td> <td align="center">1,2</td> <th>baris 1</th> <td align="center">1,1</td> <td align="center">1,2</td> </body> </html>
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 </TITLE> <table border=1 width="40%"> <caption><h3> Warna pada Tabel</h3></caption> <tr bgcolor="yellow"> <td align="center">warna kuning</td> <td align="center">warna kuning</td> <td align="center" bgcolor="red">warna merah</td> <td align="center" bgcolor="green">warna hijau</td>
9. Memasukkan Gambar Ke Dalam Tabel Dalam pembuatan dokumen HTML, kita juga diizinkan untuk memasukkan gambar ke dalam table. Caranya dengan menempatkan tag <img> diantara tag <td> dan </td>. <TITLE>Tabel </TITLE> <table border="1" width="40%"> <caption><h3> Gambar pada Tabel</h3></caption> <th>laptop 1</th> <th>laptop 2</th> <td width="200" align="center"><img src="laptop1.jpg" width="100" height="100"></td> <td width="200" align="center"><img src="laptop2.jpg" width="100" height="100"></td>