. 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 : TABLE
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 : TABLE
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 : TABLE
Contoh penggunaan baris
.........Baris header..........
.........Baris data pertama...........
.........Baris data kedua...........
MS Wulandari - HTML
4
V. ELEMEN SEL
DAN
Judul kolom atau judul baris dalam tabel dibuat dengan elemen
…
. Contoh : TABLE
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 : TABLE
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 : TABLE
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 : TABLE
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 : TABLE
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 : TABLE
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 : TABLE
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 : Tabel
Pengaturan Layout Tabel
Width 100%
Border Cellpadding=10 Cellspasing
Width 75%
Border Cellpadding=5 Cellspasing
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 : TABLE
Memberi warna pada 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 : IMAGE
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 : TABLE
