PERTEMUAN VI T A B E L

dokumen-dokumen yang mirip
MODUL PRAKTIKUM APLIKASI IT 1 MODUL V TABEL

<table> : Tag ini merupakan inti dari perintah untuk membuat. </table> : Tag ini merupakan penutup dari perintah untuk membuat

KOMPUTER APLIKASI IT (Information Technology)

Materi 5 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya

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

Desain Web. Oleh : Ady Purna Kurniawan, ST., MT.

1. Agar bagian yang ditunjuk anak panah bisa ditampilkan pada browser, perintah yang digunakan adalah.

Pengenalan Web STMIK AKAKOM YOGYAKARTA

2. Tag Pembuatan Tabel

d. Caption Elemen caption berfungsi untuk memberikan nama atau judul pada tabel. Tag yang digunakan

MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id

TAG PENGOLAH TEKS DAN IMAGE PADA HTML (LANJUTAN)

Pemrograman Basis Data Berbasis Web

Pemrograman Basis Data Berbasis Web

PEMROGRAMAN WEB 1 (PART 2) Berbagai macam Tag HTML. Rio Andriyat Krisdiawan, M.Kom

Edisi UNIVERSITAS NEGERI SEMARANG. Badan Pengembangan Teknologi Informasi dan Komunikasi. Modul Pelatihan H T M L

MENGGUNAKAN TABEL. 6.1 Pendahuluan

Pertemuan Ke-3 (HTML Lanjut [1]) D3 Manajemen Informatika - Unijoyo 1

Dasar-dasar HTML 2. Oleh: Cecep Yusuf

BAB VII Tabel. Susanto, S.Kom. Bab VII Tabel

MODUL II MEMBUAT DAFTAR ITEM, MEMBUAT LINK, MEMBUAT TABEL

HTML 2 dan CSS. Setelah mengikuti praktikum ini mahasiswa diharapkan dapat :

Tujuan: Siswa dapat membuat desain situs menggunakan perangkat lunak desain dan pemrograman web


HTML (Hypertext Markup Language)

HTML : Apa itu? HTML = Hyper Text Markup Language. HTML adalah dokumen text yang bisa dibaca untuk dipublikasikan di World Wide Web (WWW)

Tujuan: Siswa dapat membuat desain situs menggunakan perangkat lunak desain dan pemrograman web

FORMAT TEXT. Tag Attribut Value Keterangan. RGB(red,green,blue) Kode Warna. Memberikan warna terhadap background web mengatur posisi text rata kiri

Pengenalan Perancangan Web 2017

PENGENALAN HTML - 2. Anda bisa menambahkan beberapa cell (kolom) untuk membuat satu baris cell (kolom).

1) Gunakan peralatan sesuai dengan fungsinya. 2) Bekerjalah sesuai dengan cara kerja atau petunjuk yang telah ditentukan.

TAG HTML LANJUT Tujuan Instruksional :

BAB I PERKENALAN HTML

Pengenalan Perancangan Web 2016

PENGANTAR INTERNET & DESAIN WEB

BAB I PERKENALAN HTML

Tampilan di website (Tidak Tampil karena hanya memberi informasi bagi pembuat )

- Ordered List : list yang menggunakan nomor berdasarkan urutan (numbering)

HTML (HyperText Markup Language)

Pertemuan IV. Semester 1

KONSEP DASAR HTML. HTML ( HyperText Mark up Language )

Pemrograman Internet by Susiana Sari, S.Kom

Pengantar HTML. Achmad Fadlil Chusni, S.Kom, M.MT

Membuat Layout Web Mengunakan Table

SUSUNAN DASAR HTML, JAVASCRIPT DAN VBSCRIPT

SOAL PRODUKTIF KEJURUAN KELAS X MULTIMEDIA

HTML Dasar & Layouting (tag, elemen, atribut, link, frame, table) Pengembangan Web (IT133) Ramos Somya, S.Kom., M.Cs.

PENGGUNAAN SINGKATAN

Fungsi: Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca Mengatur tampilan homepage agar lebih menarik

Review Pemrograman Web I

HTML Dasar Pertemuan - 2

MODUL HTML 2015 MODUL I PENDAHULUAN

BAB 1 PENGENALAN HTML

Materi. I. Pengenalan HTML II. Basic Tag HTML III. Table IV. Image

HTML.

MODUL I PENGENALAN HTML. a. Mengenalkan kepada mahasiswa mengenai pemrograman WEB dengan menggunakan HTML b. Mengenalkan kode-kode HTML 2.

Pengaturan Teks. Contoh : <H2>Tutorial Html</H2> Hasilnya akan terlihat seperti : Tutorial Html

4. Berikut ini termasuk tag tag yang biasanya diletakkan di dalam kelompok tag Body, kecuali. a. bgcolor c. link b. font d. meta

Pemrograman Web. HTML Lanjut. Indrato, S.Kom List. Ordered Lists (OL) Ordered List (OL) Ordered List (OL) PemrogramanWeb.

Struktur dasar HTML BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.

HTML Dasar. PERTEMUAN 1 Tujuan: 1. Siswa dapat memahami dan mengenal perintah-perintah dasar HTML 2. Siswa dapat membuat tabel dan pengaturannya

KURSUS ONLINE JASA WEBMASTERS

HTML-FRAME. <FRAMESET BORDER=# {[ROWS COLS]}={#,[#[,...]]}> <FRAME SRC= url NAME= nama frame > </FRAMESET>

<HTML> <HEAD> <TITLE>Paragraf</TITLE> </HEAD> <BODY> <P> Paragraf satu</p> <P> Paragraf dua</p> <P> Paragraf tiga</p> </BODY> </HTML>

P - 6 Bab 4 : HTML (Hypertext Markup Language)

HIPER TEXT MARKUP LANGUAGE

Soal Remedial Prakarya-1

HTML. Hipertext Markup Language

XHTML dan Dasar-dasar CSS XHTML

P - 5 Bab 4 : HTML (Hypertext Markup Language)

1. HTML DASAR Struktur dokumen HTML(Tag, Element, Attribute), Element HTML, Element HEAD, Element TITLE, Element BODY

Sekilas Mengenai HTML

Pertemuan V. Semester 1

MODUL 3 HTML. (HyperText Mark-Up Language) Sub : Tabel & Form

Struktur dasar HTML. Tutorial Belajar Dasar-dasar HTML: Hypertext Markup Language

TAG 10/2/2011. Pengenalan HTML. Pengantar Bahasa HTML (Menuliskan Kode HTML) Pengantar Bahasa HTML. Pengantar Bahasa HTML (Membuat Dasar Tag)

Pemrograman Basis Data Berbasis Web

1. Pengenalan HTML. 2. Tag Dasar HTML

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di

Pengenalan Perancangan Web 2017

DIKTAT PELAJARAN TIK KELAS XII IPA DAN IPS TH/SEM: 2013/ SMA N 11 YOGYAKARTA JL.AM SANGAJI NO.50

HTML. STRUKTUR DASAR HTML Sebelum mempelajari HTML, akan terlebih dahulu diulas mengenai aturan penulisan dalam buku ini.

Pemrograman Web I (HTML Lanjut) Oleh: Devie Rosa Anamisa

Pemrograman Basis Data Berbasis Web

HTML. ( HyperText Markup Language) Pertemuan 2 Oleh : Nufan Balafif. Mata Kuliah : Pemrograman Berbasis Web

1. #**# merupakan karakter yang terdapat pada type data a. text b. password c. radio d. submit e. file jawaban : b

STRUKTUR DASAR HTML. Presented by: Moh. Sulhan 2009

Standar Kompetensi Mahasiswa memahami Pengertian HTML, pengaturan format Teks, Daftar urutan, Tabel, Image dan hyperlink

MODUL 1 HTML. (HyperText Mark-Up Language)

Pemrograman Web I (HTML) Oleh: Devie Rosa Anamisa

Pemrograman Web DASAR HTML 2

BUKU PANDUAN WEB DESIGN

1. Teori MODUL 1 HTML. Tujuan: Mampu menjelaskan pengertian HTML,Struktur Dasar, Tag Tag HTML, dan mampu membuat aplikasi dengan menggunakan tag HTML

HTML. Minggu 2. Pemrograman Web/MI/D3/2 sks 1

Analisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya.

PENGANTAR KOMPUTER DAN TI 2C PERTEMUAN 5

Transkripsi:

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>

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>

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>

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>

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>

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>

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>

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>

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>

2026 © DocPlayer.info Pengaturan dan alat privasi | Ketentuan | Tanggapan