Anda di halaman 1dari 21

TABEL

Untuk menciptakan tabel yang berisi baris (row) dan kolom . Berikut ini adalah
beberapa tag yang sering digunakan dalam membuat tabel :

Tag Keterangan

<TABLE> Mengawali pembentukan sebuah tabel

<CAPTION> Menentukan judul sebuah tabel

<TR> Membuat sebuah baris dalam tabel

<TD> Membuat sebuah sel data

<TH> Membuat judul kolom ( huruf terlihat tebal )

 HEADING DALAM TABLE

Heading dalam tabel dibuat dengan tag <th>


Contoh 1:
<table border="0">
<tr>
<th>Heading</th>
<th>Heading lain</th>
</tr>
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>

Hasilnya:
 MEMBERI GARIS PADA TABEL

Untuk memberi garis pada tabel, kita bisa menggunakan atribut BORDER pada tag
<table>. Bentuk nya adalah:

<table border=”nilai”>

Jika atribut border tidak disertakan di dalam tag table, nilai border dianggap sama
dengan nol, sehingga garis tidak akan ditampilkan seperti pada contoh 1. Dengan kata
lain identik dengan

<table border=”0”>

Contoh 2 :
<HTML>
<HEAD>
<TITLE>Tabel dengan Garis</TITLE>
</HEAD>
<BODY>
<TABLE BORDER = "1">
<CAPTION>Daftar Harga Keladi</CAPTION>
<TR><TH>Nama</TH><TH>Harga</TH></TR>
<TR><TD>Red Flash</TD><TD>35.000</TD></TR>
<TR><TD>Red Fire</TD><TD>60.000</TD></TR>
<TR><TD>Fannie Munson</TD><TD>60.000</TD></TR>
</TABLE>
</BODY>
</HTML>
Hasilnya :
Pada kode di atas, <table>..</table> merupakan bagian terluar dalam pendefinisian
tabel. Di dalam pasangan tag tersebut, pasangan <caption>..</caption> digunakan untuk
menentukan judul tabel. Selanjutnya,
<TR><TH>Nama</TH><TH>Harga</TH></TR>
Digunakan untuk membentuk baris yang berisi dua buah sel, yakni karena ada dua buah
pasangan <th>..</th>. Sebuah baris dibentuk oleh pasangan <tr>..</tr>. Perlu diketahui,
pasangan <th>..</th> akan membuat teks dalam keadaan tebal.
<TR><TD>Red Flash</TD><TD>35.000</TD></TR>
Serupa dengan <TR><TH>Nama</TH><TH>Harga</TH></TR>
Yang berbeda adalah, teks tidak tebal.

Contoh 3:
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Nama</th>
<th>Telepon</th>
<th>JK</th>
</tr>
<tr>
<td>Andi</td>
<td>085666666111</td>
<td>pria</td>
</tr>
</table>

<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>Nama</th>
<td>Andi</td>
</tr>
<tr>
<th>Telepon</th>
<td>085666666111</td>
</tr>
<tr>
<th>JK</th>
<td>Pria</td>
</tr>
</table>

</body>
</html>
Hasilnya:

 MELETAKKAN JUDUL DI BAWAH TABEL

Untuk menampilkan judul di bawah tabel, atribut yang digunakan adalah align=”bottom”
yang berada pada tag <caption>

Contoh :
<HTML>

<HEAD>

<TITLE>Judul dibawah tabel</TITLE>

</HEAD>

<BODY>

<TABLE BORDER = "1">

<CAPTION align="bottom">Daftar Harga Keladi</CAPTION>

<TR><TH>Nama</TH><TH>Harga</TH></TR>

<TR><TD>Red Flash</TD><TD>35.000</TD></TR>

<TR><TD>Red Fire</TD><TD>60.000</TD></TR>

<TR><TD>Fannie Munson</TD><TD>60.000</TD></TR>

</TABLE>

</BODY>

</HTML>

Hasilnya:
Dari contoh di atas, terlihat walaupun kita menuliskan teks ‘daftar harga keladi’ di
bagian atas tabel, tapi karena penulisannya di dalam tag <caption> dan menggunakan
atribut align=”bottom”, maka teks judul akan muncul di bagian bawah dari tabel

 MENENTUKAN WARNA LATAR BELAKANG TABEL

Untuk menambahkan warna latar belakang terhadap tabel, anda bisa menggunakan
atribut bgcolor pada tag <table>, nilai yang digunakan untuk bgcolor sudah dijelaskan di
depan, yaitu bisa menggunakan RGB atau bisa juga menggunakan nama warna dalam
bahasa inggris.

Contoh:

<HTML>

<HEAD>

<TITLE>Tabel dengan Garis</TITLE>

</HEAD>

<BODY>

<TABLE BORDER = "1" bgcolor="aqua">

<CAPTION align="bottom">Daftar Harga Keladi</CAPTION>

<TR><TH>Nama</TH><TH>Harga</TH></TR>
<TR><TD>Red Flash</TD><TD>35.000</TD></TR>

<TR><TD>Red Fire</TD><TD>60.000</TD></TR>

<TR><TD>Fannie Munson</TD><TD>60.000</TD></TR>

</TABLE>

</BODY>

</HTML>

Hasilnya:

Dari contoh terlihat bahwa background tabel berubah warna menjadi warna aqua.

Contoh berikut menunjukkan pewarnaan tabel melalui bgcolor pada <table> dan <td>,
dan sekaligus menunjukkan cara mengatur warna teks pada sebuah kolom.

Contoh:

<html>

<head>

<title>warna tabel</title>

</head>

<body>

<table border="1" bgcolor="#00CC99">

<tr>
<td bgcolor="green">kolom satu baris satu</td>

<td>kolom dua baris satu</td>

</tr>

<tr>

<td>kolom dua baris satu</td>

<td bgcolor="#993399">

<font color="#FFFFFF">

kolom dua baris dua

</font>

</td>

</tr>

</table>

</body>

</html>

Hasilnya:

Bgcolor pada tag <table> digunakan untuk mengatur warna latar belakang tabel agar
berubah warna menjadi #00CC99 , sedangkan
Bgcolor pada tag <td> digunakan untuk membuat sel yang yang bersangkutan latar
belakangnya berubah warna sesuai nilai yang dimasukkan pada atribut bgcolor.

 MENGGABUNGKAN SEL

HTML memungkinkan kita untuk menggabung sel pada tabel. Baik penggabungan
kolom maupun penggabungan baris.

Atribut yang digunakan:

 Rowspan : untuk menggabungkan beberapa baris

 Colspan : untuk menggabungkan beberapa kolom

Contoh rowspan:

<html>

<head>

<title>warna tabel</title>

</head>

<body>

<table border="1">

<tr>

<td rowspan="3">Nama</td>

<td>Andi</td>

</tr>

<tr>

<td>Siska</td>

</tr>

<tr>

<td>Lia</td>

</tr>

</table>

</body>
</html>

Hasilnya:

Contoh Colspan:

<html>

<head>

<title>warna tabel</title>

</head>

<body>

<table border="1">

<tr>

<td colspan="3" align="center">Kelas</td>

</tr>

<tr>

<td>satu</td>

<td>dua</td>

<td>tiga</td>

</tr>

</table>
</body>

</html>

Hasilnya:

Dari contoh di atas, terlihat ada dua baris, untuk baris pertama terdapat satu kolom,
sedangkan untuk baris kedua terdapat tiga kolom.

 MENGATUR PELETAKAN TABEL DALAM HALAMAN

Atribut align pada tag <tr></th> dan <td> dapat digunakan untuk mengatur peletakan teks
dalam keadaan rata kiri, rata kanan, atau rata tengah. Nilai untuk align dapat dilihat pada tabel
berikut:

Align dan nilainya Keterangan

Align = “left” Teks diatur rata kiri

Align = ”center” Teks ditengahkan

Align = “right” Teks diatur rata kanan

Contoh :

<html>

<head>

<title>warna tabel</title>

</head>

<body>
<table border="1">

<tr>

<td colspan="3" align="center">Nilai</td>

</tr>

<tr>

<td>modul 1</td>

<td>modul 2</td>

<td>modul 3</td>

</tr>

<tr>

<td align = "left">70</td>

<td align = "center">98</td>

<td align = "right">80</td>

</tr>

</table>

</body>

</html>

Hasil

 MENGATUR TINGGI SEL

Untuk mengatur tinggi sel, kita bisa menggunakan atribut height pada tag <table>
dengan suatu nilai (yang dinyatakan dengan satuan piksel).

<html>

<body>

<table border="1">
<tr>

<th>Nama</th>

<th>Telepon</th>

<th>JK</th>

</tr>

<tr>

<td>Andi</td>

<td>085666666111</td>

<td>pria</td>

</tr>

</table>

<br>

<table border="1"height ="150">

<tr>

<th>Nama</th>

<th>Telepon</th>

<th>JK</th>

</tr>

<tr>

<td>Andi</td>

<td>085666666111</td>

<td>pria</td>

</tr>

</table>

</body>

</html>
 PENGATURAN TEKS PADA POSISI VERTIKAL

Di dalam sebuah sel, teks dapat diatur menurut posisi vertikal apakah akan diletakkan di
atas, di tengah, atau di bawah. Hal ini bisa dilakukan dengan menggunakan atribut valign
pada tag <th>, <tr>, dan <td>

Nilai untuk atribut valign

Nilai valign Keterangan

top Teks diletakkan di bagian atas pada sel

Middle Teks diletakkan di bagian tengah pada sel

bottom Teks diletakkan di bagian bawah pada sel

Contoh:

<html>

<head>

<title>warna tabel</title>

</head>

<body>

<table height="200" border="1">

<tr>

<td valign="top">valign = top</td>

</tr>

<tr>

<td valign="middle">valign = middle</td>


</tr>

<tr>

<td valign="bottom">valign = bottom</td>

</tr>

</table>

</body>

</html>

Hasil:

 MENGATUR LEBAR TABEL DAN SEL

Atribut width pada tag <table> dapat digunakan untuk mengatur lebar tabel tanpa
tergantung oleh ukuran jendela browser.

Contoh:

<html>

<body>

<table border = "1">


<tr>

<td>NIM</td><td>Nama</td>

</tr>

<tr>

<td>095410014</td><td>Agus</td>

</tr>

</table>

<br>

<table border = "1" width="200">

<tr>

<td>NIM</td><td>Nama</td>

</tr>

<tr>

<td>095410014</td><td>Agus</td>

</tr>

</table>

</body>

</html>

Hasilnya:
Contoh diatas menunjukkan pengaturan lebar tabel sebesar 200 piksel.

Contoh lain :

<html>

<body>

<table border = "1">

<tr>

<td>NIM</td><td>Nama</td>

</tr>

<tr>

<td>095410014</td><td>Agus</td>

</tr>

</table>

<br>

<table border = "1" width="75%">

<tr>

<td>NIM</td><td>Nama</td>

</tr>
<tr>

<td>095410014</td><td>Agus</td>

</tr>

</table>

</body>

</html>

Width = “75%” menyatakan bahwa lebar tabel sebesar 75% terhadap lebar jendela
browser

Width juga dapat dikenakan pada pada sel tertentu, dengan cara menyebutkannya pada
tag <TD> atau <TH>

 MENGATUR JARAK DALAM TABEL

Pada tag <table> terdapat dua buah atribut lagi yang dapat digunakan untuk mengatur
jarak dalam tabel.

atribut keterangan

cellpadding Mengatur jarak teks terhadap tepi kiri

Cellspasing Mengatur jarak bagian sel terhadap tepi dalam


bingkai tabel
Contoh :

<html>

<body>

<table border = "1">

<tr>

<td>NIM</td><td>Nama</td>

</tr>

<tr>

<td>095410014</td><td>Agus</td>

</tr>

</table>

<br>

<table border = "1" cellpadding = "20" cellspacing ="10">

<tr>

<td>NIM</td><td>Nama</td>

</tr>

<tr>

<td>095410014</td><td>Agus</td>

</tr>

</table>

</body>

</html>
Tabel dengan pengaturan border, cellpadding dan cellspacing dapat dimanfaatkan
untuk pembuatan tombol

Contoh :

<html>

<body>

<table border = "10" cellspacing ="10" cellpadding ="5"


bgcolor="black">

<tr>

<td><font color = "white"><B>e-mail</font></td>

</tr>

</table>

</body>

</html>
Hasil tampilan :

 TABEL DAN GAMBAR

Cell pada tabel tidak harus berupa teks, melainkan juga bisa diisi dengan gambar.

Contoh :

<html>

<body>

<table border ="2">

<tr>

<th>Gambar</th><th>Keterangan</th>

</tr>

<tr>

<td><img src="dingin.gif"</td><td>kedinginan</td>

</tr>

</table>

</body>

</html>

Hasil tampilan :