PERTEMUAN VI T A B E L

MS Wulandari - HTML

1 PERTEMUAN VI TABEL

I. ELEMEN Untuk membuat tabel dimulai dengan pasangan tag …. 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 ,,,.  Tabel Row atau baris tabel : baris-baris pada suatu tabel yang dinyatakan dengan pasangan tag …  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 …  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 … 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 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 … Pendefinisian caption ini adalah : ……………JUDUL TABEL…………. Contoh :

WARNA PELANGI

WARNA PELANGI

WARNA PELANGI

WARNA PELANGI

WARNA	WARNI	PELANGI
MERAH	ORANGE	KUNING
HIJAU	BIRU	UNGU

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 . 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 harus disertakan kecuali tabel hanya berisi satu tabel body dan tidak mempunyai tabel head atau tabel foot. Tag penutup selalu boleh diabaikan  Tag pembuka dan disertakan jika tabel head dan tabel foot ada, dan tag penutup boleh diabaikan  THEAD, TFOOT dan TBODY harus berisi jumlah kolom yang sama Contoh :

Penggunaan YHEAD,TFOOT,TBODY

......informasi header.....
....informasi footer.....
......baris pertama-block data satu......
......baris kedua-block data satu....
......baris pertama-block data kedua......
......baris kedua-block data kedua....
......baris kedua-block data kedua....

MS Wulandari - HTML

3

III. ELEMEN COL DAN COLGROUP Elemen COL bisa digabungkan dngan atribut tabel kolom yang lain. Pendefinisian atribut COL adalah : 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 :

IV. ELEMEN BARIS Untuk membuat baris dalam tabel digunakan pasangan tag …. Contoh : .........Baris header...................Baris data pertama....................Baris data kedua...........

Contoh penggunaan baris

MS Wulandari - HTML

4

V. ELEMEN SEL DAN Judul kolom atau judul baris dalam tabel dibuat dengan elemen …. Contoh :

WARNA PELANGI

WARNA	WARNI	PELANGI
MERAH	ORANGE	KUNING
HIJAU	BIRU	UNGU

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

Contoh :

WARNA PELANGI

WARNA	WARNI	PELANGI
XYZ	XYZ	XYZ
XYZ	XYZ	XYZ
XYZ	XYZ	XYZ

MS Wulandari - HTML

5

VII. ELEMEN CHAR Nilai baru dalam atribut ALIGN adalah CHAR atau perataan karakter. Formatnya :
CHAR=”.”>……..data tabel….

Contoh :

Mengatur perataan dengan char"."

SAYUR	HARGA PER KILO
Cabe Rawit	Rp3000,-
Wortel	Rp2000,-
Kol	Rp600,-

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

Contoh : >>>

Tabel dengan Frame dan Rules

1……	2……	3……
4……	5……	6……
7……	8……	9……

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. Contoh :

WARNA PELANGI

WARNA WARNI PELANGI
XYZ	XYZ	XYZ
XYZ	XYZ	XYZ
XYZ	XYZ
XYZ	XYZ

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. Contoh :

ATRIBUT NOWRAP

Lebar atribut width tidak berpengaruh

Atribut nowrap digunakan

MS Wulandari - HTML

7

XI. MEMBUAT SEL KOSONG Sel akan ditampilkan dengan space kosong, HTML juga menyediakan entity   yang akan menampilkan tabel data kosong. Contoh :

Contoh sel kosong

MERAH		KUNING
HIJAU	BIRU
PINK	PUTIH

---

COKLAT		NILA
UNGU	ABU ABU
JINGGA	MAGENTA

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 Contoh :

Pengaturan Layout Tabel

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 Contoh :

Memberi warna pada tabel

Width 100%	Border Cellpadding=10 Cellspasing
Width 75% Border Cellpadding=5 Cellspasing	Layout Tabel !

MERAH	UNGU	KUNING
HIJAU	BIRU	NILA
PINK	PUTIH	JINGGA

Memberi warna pada seluruh tabel

---

COKLAT	MERAH	NILA
UNGU	ABU ABU	BIRU
JINGGA	MAGENTA	HIJAU

Memberi warna pada satu baris

---

COKLAT	HIJAU	NILA
UNGU	ABU ABU	KUNING
JINGGA	MAGENTA	ORANGE

Memberi warna pada sel

MS Wulandari - HTML

9

XIV. MENGGUNAKAN IMAGE SEBAGAI HEADER TABEL Hal-hal yang perlu diperhatikan :  Lebar tabel untuk tempat image menggunakan atribut WIDTH seperti  Pada tag atribut CELLSPACING diset 0 agar image tepat berada segaris dengan tabel  Penggabungan kolom perlu dilakukan untuk menampung image. Misalnya

menggabungkan dua kolom dalam tabel untuk tempat image  Tag harus digunakan untuk menyisipkan image BORDER=0 HEIGHT dan WIDTH harus diatur secara tepat. Contoh : 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. Desain by:LPK XV. MERUBAH WARNA, UKURAN DAN JENIS FONT PADA TABEL Contoh : WARNA PELANGI WARNA WARNI PELANGI MERAH ORANGE KUNING HIJAU BIRU JINGGA × Report "PERTEMUAN VI T A B E L" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close