Anda di halaman 1dari 18

PERTEMUAN 5 TABEL

5.1. Dasar-dasar Tabel
Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris terdiri atas kolom-kolom yang menunjukkan kelompok data dalam satu kesatuan. Dalam konteks HTML, tabel mempunyai peranan yang sangat penting. Selain digunakan untuk menampilkan tabel berisi data, HTML tabel juga digunakan untuk menyusun teks dalam kolom, ataupun membuat laporan terstruktur lainnya. Seringkali tabel digunakan dalam halaman web untuk memperindah tampilan ataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca. Melihat begitu banyaknya manfaat yang didapat dengan menggunkan tabel ini maka tabel mulai diterapkan pemakaiaannya oleh HTML dan kemudian didukung oleh Netscape (browser pertama yang mempelopori penggunaan tabel). Untuk membuat sebuah tabel, diperlukan tiga buah tag yang berpasangan yaitu : 1. <TABLE>...</TABLE> : Digunakan untuk mendefinisikan sebuah tabel 2.<TR> ... </TR> baris 3. <TD> ... </TD> dan data. Pola dasar dalam pembentukan tabel adalah sebagai berikut : <BODY> <TABLE> <TR> <TD>Tabel 1 baris 1 kolom</TD> </TR> </TABLE> </BODY> Pola tersebut adalah pola yang sangat sederhana sekali yang akan menghasilkan tabel dengan satu baris dan satu kolom. Jika diinginkan membuat lebih satu kolom dalam satu baris, maka cukup menambahkan sepasang tag <TD>. Begitu pula jika : Disebut juga Table Data digunakan untuk membuat kolom : Disebut juga Table Row digunakan untuk membuat sebuah

PUSAT PENGEMBANGAN BAHAN AJAR-UMB

Nenny Anggraini, S.Kom.

PEMOGRAMAN WEB

1

htm berikut ini : PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini. 3. Atribut BORDER mempunyai nilai 1. cukup menambahkan sepasang tag <TR> Perhatikan contoh berikut FILE : tabel1.1 Hasil tabel1. Bila ingin memberikan garis tersebut maka perlu ditambahkan atribut BORDER pada tag <TABLE>.ingin membuat lebih dari satu baris..htm <HTML> <HEAD> <TITLE>Tabel satu baris dua kolom</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD>Ko11 <TD>Ko12 </TR> </TABLE> </BODY> </HTML> Gambar 5. S... PEMOGRAMAN WEB 2 .Kom.htm Hasil dari file tabel1. 2.htm menunjukkan bahwa tabel tidak tidak menampilkan garis pembatas/garis tepi.dst yang memberikan efek ketebalan garis. Perhatikan penggunaan BORDER pada file tabel2. Makin besar nilainya berarti makin tebal juga garis yang terbentuk.

2 Hasil tabel2.htm <HTML> <HEAD> <TITLE>Tabel satu baris dua kolom dengan garis tepi</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TD>Kol1</TD> <TD>Kol2</TD> </TR> </TABLE> </BODY> </HTML> Gambar 5.htm <HTML> <HEAD> PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini.Kom. maka ditambahkan beberapa pasang tag <TR> dan beberapa pasang tag <TD> sebagai berikut : FILE : tabel3. PEMOGRAMAN WEB 3 . S.FILE : tabel2.htm Jika diinginkan pembuatan tabel dengan beberapa baris dan kolom.

PEMOGRAMAN WEB 4 . S.Kom. PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini.3 Hasil tabel3.<TITLE>Tabel tiga baris dua kolom </TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TD>Baris1Kol1</TD> <TD>Baris1Kol2</TD> </TR> <TR> <TD>Baris2Kol1</TD> <TD>Baris2Kol2</TD> </TR> <TR> <TD>Baris3Kol1</TD> <TD>Baris3Kol2</TD> </TR> </TABLE> </BODY> </HTML> Gambar 5.htm Contoh di atas akan menghasilkan tabel dengan tiga baris dan dua kolom.

2.Kom. PEMOGRAMAN WEB 5 . Untuk mengatur tata letak judul tabel. S. Membuat Judul Tabel Judul tabel dapat dibuat dengan menambahkan tag <CAPTION> dan </CAPTION>. Tag ini diletakkan setelah <TABLE>. Dan menggunakan nilai ”bottom” jika judul yang diinginkan berada di bawah tabel. FILE : tabel4.htm <HTML> <HEAD> <TITLE>Tabel dua baris dua kolom </TITLE> </HEAD> <BODY> <TABLE BORDER> <CAPTION ALIGN="top">TABEL DUA BARIS DAN DUA KOLOM</CAPTION> <TR> <TD>Baris1Kol1</TD> <TD>Baris1Kol2</TD> </TR> <TR> <TD>Baris2Kol1</TD> <TD>Baris2Kol2</TD> </TR> </TABLE> </BODY> </HTML> PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini. dapat digunakan atribut ALIGN dengan nilai ”top” jika judul yang diinginkan berada di atas tabel.5. Letak judul ini adalah tepat di atas tabelnya.

<CAPTION ALIGN="top"><DIV ALIGN=”right”>Judul Tabel</DIV></CAPTION> atau <CAPTION ALIGN="bottom"><DIV ALIGN=”left”>Judul Tabel</DIV></CAPTION> Selain judul tabel. biasanya baris dan kolom juga mempunyai judul. PEMOGRAMAN WEB 6 . Untuk mengatur kiri dan kanan. S. ”left”. dan ”center”.. </TH> (Table Heading). maka cukup mengganti nilai dari atribut ALIGN pada tag <CAPTION> menjadi ”bottom”.htm. Untuk membuat judul kolom atau judul baris cukup mengganti tag <TD> .Gambar 5.Kom. Jika judul ingin diletakkan di bawah tabel. digunakan bantuan sepasang tag <DIV> dengan atribut ALIGN yang mempunyai nilai ”right”. </TD> dengan tag <TH> .htm Perhatikan hasil file tabel4.htm <HTML> <HEAD> <TITLE>Judul baris dan Judul Kolom </TITLE> </HEAD> PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini.. Judul akan berada tepat di atas tabel dengan panjang karakternya mengikuti panjang tabel. Pengaturan Caption secara default adalah dibagian tengah sebelah atas tabel.4 Hasil tabel4. Perhatikan contoh berikut : FILE : tabel5.

S.Kom.<BODY> <TABLE BORDER> <TR> <TH><BR></TH> <TH>JUDUL KOLOM1</TH> <TH>JUDUL KOLOM2</TH> <TH>JUDUL KOLOM3</TH> </TR> <TR> <TH>JUDUL BARIS1</TH> <TD>Isi Tabel</TD> <TD>Isi Tabel</TD> <TD>Isi Tabel</TD> </TR> <TR> <TH>JUDUL BARIS2</TH> <TD>Isi Tabel</TD> <TD>Isi Tabel</TD> <TD>Isi Tabel</TD> </TR> </TABLE> </BODY> </HTML> PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini. PEMOGRAMAN WEB 7 .

maka posisi tabel secara default akan berada di sebelah kiri dalam jendela browser. Perhatikan contoh berikut : FILE : tabel6. tabel juga dapat diletakkan di tengah jendela browser.5 Hasil tabel5.3. Mengatur Posisi Tabel Biasanya jika tabel ditampilkan di dalam sebuah browser. 5. S. Selain posisi tabel berada disebelah kiri.htm <HTML> <HEAD> <TITLE>Letak tabel di tengah browser</TITLE> </HEAD> <BODY> <CENTER> <TABLE BORDER> <TR> <TD>Kol1</TD> <TD>Kol2</TD> </TR> </TABLE> </CENTER> </BODY> </HTML> PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini. PEMOGRAMAN WEB 8 . cukup menambahkan sepasang tag <CENTER> sebelum tag <TABLE>.htm Sel kosong pada baris kesatu dan kolom kesatu merupakan hasil dari tag <BR> yang diberikan di antara sepasang tag <TH> yang pertama. Untuk dapat meletakkan tabel di tengah-tengah jendela browser.Gambar 5.Kom.

6 Hasil tabel6.Kom.htm <HTML> <HEAD> <TITLE>CellSpacing & CellPadding </TITLE> </HEAD> <BODY> <CENTER> <TABLE BORDER="10" CellSpacing="10" CellPadding="15"> <TR> <TD>Baris1Kol1</TD> <TD>Baris1Kol2</TD> </TR> <TR> <TD>Baris2Kol1</TD> <TD>Baris2Kol2</TD> </TR> PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini. PEMOGRAMAN WEB 9 . Sedangkan atribut CELLPADDING berguna untuk mengatur teks dengan batas dalam. Atribut CELLSPACING digunakan untuk mengatur spasi/jarak diantara kolom dalam tabel dan antara kolom dengan batas luar. S. Kedua atribut ini masing-masing mempunyai nilai dalam satuan piksel.htm 5.Gambar 5. Perhatikan contoh berikut ini : FILE : tabel7. CellSpacing dan CellPadding Tag <TABLE> juga mempunyai atribut CELLSPACING dan CELLPADDING.4.

cukup menambahkan atribut ROWSPAN pada tag <TD> atau tag <TH>.7 Hasil tabel7. Artinya.Kom. Perhatikan contoh berikut untuk penggabungan baris : PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini. EXCEL.htm 5. 2. jika ingin menggabungkan dua buah baris menjadi satu baris atau 3 buah kolom menjadi saru kolom maka nilai atribut ROWSPAN=”2” dan nilai atribut COLSPAN=”3”. RowSapan dan ColSpan Anda seringkali melihat bahwa baris atau kolom tabel dapat digabungkan seperti baris atau kolom tabel yang dibuat pada MS.5. PEMOGRAMAN WEB 10 . S. Sedangkan untuk menggabungkan beberapa buah kolom menjadi satu kolom. …..<TR> <TD>Baris3Kol1</TD> <TD>Baris3Kol2</TD> </TR> </TABLE> </CENTER> </BODY> </HTML> Gambar 5. 3.dst. cukup menambahkan atribut COLSPAN pada tag <TD> atau tag <TH>. Atribut ROWSPAN dan COLSPAN masing-masing mempunyai nilai 1. Untuk menggabungkan beberapa buah baris menjadi satu.

htm <HTML> <HEAD> <TITLE>Penggabungan 2 baris jadi 1 baris </TITLE> </HEAD> <BODY> <CENTER> <TABLE BORDER="10" CellSpacing="10" CellPadding="15"> <TR> <TD ROWSPAN="2">Baris1Kol1 dan Baris2kol1</TD> <TD>Baris1Kol2</TD> </TR> <TR> <TD>Baris2Kol1</TD> </TR> <TR> <TD>Baris3Kol1</TD> <TD>Baris3Kol2</TD> </TR> </TABLE> </CENTER> </BODY> </HTML> PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini.Kom.FILE : tabel8. S. PEMOGRAMAN WEB 11 .

htm Pada contoh tabel8. terjadi penggabungan baris sebanyak dua baris.htm <HTML> <HEAD> <TITLE>Penggabungan 2 kolom menjadi 1 kolom </TITLE> </HEAD> <BODY> <CENTER> <TABLE BORDER="10" CellSpacing="10" CellPadding="15"> <TR> <TD>Kol1</TD> <TD>Kol2</TD> <TD>Kol3</TD> </TR> PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini. yaitu pada baris pertama klom pertama dan baris kedua kolom pertama.htm.Kom. Perhatikan contoh berikut ini : FILE : tabel9. PEMOGRAMAN WEB 12 .8 Hasil tabel8.Gambar 5. S. Selanjutnya akan digabungkan beberapa kolom menjadi satu kolom.

PEMOGRAMAN WEB 13 . proporsional dengan lebar window pada Browser.Kom. berarti lebar tabel adalah 75% dari lebar jendela browser yang tersedia. S.<TR> <TD>Kol1</TD> <TD COLSPAN="2">Kol2 dan Kol3</TD> </TR> </TABLE> </CENTER> </BODY> </HTML> Gambar 5. WIDTH=75%.htm 5.htm <HTML> <HEAD> <TITLE>Lebar tabel dan lebar kolom </TITLE> PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini. Contohnya. Fungsi Atribut Width Atribut WIDTH berguna untuk menentukan lebar dari tabel. Width dapat menggunakan satuan piksel atau persentasi. atau <TD>.9 Hasil tabel9. <TH>. Perhatikan contoh berikut ini : FILE : tabel10.6. Atribut WIDTH dapat digunakan pada tag <TABLE>.

maka seluruh lebar layar akan diambil.Kom. Tanpa WIDTH.htm Bila WIDTH=100%.</HEAD> <BODY> <CENTER> <TABLE BORDER="10" CellSpacing="10" CellPadding="15" WIDTH=100%> <TR> <TD WIDTH=30%>Lebar Kolom 30%</TD> <TD WIDTH=70%>Lebar Kolom 70%</TD> </TR> <TR> <TD>Lebar Kolom 30%</TD> <TD>Lebar Kolom 70%</TD> </TR> /TABLE> </CENTER> </BODY> </HTML> Gambar 5.10 Hasil tabel10. maka browser secara otomatis akan mengkalkulasi sendiri nilai WIDTH yang PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini. PEMOGRAMAN WEB 14 . S.

S.8. Dapat pula dikatakan bahwa suatu tabel yang tidak menggunakan atribut WIDTH untuk mengatur lebarnya. nilai ”right” menempatkan data pada sebelah kanan. dapat juga menggunakan atribut VALIGN (Vertical Alignment) yang berguna untukmenentukan penempatan data dalam cell. 5.htm <HTML> <HEAD> <TITLE>Pewarnaan Tabel </TITLE> </HEAD> <BODY> <CENTER> <TABLE BORDER="10" CellSpacing="10" CellPadding="15" WIDTH=100%> <TR> <TD BGCOLOR="Antiquewhite" WIDTH=40% ALIGN="right">Baris1Kol1</TD> <TD BGCOLOR="cyan"WIDTH=60% ALIGN="center">Baris1Kol2</TD> </TR> <TR> <TD BGCOLOR="skyblue">Baris2Kol1</TD> PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini.7. yang mengatur penempatan data. Fungsi Atribut ALIGN dan VLIGN Elemen dalam tabel data dapat menggunakan atribut ALIGN. Warna biasanya digunakan dalam tabel tanpa menggunakan BORDER. dengan nilai “top” untuk di atas. nilai ”center” menempatkan data ditengah. PEMOGRAMAN WEB 15 . Artinya lebar tabel tersebut akan ditentukan oleh objek yang mengisi tabel tersebut.dipelukan. 5. Atribiut ALIGN mempunyai nilai ”left” yang akan menempatkan data dari sebelah kiri (default). Perhatikan contoh berikut : FILE : tabel11. nilai “middle” untuk di tengah. Pewarnaan Pada Tabel Warna berguna untuk memperjelas dan memperindah tampilan tabel. Selain atribut ALIGN.Kom. Warna dinyatakan dalam atribut BGCOLOR (BackGround Color). nilai “bottom” untuk di bawah. maka lebar tabel tersebut relatif terhadap isi suatu tabel. yang dapat diisi dengan nilai heksadesimal atau langsung dengan nama warna yang telah didefinisikan oleh browser.

S. PEMOGRAMAN WEB 16 .11 Hasil tabel11.htm 5.9. Jika panjang teks tersebut melebihi lebar tabel yang ditetapkan dengan atribut WIDTH maka tabel akan diperpanjang. Jika sudah diberikan atribut NOWRAP.<TD BGCOLOR="gray">Baris2Kol2</TD> </TR> <TR> <TD BGCOLOR="green">Baris3Kol1</TD> <TD BGCOLOR="pink">Baris3Kol2</TD> </TR> </TABLE> </CENTER> </BODY> </HTML> Gambar 5.Kom. Atribut NOWRAP Jika teks yang diisikan pada cell sangatlah panjang dan ingin ditampilkan dalam satu baris saja. maka penggunaan atribut WIDTH tidak akan berpengaruh. Perhatikan contoh berikut ini : PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini. maka gunakanlah atribut NOWRAP pada tag <TD> atau tag <TH>.

PEMOGRAMAN WEB 17 . S.Kom.htm <HTML> <HEAD> <TITLE>Penggunaan atribut NOWRAP</TITLE> </HEAD> <BODY> <CENTER> <TABLE BORDER WIDTH=75%> <TR> <TD WIDTH=20% NOWRAP>Teks teks Teks teks Teks teks Teks teks Teks teks</TD> <TD WIDTH=80%>Teks teks Teks teks Teks teks Teks teks</TD> </TR> </TABLE> </CENTER> </BODY> </HTML> PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini.FILE : tabel12.

Kom.Gambar 5. PEMOGRAMAN WEB 18 .htm ---------------------------------------Latihan Untuk Dikerjakan Di Laboratorium Komputer Buatlah seluruh contoh file program yang ada di dalam BAB 5 dengan menggunakan kode-kode HTML ! Latihan Untuk Dikerjakan Di Rumah Buatlah program dengan menggunakan editor NOTEPAD dengan hasil yang ditampilkan browser sebagai berikut : PUSAT PENGEMBANGAN BAHAN AJAR-UMB Nenny Anggraini.12 Hasil tabel12. S.