PERTEMUAN VI T A B E L

(1)

PERTEMUAN VI T A B E L I. ELEMEN <TABLE>

Untuk membuat tabel dimulai dengan pasangan tag <TABLE>…</TABLE>. Di dalam tag ini dapat menentukan banyak kolom dan baris, perataan, warna dan pengaturan lainnya. Tabel terdiri dari beberapa bagian, yaitu :

 Tag tabel : untuk menandai awal dan akhir tabel yang dinyatakan dengan pasangan tag <TABLE>,,,</TABLE>.

 Tabel Row atau baris tabel : baris-baris pada suatu tabel yang dinyatakan dengan pasangan tag <TR>…</TR>

 Tabel Data atau data tabel : tempat di mana anda memasukan informasi dalam suatu tabel. Beberapa tabel data yang terdapat dalam suatu baris membentuk table row. Table data dinyatakan dengan pasangan tag <TD>…</TD>

 Table header : judul tabel yang biasanya terletak di bagian paling atas atau paling kiri tabel. Tabel header yang terletak di bagian atas adalah judul kolom tabel, sedang tabel header yang terletak dibagian kiri adalah judul baris tabel. Tabel header dinyatakan dengan pasangan tag <TH>…</TH>

Selain elemen-elemen di atas, tabel juga mempunyai atribut-atribut antara lain :  BORDER : untuk membuat batas tepi dari suatu tabel

 WIDTH: untuk mengatur lebar tabel

 ALIGN : untuk mengatur bentuk perataan horisontal data di dalam tabel, seperti di kiri, di tengah atau di kanan

 VALIGN : untuk mengatur perataan vertikal dari data, seperti di atas, ditengah atau dibawah

 CELLSPACING dan CELLPADDING : untuk mengatur spasi antar sel dan spasi dalam sel. Sel adalah tempat/kotak dimana data atau judul kolom atau judul baris berada

 ROWSPAN atau COLSPAN : gabungan sel-sel dalam suatu kolom atau baris  COLOR :untuk mengatur warna suatu sel dalam tabel

 SUMMARY : untuk memberi keterangan singkat mengenai struktur dan kegunaan tabel  RULES : untuk mengatur ukuran antara sel dalam tabel

 FRAME : untuk mengatur frame di sekitar tabel II. ELEMEN <CAPTION>

Caption adalah judul tabel yang terletak di bagian luar suatu tabel, biasanya dibagian atas atau bagian bawah tabel. Pasangan tag yang digunakan untuk membentuk suatu caption adalah <CAPTION>…</CAPTION>

Pendefinisian caption ini adalah :

<CAPTION ALIGN=TOP|BOTTOM|LEFT|RIGHT> ………JUDUL TABEL…………. </CAPTION> Contoh : <html> <head><title>TABLE</title><head> <body bgcolor=lightgrey> <table border>

<caption align=left>WARNA PELANGI</caption> <caption align=right>WARNA PELANGI</caption> <caption align=top>WARNA PELANGI</caption> <caption align=bottom>WARNA PELANGI</caption> <th>WARNA</th><th>WARNI</th><th>PELANGI</th>

<tr><td>MERAH</td><td>ORANGE</td><td>KUNING</td></tr> <tr><td>HIJAU</td><td>BIRU</td><td>UNGU</td></tr>

(2)

III. GROUP BARIS

Baris tabel bisa dibagi menjadi tabel head, tabel foot dan beberapa tabel body dengan menggunakan elemen THEAD, TFOOD dan TBODY. Tabel head dan tabel foot berisi informasi tentang tabel kolom sedangkan tabel body baris dari tabel data. Setiap THEAD, TFOOT, dan TBODY berisi group baris dan masing-masing group paling sedikit berisi satu baris yang didefinisikan dengan elemen <TR>.

TFOOT harus berada sebelum TBODY agar browser memberikan tempat pijakan sebelum menerima baris data. Berikut adalah ringkasan tag yang diperlukan dan yang boleh diabaikan :

 Tag <TBODY> harus disertakan kecuali tabel hanya berisi satu tabel body dan tidak mempunyai tabel head atau tabel foot. Tag <TBODY> penutup selalu boleh diabaikan  Tag pembuka <THEAD> dan <TFOOT> disertakan jika tabel head dan tabel foot ada, dan

tag penutup </THEAD. Dan </TFOOT> boleh diabaikan

 THEAD, TFOOT dan TBODY harus berisi jumlah kolom yang sama Contoh : <html> <head> <title>TABLE</title> <head> <body bgcolor=lightgrey> <table border=1>

<caption align=top><h3>Penggunaan YHEAD,TFOOT,TBODY</h3></caption> <thead>

<tr><td><b>...informasi header...</b></td> <tfoot>

<tr><td><u><b>....informasi footer...</b></u></td> <tbody>

<tr><td>...baris pertama-block data satu...</td> <tr><td>...baris kedua-block data satu....</td> </tbody>

<tr><td>...baris pertama-block data kedua...</td> <tr><td>...baris kedua-block data kedua....</td> <tr><td>...baris kedua-block data kedua....</td> </table> </body> </html>

(3)

III. ELEMEN COL DAN COLGROUP

Elemen COL bisa digabungkan dngan atribut tabel kolom yang lain. Pendefinisian atribut COL adalah :

Span adalah atribut yang mempunyai nilai integer > 0, yang digunakan untuk menggabungkan kolom. Width digunakan untuk mengatur lebar kolom yang digabung.

Elemen COLGROUP mengatur lebar dan perataan sekelompok kolom. Untuk Contoh, jika sebuah tabel mempunyai 6 kolom dan diinginkan agar tiga kolom pertama mempunyai lebar 50 pixel dan rata kiri, dua kolom kedua ingin dengan lebar 100 pixel dan karakter rata pada titik desimal, sedang kolom terakhir lebarnya berukuran sisa layar dengan rata kanan.

Untuk problem ini dibuat program sebagai berikut :

IV. ELEMEN BARIS <TR>

Untuk membuat baris dalam tabel digunakan pasangan tag <TR>…</TR>. Contoh : <html> <head> <title>TABLE</title> </head> <body bgcolor=lightgrey> <table>

<caption><b>Contoh penggunaan baris</b></caption> <tr>...Baris header...</tr>

<tr>...Baris data pertama...</tr> <tr>...Baris data kedua...</tr>

(4)

V. ELEMEN SEL <TH> DAN <TD>

Judul kolom atau judul baris dalam tabel dibuat dengan elemen <TH>…</TH>. Contoh :

<html>

<head> <title>TABLE</title> <head> <body bgcolor=lightgrey>

<caption align=top>WARNA PELANGI</caption> <th>WARNA</th><th>WARNI</th><th>PELANGI</th>

<tr><td>MERAH</td><td>ORANGE</td><td>KUNING</td></tr> <tr><td>HIJAU</td><td>BIRU</td><td>UNGU</td></tr> </table> </body> </html>

VI. ELEMEN PERATAAN TABEL

Gunakan atribut ALIGN dan VALIGN untuk membuat rata teks dalam tabel.  ALIGN digunakan untuk perataan teks secara horisontal, formatnya :

Align = left|center|right|justify|char

 VALIGN digunakan untuk perataan teks secara vertikal, formatnya : Valign = top|middle|bottom|baseline

Contoh : <html>

<head> <title>TABLE</title> <head>

<body bgcolor=lightgrey> <table border=5> <caption align=top>WARNA PELANGI</caption> <th>WARNA</th><th>WARNI</th><th>PELANGI</th> <tr><td align=left valign=top>XYZ</td> <td align=center valign=top>XYZ</td> <td align=right valign=top>XYZ</td></tr> <tr><td align=left valign=bottom>XYZ</td> <td align=center valign=bottom>XYZ</td> <td align=right valign=bottom>XYZ</td></tr> <tr><td align=left valign=middle>XYZ</td> <td align=center valign=middle>XYZ</td> <td align=right valign=middle>XYZ</td></tr> </table> </body> </html>

(5)

VII. ELEMEN CHAR

Nilai baru dalam atribut ALIGN adalah CHAR atau perataan karakter. Formatnya : <TR ALIGN=CHAR CHAR=”.”>……..data tabel….</TR>

Contoh : <html>

<h3>Mengatur perataan dengan char"."</h3> <table border=5>

<TR><th>SAYUR<th>HARGA PER KILO <TBODY>

<tr><td>Cabe Rawit</td><td>Rp3000,-</td> <tr><td>Wortel</td><td>Rp2000,-</td> <tr><td>Kol</td><td>Rp600,-</td> </table> </body> </html>

VIII. ATRIBUT RULES DAN FRAME

Atribut rules digunakan untuk mengatur interior tabel. Atribut rules didefinisikan sebagai : Rules = none|groups|rows|cols|all Contoh : <html> <head> <title>TABLE</title> </head> <body bgcolor=lightgrey>

<table border=5 frame="vsides" rules="cols"> <caption>Tabel dengan Frame dan Rules</caption> <tr><td>1……</td><td>2……</td>><td>3……</td>

(6)

IX. MENGGABUNGKAN BARIS DAN KOLOM

Atribut yang digunakan untuk menggabungkan kolom adalah COLSPAN, sedangkan atribut yang digunakan untuk menggabungkan baris adalah ROWSPAN.

Contoh : <html>

<caption>WARNA PELANGI</caption>

<tr><th colspan=3>WARNA WARNI PELANGI</th></tr> <tr><td>XYZ</td><td>XYZ</td><td>XYZ</td></tr> <tr><td>XYZ</td><td>XYZ</td><td rowspan=5>XYZ</td></tr> <tr><td >XYZ</td><td>XYZ</td></tr> <tr><td>XYZ</td><td>XYZ</td></tr> </table> </body> </html> X. ATRIBUT NOWRAP

Jika atribut ini digunakan dan isi teks melebihi lebar suatu sel, maka sel itu akan diperpanjang sehingga seluruh isi teks muncul dalam satu baris.

Contoh : <html>

<caption>ATRIBUT NOWRAP</caption>

<tr><td width=20% nowrap>Lebar atribut width tidak berpengaruh</td>

<td width=80%>Atribut nowrap digunakan</td></tr> </table> </body> </html>

(7)

XI. MEMBUAT SEL KOSONG

Sel akan ditampilkan dengan space kosong, HTML juga menyediakan entity &nbsp yang akan menampilkan tabel data kosong.

Contoh : <html>

<H3>Contoh sel kosong</h3> <table border> <tr><td>MERAH</td><td> </td><td>KUNING</td></tr> <tr><td>HIJAU</td><td>BIRU</td><td> </td></tr> <tr><td>PINK</td><td>PUTIH</td><td> </td></tr> </table> <hr> <br> <table border> <tr><td>COKLAT</td><td>&nbsp</td><td>NILA</td></tr> <tr><td>UNGU</td><td>ABU ABU</td><td>&nbsp</td></tr> <tr><td>JINGGA</td><td>MAGENTA</td><td>&nbsp</td></tr> </table> </body> </html>

XII. LAYOUT TABEL

Untuk mengatur penampilan tabel, ada beberapa yang harus diperhatikan, yaitu :  Atribut Width yang digunakan untuk mengatur lebar tabel

 Atribut Height untuk mengatur tinggi tabel  Atribut border untuk memberi border tabel

 Atribut Cellpadding digunakan untuk menentukan jumlah spasi yang terdapat diantara border sel dengan isi yang ada didalam sel.

 Atribut Cellspacing digunakan untuk menentukan jumlah spasi yang terdapat diantara dua buah sel dalam suatu tabel

Contoh : <html>

<head><title>Tabel</title></head>

<body bgcolor=lightgrey> <h3>Pengaturan Layout Tabel</h3> <table border=10 cellpadding=10 cellspasing=10 width=100%> <tr><td>Width 100%</td>

<td>Border<br>Cellpadding=10<br>Cellspasing</td></tr>

<tr><td><table border=5 cellpadding=5 cellspasing=5 width=75%> <tr><td>Width 75%</td>

<td>Border<br>Cellpadding=5<br>Cellspasing</td></tr> </table> </td>

<td>Layout Tabel !</td> </tr>

(8)

XIII. MEMBERI WARNA PADA TABEL

 Atribut BGCOLOR untuk memberi warna background pada sel sebelum berisi data  Atribut BORDERCOLOR untuk mengubah warna border sel

Contoh : <html>

<H3>Memberi warna pada tabel</h3>

<tr><td>MERAH</td><td>UNGU</td><td>KUNING</td></tr> <tr><td>HIJAU</td><td>BIRU</td><td>NILA</td></tr> <tr><td>PINK</td><td>PUTIH</td><td>JINGGA</td></tr> </table>

Memberi warna pada seluruh tabel <hr> <br> <table border> <tr bordercolor=red bgcolor=white> <td>COKLAT</td><td>MERAH</td><td>NILA</td></tr> <tr><td>UNGU</td><td>ABU ABU</td><td>BIRU</td></tr> <tr><td>JINGGA</td><td>MAGENTA</td><td>HIJAU</td></tr> </table>

Memberi warna pada satu baris <hr> <br> <table border> <tr> <td bordercolor=red bgcolor=white>COKLAT</td> <td>HIJAU</td><td>NILA</td></tr> <tr><td>UNGU</td><td>ABU ABU</td><td>KUNING</td></tr> <tr><td>JINGGA</td><td>MAGENTA</td><td>ORANGE</td></tr> </table>

(9)

XIV. MENGGUNAKAN IMAGE SEBAGAI HEADER TABEL Hal-hal yang perlu diperhatikan :

 Lebar tabel untuk tempat image menggunakan atribut WIDTH seperti <TABLE WIDTH=300>

 Pada tag <TABLE> atribut CELLSPACING diset 0 agar image tepat berada segaris dengan tabel

 Penggabungan kolom perlu dilakukan untuk menampung image. Misalnya <TH COLSPAN=2> menggabungkan dua kolom dalam tabel untuk tempat image

 Tag <IMG> harus digunakan untuk menyisipkan image BORDER=0 HEIGHT dan WIDTH harus diatur secara tepat.

Contoh : <html>

<head><title>IMAGE</title></head> <body bgcolor=lightgrey>

STMIK JAKARTA STI&K merupakan sekolah tinggi ilmu komputer yang terletak di jalan BRI Radio Dalam Jakarta Selatan. Jenjang Diploma Tiga dan Sarjana. Jurusan Manajemen Informatika dan Tehnik komputer.

</td></tr><hr>

<td align=middle>Desain by:LPK </tabel></body> </html> XV. MERUBAH WARNA, UKURAN DAN JENIS FONT PADA TABEL Contoh :

<html>

<head><title>TABLE</title><head>

<body bgcolor=lightgrey> <table border=5> <caption align=top>WARNA PELANGI</caption>

<th><font face="arial" color="blue" size=6>WARNA</font></th> <th><font face="arial" color="blue" size=6>WARNI</font></th> <th><font face="arial" color="blue" size=6>PELANGI</font></th> <tr><td><font face="Comic Sans MS" color="green">MERAH</font></td> <td>ORANGE</td><td>KUNING</td></tr> <tr><td>HIJAU</td><td>BIRU</td><td> <font face="Sherwood" color="red" size=6>JINGGA</font></td></tr>