HTML Lanjut TABEL Fungsi n Menampilkan informasi secara
HTML (Lanjut)
TABEL Fungsi: n Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca n Mengatur tampilan homepage agar lebih menarik
n n Tag yang diperlukan: <Table> Atributnya :
Membuat tabel sederhana: Tag yang diperlukan: n Membuat baris: <tr> (table row) n Membuat kolom: <td> (table data) Contoh: <table border="1"> <tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr> <tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr> </table> Tampilan:
Menambahkan judul tabel: n n Judul tabel: <caption> Judul baris/kolom: <th> (table header) Contoh: <table border="1"> <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>No</th><th>NPM</th><th>Nama</th></tr> <tr><td>1</td><td>06. 100. 001</td><td>Amin A. Angkasa</td></tr> <tr><td>2</td><td>06. 100. 002</td><td>Beni B. Bernardi</td></tr> </table> Tampilan:
Mengatur lebar dan tinggi suatu tabel: n n Atribut: weight dan height Nilai: ukuran % (max 100%) ukuran pixel Contoh: <table border="1" width=“ 50%”> <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>No</th> <th>NPM</th> <th>Nama</th></tr> <tr><td width=“ 20”>1. </td> <td width=“ 80” height=“ 50”>06. 100. 001</td> <td width=“ 180” height=“ 50”>Amin A. Angkasa</td></tr> <tr><td width=“ 20”>2. </td> <td width=“ 80” height=70>06. 100. 002</td> <td width=“ 180” height=70>Beni B. Bernardi</td></tr> </table>
Perataan dalam tabel: n n horisontal: atribut align utk <caption>, <tr>, <td> dan <th> vertikal: atribut valign utk <tr>, <td> dan <th> Contoh: <table border="1" align="center"> <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption> <tr><th>No</th><th>NPM</th><th>Nama</th></tr> <tr><td align="center" width="20">1. </td> <td align="center" valign="middle" width="80" height="50">06. 100. 001</td> <td align="right" valign="top" width="180" height="50">Amin A. Angkasa</td></tr> <tr><td width="20">2. </td> <td align="left" valign="top" width="80" height="70">06. 100. 002</td> <td align="left" valign="bottom" width="180" height="70">Beni B. Bernardi</td></tr> </table>
Membuat warna pada tabel: Atribut: bgcolor Contoh: <body bgcolor="purple"> <font size="3" face="arial" color="yellow"> n <table border="2" bgcolor="white" align="center"> <caption align="bottom"> <b> Tabel Daftar Mahasiswa </b> </caption> <tr bgcolor="yellow"> <th>No</th><th>NPM</th><th>Nama</th></tr> <tr bgcolor="cyan"><td align="center" width="20">1. </td> <td align="left" valign="middle“ width="80" height="40">06. 100. 001</td> <td align="left" valign="middle“ width="180" height="40">Amin A. Angkasa</td></tr> <tr><td bgcolor="blue" width="20">2. </td> <td bgcolor="red" align="left" valign="middle" width="80" height="40">06. 100. 002</td> <td bgcolor="green" align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td></tr> </table> </body>
Penggabungan baris/kolom: Menggabungkan bbrp kolom menjadi 1: atribut colspan n Menggabungkan bbrp baris menjadi 1: atribut rowspan Contoh Tampilan: n
Script HTML: <table border="1" bgcolor="white" align="center"> <caption align="top"> <b> Tabel Daftar Nilai Mahasiswa </b> </caption> <tr bgcolor="gray"><th rowspan="2">No</th> <th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th> </tr> <tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr> <tr><td align="center" width="20">1. </td> <td align="left" valign="middle" width="80" height="40">06. 100. 001</td> <td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td> <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td> </tr> <tr><td width="20">2. </td> <td align="left" valign="middle" width="80" height="40">06. 100. 002</td> <td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td> <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td> </tr> </table>
Cellpading dan cellspacing: atribut cellpading: mengatur spasi antara border dengan tulisan n atribut cellspasing: mengatur spasi antar 2 buah sel Contoh Tampilan: n
Script HTML: <table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12"> <caption align="top"> <b> Tabel Daftar Nilai Mahasiswa </b> </caption> <tr bgcolor="gray"><th rowspan="2">No</th> <th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th> </tr> <tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr> <tr><td align="center" width="20">1. </td> <td align="left" valign="middle" width="80" height="40">06. 100. 001</td> <td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td> <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td> </tr> <tr><td width="20">2. </td> <td align="left" valign="middle" width="80" height="40">06. 100. 002</td> <td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td> <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td> </tr> </table>
FRAME Fungsi: n Menampilkan beberapa dokumen HTML secara sekaligus dalam satu jendela web browser.
![n n Standar penulisan: <frameset [cols=“%, %” [rows=“%, %”]>. . . </frameset> Atribut-atribut:](http://slidetodoc.com/presentation_image_h2/c92ba594f751aa331682d335e02b4284/image-14.jpg "n n Standar penulisan: <frameset [cols=“%, %” [rows=“%, %”]>. . . </frameset> Atribut-atribut:")
n n Standar penulisan: <frameset [cols=“%, %” [rows=“%, %”]>. . . </frameset> Atribut-atribut:
Frame Vertikal Contoh: <html> <head> <title> Membuat Frame Vertikal </title> </head> <frameset cols="25%, *"> <frame name="kiri" src="kiri. html" scrolling="no"> <frame name="kanan“ src="kanan. html"> </frameset> </html>
Frame Horisontal Contoh: <html> <head> <title> Membuat Frame Horisontal </title> </head> <frameset rows="40%, *"> <frame name="atas" src="atas. html“ scrolling="no"> <frame name="bawah“ src="bawah. html"> </frameset> </html>
Gabungan Frame Vertikal-Horisontal Contoh: <html> <head> <title> Membuat Frame Vertikal-Horisontal </title> </head> <frameset rows="20%, *"> <frame name="atas" src="atas. html“ scrolling="no"> <frameset cols="40%, *"> <frame name="kiri" src="kiri. html"> <frame name="kanan" src="kanan. html"> </frameset> </html>
LATIHAN & TUGAS n Dengan menggunakan tabel buatlah tampilan seperti dibawah ini Web Site Sederhana Home Disisni kita bisa meletakkan menu Artikel Download Silahkan menuliskan artikel disini © Hak Cipta 2010 About
- Slides: 19