3.HTML Table

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.

3.HTML Table

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

3.HTML Table

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML TABLE HTML

4.1. HTML TABLES

Tabel 4.1 Atribut tag <TABLE>

Contoh Penggunaan Tag TABLE

Tabel 4.2 Nilai dari atribut ALIGN

Nilai left center right justify

Tabel 4.3 Nilai dari atribut VALIGN

Nilai top middle bottom baseline

Contoh Penggunaan Atribut ALIGN dan VALIGN

Contoh Penggunaan Atribut COLSPAN, ROWSPAN, CELLSPACING, CELLPADDING

Tabel 4.4 Nilai dari atribut FRAME

Tabel 4.5 Nilai dari atribut RULES

Nilai none groups rows cols all

Contoh Penggunaan Atribut FRAME dan RULES

Contoh Penggunaan THEAD, TFOOT, TBODY

4.2. HTML FRAMES

Contoh Penggunaan FRAME

MENGATUR TAMPILAN FRAME

<frameset border= value >

Kerjakan tugas-tugas di bawah ini:

Buatlah coding HTML untuk tampilan table di bawah ini:

Buatlah coding HTML untuk tampilan frame di bawah ini:

Anda mungkin juga menyukai