PERTEMUAN VI T A B E L

Transkripsi

1 MS Wulandari - HTML 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> <head><title>table</title><head> <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 MS Wulandari - HTML 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 <head> <title>table</title> <head> <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>

3 MS Wulandari - HTML 3 III. ELEMEN COL DAN COLGROUP Elemen COL bisa digabungkan dngan atribut tabel kolom yang lain. Pendefinisian atribut COL adalah : <COL span width> 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 : <colgroup width= 50px align=left span=3> <colgroup width= 100px align=char char=. span=2> <colgroup width= 100% align=right> IV. ELEMEN BARIS <TR> Untuk membuat baris dalam tabel digunakan pasangan tag <TR> </TR>. <head> <title>table</title> </head> <table> <caption><b>contoh penggunaan baris</b></caption> <tr>...baris header...</tr> <tr>...baris data pertama...</tr> <tr>...baris data kedua...</tr>

4 MS Wulandari - HTML 4 V. ELEMEN SEL <TH> DAN <TD> Judul kolom atau judul baris dalam tabel dibuat dengan elemen <TH> </TH>. <table border=5> <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> 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 <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>

5 MS Wulandari - HTML 5 VII. ELEMEN CHAR Nilai baru dalam atribut ALIGN adalah CHAR atau perataan karakter. Formatnya : <TR ALIGN=CHAR CHAR=. >..data tabel.</tr> <h3>mengatur perataan dengan char"."</h3> <table border=5> <colgroup> <col><col align= char char=. > <thead> <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> VIII. ATRIBUT RULES DAN FRAME Atribut frame digunakan untuk membuat frame suatu tabel. Atribut Frame didefinisikan sebagai : Frame = void above below hsides lhs rhs vsides box border. Atribut rules digunakan untuk mengatur interior tabel. Atribut rules didefinisikan sebagai : Rules = none groups rows cols all <head> <title>table</title> </head> <table border=5 frame="vsides" rules="cols"> <caption>tabel dengan Frame dan Rules</caption> <tr><td>1 </td><td>2 </td>><td>3 </td> <tr><td>4 </td><td>5 </td>><td>6 </td> <tr><td>7 </td><td>8 </td>><td>9 </td>

6 MS Wulandari - HTML 6 IX. MENGGABUNGKAN BARIS DAN KOLOM Atribut yang digunakan untuk menggabungkan kolom adalah COLSPAN, sedangkan atribut yang digunakan untuk menggabungkan baris adalah ROWSPAN. <table border=5> <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> 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. <table border width=50%> <caption>atribut NOWRAP</caption> <tr><td width=20% nowrap>lebar atribut width tidak berpengaruh</td> <td width=80%>atribut nowrap digunakan</td></tr>

7 MS Wulandari - HTML 7 XI. MEMBUAT SEL KOSONG Sel akan ditampilkan dengan space kosong, HTML juga menyediakan entity &nbsp yang akan menampilkan tabel data kosong. <H3>Contoh sel kosong</h3> <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> <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> 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 <head><title>tabel</title></head> <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> </tabel></body> </html>

8 MS Wulandari - HTML 8 XIII. MEMBERI WARNA PADA TABEL Atribut BGCOLOR untuk memberi warna background pada sel sebelum berisi data Atribut BORDERCOLOR untuk mengubah warna border sel <H3>Memberi warna pada tabel</h3> <table border bordercolor=red bgcolor=white> <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> <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> <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> Memberi warna pada sel </body> </html>

9 MS Wulandari - HTML 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. <head><title>image</title></head> <table border=0 cellpadding=2 cellspasing=0 width=500> <tr><th COLSPAN=2><IMG SRC= d:/s T A F F/STIK-trs.gif Border=0 Height=30 width=500</th></tr> <tr><td valign=top><img src= d:/s T A F F/STIK-trs.gif ></td> <td valign=top> 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 <head><title>table</title><head> <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>