You are on page 1of 8

HTML TABLE HTML

4.1. HTML TABLES

Informasi kadang ditampilkan dalam bentuk tabel, karena bentuk tampilan tabel lebih ringkas dan mudah dibaca. Informasi dalam tabel yang biasanya ditampilkan secara padat dalam beberapa baris saja membuat orang mudah mengerti sehingga disukai banyak orang. Untuk membuat tabel, Anda harus memulainya dengan pasangan tag <TABLE> ... </TABLE>. Di dalam tag Anda dapt menentukan banyak kolom dan baris, perataan, warna, dan pengaturan lainnya. Tabel terdiri dari beberapa bagian yaitu:

Tag tabel: untuk menandai awal atau akhir tabel yang dinyatakan dengan pasangan tag <TABLE> ... </TABLE>. Tabel Row: baris-baris pada suatu tabel yang dinyatakan dalam pasangan tag <TR> ... </TR>. Tabel Data: tempat di mana Anda memasukkan informasi dalam suatu tabel. Beberapa Tabel Data yang terdapat dalam suatu baris membentuk Table Row. Tabel Data dinyatakan dengan pasangan <TD> ... </TD>.

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

Tabel 4.1 Atribut tag <TABLE>

Atribut border width height align valign cellspacing cellpadding rowspan colspan color summary rules frame

Fungsi Untuk membuat batas tepi untuk tabel Untuk mengatur lebar tabel Untuk mengatur tinggi tabel Untuk mengatur bentuk perataan horizontal data di dalam tabel. Untuk mengatur perataan vertikal data di dalam tabel Untuk mengatur spasi antar sel Untuk mengatur spasi dalam sel Untuk menggabungkan sel-sel dalam suatu baris Untuk menggabungkan sel-sel dalam suatu kolom Untuk mengatur warna suatu sel dalam tabel Untuk memberi keterangan singkat mengenai struktur dan kegunaan tabel. Untuk mengatur ukuran antara sel dalam tabel Untuk mengatur frame di sekitar tabel

Contoh Penggunaan Tag TABLE


<html> <head> <title>Pengunaan Difinition TABLE</title> </head> <body> <table border=5> <tr> <th>No.</th> <th>Judul Buku</th> </tr> <tr> <td>1</td> <td>Mastering Ajax dan PHP</td> </tr> <tr> <td>2</td> <td>Pemrograman HTML 4.1</td> </tr> <tr> <td>3</td> <td>Pemrograman Java</td> </tr> <tr> <td>4</td> <td>Pemrograman C</td> </tr> </table> </body> </html>

Tabel 4.2 Nilai dari atribut ALIGN

Nilai left center right justify

Keterangan Merupakan nilai default data sel. Isi sel akan rata kiri Merupakan nilai default untuk header sel. Isi sel akan rata tengah Isi sel rata kanan Isi sel rata kiri dan kanan

Tabel 4.3 Nilai dari atribut VALIGN

Nilai top middle bottom baseline

Keterangan Isi sel akan rata atas dengan sel Isi sel akan berada di tengan sel Isi sel akan di bawah bagian sel Isi sel akan berada pada posisi teks pertama diketik dalam sel.

Contoh Penggunaan Atribut ALIGN dan VALIGN


<html> <head> <title>Penggunaan atribut ALIGN dan VALIGN</title> </head> <table width="800" height="600" border=2> <tr> <th></th> <th>KIRI</th> <th>TENGAH</th> <th>KANAN</th> </tr> <tr> <th>ATAS</th> <td align="left" valign="top">ABCD</td> <td align="center" valign="top">ABCD</td> <td align="right" valign="top">ABCD</td> </tr> <tr> <th>TENGAH</th> <td align="left" valign="middle">ABCD</td> <td align="center" valign="middle">ABCD</td> <td align="right" valign="middle">ABCD</td> </tr> <tr> <th>BAWAH</th> <td align="left" valign="bottom">ABCD</td> <td align="center" valign="bottom">ABCD</td> <td align="right" valign="bottom">ABCD</td> </tr> <tr> <th>BASELINE</th> <td align="left" valign="baseline">ABCD</td> <td align="center" valign="baseline">ABCD</td> <td align="right" valign="baseline">ABCD</td> </tr> </table> </body> </html>

Contoh Penggunaan Atribut COLSPAN, ROWSPAN, CELLSPACING, CELLPADDING


<html> <head> <title>Penggunaan atribut colspan, rowspan, cellspacing, dan cellpadding</title> </head> <body> <table border="1" cellpadding="10" cellspacing="5"> <tr> <td colspan="2">A1</td> <td>A2</td> </tr> <tr> <td rowspan="2">B1</td> <td>B2</td> <td>B3</td> </tr> <tr> <td colspan="2">C1</td> </tr> </table> </body> </html>

Tabel 4.4 Nilai dari atribut FRAME

Nilai void above below hsides lhs rhs vsides box Tidak menggunakan frame Sisi atas Sisi bawah Sisi horizontal Sisi tangan kiri Sisi tangan kanan Sisi vertikal Keempat sisi

Keterangan

Tabel 4.5 Nilai dari atribut RULES

Nilai none groups rows cols all

Keterangan Tidak menggunakan aturan pengendalian ukuran Aturan horizontal antara seluruh baris dan kolom Mengendalikan ukuran seluruh baris dalam group Mengendalikan ukuran kolom secara vertikal Mengendalikan seluruh baris dan kolom

Contoh Penggunaan Atribut FRAME dan RULES


<html> <head> <title>Penggunaan atribut frame dan rules</title> </head> <body> <table border="5" frame="vsides" rules="cols"> <tr><td>1...... <td> 2...... <td> 3...... <tr><td>4...... <td> 5...... <td> 6...... <tr><td>7...... <td> 8...... <td> 9...... </table> </body> </html>

GROUP BARIS. Baris tabel dibagi menjadi tabel head, tabel foot dan beberapa tabel body dengan menggunakan elemen THEAD, TBODY, TFOOT. 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 didefenisikan dengan elemen <TR>.

TFOOT harus berada sebelum TBODY agar browser memberikan tempat pijakan sebelum menerima baris data. Berikut adalah ringkasan tag yang diperlukan dan 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 Penggunaan THEAD, TFOOT, TBODY


<html> <head> <title>Penggunaan thead, tfoot, dan tbody</title> </head> <body> <table border="2"> <thead> <tr><td>Informasi Header</td></tr> </thead> <tfoot> <tr><td>Informasi footer</td></tr> </tfoot> <tbody> <tr><td>Informasi 1</td></tr> <tr><td>Informasi 2</td></tr> <tr><td>Informasi 3</td></tr> </tbody> </table> </body> </html>

4.2. HTML FRAMES

Jika Anda menjelajahi web dengan menggunakan browser yang mampu menampilkan frame, Anda pasti menemukan frame di setiap web. Melalui frame jendela browser dibagi-bagi menjadi beberapa bagian di mana setiap frame mampu menampilkan berbagai informasi. Setiap link dalam suatu frame tidak hanya dapat memperbarui isinya, tetapi juga dapat digunakan untuk memperbaharui isi dari frame lain, disamping juga jendela browser. Frame digunakan untuk:

Membuat datar isi pada suatu sisi frame sementara sisi frame yang lain untuk menampilkan isi. Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isi dokumen. Membuat suatu dokumen tanya-jawab, di mana sisi frame yang satu berisi daftar pertanyaan sedangkan sisi frame yang lain berisi jawabannya.

Dokumen frame tidak boleh berada dalam elemen BODY. Dokumen frame menggunakan elemen FRAMESET. FRAMSET mempunyai dua buah atribut, yaitu ROWS dan COLS. Atribut ROWS membagi jendela browser menjadi beberapa baris frame, sedangkan atribut COLS membagi jendela browser menjadi beberapa kolom frame.

TAG <FRAME>. Tag <FRAME> mendefenisikan sebuah frame. Tag tersebut harus dalam elemen FRAMESET. Lihat contoh berikut: <frameset rows=*,2*> <frame> .............. </frame> </frameset>

LINK KE SUMBER (SRC). Atribut yang paling penting dari tag FRAME adalah SRC. SRC menunjukkan bahwa frame berisi URL, yang biasanya adalah file HTML. Lihat contoh berikut: <frame src=sample.htm>

MENGATUR JUMLAH BARIS DAN KOLOM FRAME. Untuk mengatur baris dan kolom frame hampir sama. Aturan penggunaan atribut ROWS dan COLS pada FRAMESET adalah sebagai berikut <frameset rows=nilai_baris cols=nilai_kolom> .................................. .................................. </frameset> Nilai_baris dan nilai kolom adalah kumpulan nilai yang menyatakan banyaknya frame yang dibuat serta ukuran masing-masing frame. Setiap nilai dalam daftar dipisahkan dengan tanda koma dan dapat dinyatakan dalam ukuran pixel, persentase, atau nilai relatif.

Contoh Penggunaan FRAME


<html> <head> <title>Penggunaan FRAME</title> </head> <frameset rows="25%,50%,25%"> <frame src="a1.htm"> <frameset cols="25%,75%"> <frame src="a2.htm"> <frame src="a3.htm"> <frame src="a4.htm"> </frameset> <noframes> browser tidak dapat menampilkan frame </noframes> </html>

MENGATUR TAMPILAN FRAME

Frame mempunyai beberapa atribut yang dapat digunakan untuk mengubah penampilan suatu frame. Atribut-atribut tersebut dapat mengubah tinggi dan lebar margin, menentukan apakah ukuran frame dapat diubah dan apakah isi frame dapat digeser dengan menggunakan scroll bar.

MARGIN FRAME. Atribut MARGINWIDTH digunakan untuk menentukan nilai margin kiri dan kanan suatu frame. Sedangkan MARGINHEIGHT digunakan untuk menentukan margin atas dan margin bawah frame. Rumus untuk menggunakan kedua atribut tersebut: Marginwidth=value

Value adalah angka dalam satuan pixel. Sebagai contoh, lihat program di bawah ini: <frameset rows=*,*> <frame src=labela.htm> <frame src=labelb.htm marginwidth=20 margin height=40> </frameset>

SCROLLBAR FRAME. Secara otomatis frame akan mempunyai scrollbar untuk menggeser-geser isi dokumen jika ukuran dokumen tersebut lebih besar dari nilai frame yang ditetapkan. Nilai yang berlaku untuk atribut SCROLLING adalahyes, no, atau auto. Rumus yang berlaku adalah <frame scrolling=yes | no | auto >

FRAME DENGAN NORESIZE. Setiap frame dapat diubah-ubah ukurannya. Jika menginginkan suatu frame tidak dapat diubah-ubah ukurannya, gunakan atribut NORESIZE, atribut ini sangat berguna jika Anda membuat logo yang selalu ditampilkan dan tidak dapat diubah-ubah ukurannya. Rumus yang digunakan:

<frame noresize>

FRAME BORDER

Untuk memperoleh tampilan frame yang menarik, Anda dapat menggunakan atribut BORDER, FRAMEBORDER, dan BORDERCOLOR dalam pengaturan frame.

Atribut BORDER. Atribut BORDER hanya digunakan dengan tag <FRAMESET> yang juga digunakan untuk mengatur lebar border. Angka yang menyertai rumus BORDER adalah satuan pixel. Rumus yang digunakan:

<frameset border= value >

Atribut FRAMEBORDER. Atribut FRAMEBORDER dapat digunakan dalam tag <FRAMESET> atau <FRAME>. Atribut ini mempunyai nilai yes atau no. Jika FRAMEBORDER=yes, maka border akan ditampilkan dalam bentuk 3D dan jika FRAMEBORDER=no, maka border tidak akan ditampilkan. Secara default nilai FRAMEBORDER adalah yes. Jadi secara umum ditampilkan dengan bentuk 3-D.

LATIHAN

Kerjakan tugas-tugas di bawah ini:

Buatlah coding HTML untuk tampilan table di bawah ini:

25%

25%

25%

25%

Gunakan berbagai tag-tag yang telah dipelajari untuk menambah tampilan dari tugas yang dikerjakan.

Buatlah coding HTML untuk tampilan frame di bawah ini:

25% 75%

Gunakan berbagai tag-tag yang telah dipelajari untuk menambah tampilan dari tugas yang dikerjakan.

You might also like