endradwiputra@gmail.

com
pemrograman web 1

TABEL HTML

Tag tabel <table>html berfungsi untuk membuat suatu data multidimensi yang terdiri atas kolom
dan baris.
Tabel dapat digunakan untuk membuat suatu bentuk informasi yang ditampilkan dalam bentuk
kotak-kotak, yang biasanya terdiri kolom dan baris. Selain itu dengan tabel kita bisa mengatur
tampilan yang ada pada sebuah halaman web kedalam bentuk tampilan tertentu.

Tag yang digunakan untuk membuat tabel di HTML sebenarnya hanya 3 saja, yaitu :
1. <t abl e> </ t abl e>
Tag <table>menunjukkan bagian awal dari tabel dan tag </table>menunjukkan akhir.
2. <t r > <t r / >
Tag <tr>menunjukkan awal baris dan tag <tr/>menjukkan akhir baris.
3. <t d> </ t d>
Tag <td>menunjukkan awal kolom dan tag </td>menunjukkan akhir kolom.

Catatan:

Sebuah tabel HTML minimal memiliki sepasang tag <table>, sepasang tag <tr> dan satu pasang
tag <td>. Sementara setiap tag <td> selalu diapit oleh tag <tr>.

Bentuk minimal tabel HTML :

<t abl e>
<t r >
<t d> . . . </ t d>
</ t r >
</ t abl e>

Contoh Tabel Sederhana :

Tuliskan kode html dibawah ini di text editor, yang saya gunakan disini adalah notepad. Simpan
dengan nama tabel.html

<t abl e >
<t r >
<t d> i si kol om1 bar i s 1</ t d>
<t d> i si kol om2 bar i s 1</ t d>
</ t r >
<t r >
<t d> i si kol om1 bar i s 2</ t d>
<t d> i si kol om2 bar i s 2</ t d>
</ t r >
</ t abl e>

Buka file tabel.html dengan browser, maka hasilnya menjadi seperti dibawah ini :



J ika kita ingin menambahkan garis di tabel cukup dengan menambahkan atribut border menjadi 1.
J ika atribut border tidak disertakan maka tabel dianggap memiliki border dengan nilai 0.
endradwiputra@gmail.com
pemrograman web 2


<t abl e bor der ="1">
<t r >
<t d> i si kol om1 bar i s 1</ t d>
<t d> i si kol om2 bar i s 1</ t d>
</ t r >
<t r >
<t d> i si kol om1 bar i s 2</ t d>
<t d> i si kol om2 bar i s 2</ t d>
</ t r >
</ t abl e>

Maka saat di buka di browser hasilnya akan menjadi :




Membuat Judul Tabel HTML

Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption>tepat setelah tag
<table>. Tag <caption>secara otomatis berada pada posisi tengah. Formatnya sebagai berikut :

<capt i on> . . . </ capt i on>

silahkan simpan kode di berikut dengan nama judultabel.html

<t abl e bor der ="1">
<capt i on>Di si ni adal ah t i t el t abel i ni </ capt i on>
<t r >
<t d>Bar i s 1 Kol om1</ t d>
<t d>Bar i s 1 Kol om2</ t d>
</ t r >
<t r >
<t d>Bar i s 2 Kol om1</ t d>
<t d>Bar i s 2 Kol om2</ t d>
</ t r >
</ t abl e>

Hasilnya saat dibuka lewat browser seperti berikut ini :




Membuat Header pada Tabel HTML

Untuk membuat header pada tabel, kita bisa menambahkan tag <th>. Tag <th>mendefinisikan isi
sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel.
Tag <th>harus terletak di dalam element <tr>.

silahkan simpan kode di berikut dengan nama headertabel.html

<t abl e bor der ="1">
<t r >
<t h>Header Kol om1</ t h>
endradwiputra@gmail.com
pemrograman web 3

<t h>Header Kol om2</ t h>
</ t r >
<t r >
<t d>Bar i s 2 Kol om1</ t d>
<t d>Bar i s 2 Kol om2</ t d>
</ t r >
<t r >
<t d>Bar i s 3 Kol om1</ t d>
<t d>Bar i s 3 Kol om2</ t d>
</ t r >
</ t abl e>

Hasilnya saat dibuka lewat browser seperti berikut ini :

Perataan Tabel di HTML

Untuk melakukan pengaturan perataan tabel, kita harus menambahkan atribut align pada tag
<table>. Nilai atribut align adalah left, center, dan right. Tuiskan kode HTML dibawah ini dan
simpan dengan nama perataantabel.html

<t abl e bor der ="1" al i gn="cent er ">
<t r >
<t d> al i gn cent er </ t d>
<t d> al i gn cent er </ t d>
</ t r >
<t r >
<t d> al i gn cent er </ t d>
<t d> al i gn cent er </ t d>
</ t r >
</ t abl e> <br / >
<br / >

<t abl e bor der ="1" al i gn="r i ght ">
<t r >
<t d> al i gn r i ght </ t d>
<t d> al i gn r i ght </ t d>
</ t r >
<t r >
<t d> al i gn r i ght </ t d>
<t d> al i gn r i ght </ t d>
</ t r >
</ t abl e> <br / >
<br / >

<t abl e bor der ="1" al i gn="l ef t ">
<t r >
<t d> al i gn l ef t </ t d>
<t d> al i gn l ef t </ t d>
endradwiputra@gmail.com
pemrograman web 4

</ t r >
<t r >
<t d> al i gn l ef t </ t d>
<t d> al i gn l ef t </ t d>
</ t r >
</ t abl e>

Maka hasilnya jika dilihat menggunakan browser akan seperti berikut ini :









Pengaturan tinggi dan lebar tabel di HTML

Agar lebar atau tinggi tabel tidak berubah-ubah, kita dapat menentukan ukuran tinggi dan lebar
tabel. Caranya dengan menambahkan atribut height untuk nilai tinggi tabel sedangkan width
untuk menyimpan nilai lebar tabel. Nilai tinggi dan lebar dalam satuan pixels. Simpan kode
HTML berikut ini dengan nama tinggidanlebartabel.html

<t abl e hei ght ="150" wi dt h="400" bor der ="1">
<t r >
<t d> Bar i s 1 Kol om1</ t d>
<t d> Bar i s 1 Kol om2</ t d>
</ t r >
<t r >
<t d> Bar i s 2 Kol om1</ t d>
<t d> Bar i s 2 Kol om2</ t d>
</ t r >
</ t abl e>

Maka akan menghasilkan tabel dengan tinggi 150px dan lebar 400px seperti dibawah ini :

Mengatur Tinggi dan Lebar kolom tabel HTML

Untuk mengatur tinggi dan lebar kolom kita tinggal menyisipkan atribut height untuk tinggi kolom
dan atribut width untuk lebar kolom di tag <td>. Nilai tinggi dan lebar dalam satuan pixels.
Simpan kode dibawah ini dengan nama tinggidanlebarkolom.html

endradwiputra@gmail.com
pemrograman web 5

<t abl e bor der ="1">
<t r >
<t d wi dt h="200" hei ght ="100"> Bar i s 1 Kol om1 </ t d>
<t d > Bar i s 1 Kol om2 </ t d>
</ t r >
</ t abl e>

Hasilnya jika dibuka dibrowser akan seperti berikut ini :

Catatan :
Jika Kolom A tingginya 70px maka kolom B dan C akan ikut menjadi 70 tingginya meskipun tidak
diatur tingginya. Tinggi kolom akan mengkikuti tinggi salah satu kolom yang tertinggi. Hal ini
tidak berlaku untuk lebar kolom.

Mengatur Perataan Kiri Kanan Kolom Tabel HTML

Untuk meratakan kolom secara kiri kanan kita tinggal menyisipkan atribut align di tag <td>.
Formatnya sebagai berikut :

<t d al i gn=l ef t | cent er | r i ght > . . . </ t d>

Silahkan simpan kode di berikut dengan nama perataankikakolom.html

<t abl e wi dt h="500" hei ght ="50" bor der ="1">
<t r >
<t d al i gn="l ef t "> Bar i s 1 Kol om1 </ t d>
<t d al i gn="cent er "> Bar i s 1 Kol om2 </ t d>
<t d al i gn="r i ght "> Bar i s 1 Kol om3 </ t d>
</ t r >
</ t abl e>



Hasil perataan saat dibuka melalui browser akan seperti berikut ini :


Mengatur Perataan Atas Bawah Kolom Tabel HTML

Untuk meratakan kolom kita tinggal menyisipkan atribut valign di tag <td>. Formatnya sebagai
berikut :

<t d val i gn=t op| cent er | bot t om> . . . </ t d>

silahkan simpan kode di berikut dengan nama perataanabkolom.html

endradwiputra@gmail.com
pemrograman web 6

<table width="500" height="150" border="1">
<tr>
<td valign="top">vertical align top </td>
<td valign="center">vertical align center </td>
<td valign="bottom">vertical align bottom </td>
</tr>
</table>

Hasil perataan saat dibuka lewat browser seperti berikut ini :


Memberi Warna Latar Belakang Tabel

Tabel yang dibuat tidak mutlak hanya berwarna putih/transparan dengan garis berwarna hitam saja,
melainkan warna background tabel juga bisa berubah. Untuk menambahkan warna latar belakang
tersebut tabel, anda bisa menggunakan atribut bgcolor pada tag <table>. Untuk pemberian
nilai(warna) pada atribut bgcolor dapat dilihat kembali pada tabel warna yang sudah dibahas pada
bab sebelumnya. Cara penulisan kodenya dapat diperhatikan pada penggalan kode program berikut
ini.

<html>
<head>
</head>
<body>
<table border="1" bgcolor="yellow">
<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>
</table>
</body>
</html>
Berikut ini hasil tabel yang telah diberi warna latar belakang seperti berikut ini :


endradwiputra@gmail.com
pemrograman web 7

Kode program di atas digunakan untuk memberikan warna background/seluruh tabel. Sedangkan
apabila kita hanya ingin memberikan warna pada sebuah sel saja atau warna teks dalam sebuah
tabel, penulisan kode program dapat dilihat pada penggalan kode program berikut ini :

<html>
<head>
</head>
<body>
<table border="1" bgcolor="yellow">
<tr>
<td bgcolor=red>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>
</table>
</body>
</html>

Berikut ini hasil tabel yang telah diberi warna latar belakang seperti berikut ini :


Cara Menggabungkan Kolom di Tabel HTML

Tips :
Saat Anda ingin menggabungkan kolom atau baris, sebaiknya sertakan border=0 di bagian
tabel. Ini berfungsi untuk mengetahui apakah tabel yang kita inginkan sudah sesuai atau belum.

J ika sudah sesuai border bisa di hapus dengan cara mengubar nilai border menjadi 0 atau
menghapus tag border=0 dari tag <table>. J ika ingin tetap menggunakan border maka tidak
perlu merubah apapun.


Contoh kasus menggabungkan kolom :

Misalnya kita ingin menggabungkan 3 kolom menjadi satu. Namun kolom yang lain tetap.
Formatnya adalah :

<t d col span=1| 2. . . . dst > . . . </ t d>

Contoh tabel yang belum disatukan ( belum di colspan ) kolomnya berdasarkan kasus diatas :

<t abl e bor der ="1">
endradwiputra@gmail.com
pemrograman web 8

<t r >
<t d> 3 Kol omJ adi Sat u </ t d>
</ t r >
<t r >
<t d> Bar i s 2 Kol om1</ t d>
<t d> Bar i s 2 Kol om2</ t d>
<t d> Bar i s 2 Kol om3</ t d>
</ t r >
</ t abl e>

Berikut ini hasil tabel yang belum di colspan kolomnya :

Untuk menggabungkan 3 kolom di baris pertama pada tabel maka kita harus mengubah kode
HTML tabel diatas menjadi seperti ini :
<t abl e bor der ="1">
<t r >
<t d colspan="3"> 3 Kol omJ adi Sat u </ t d>
</ t r >
<t r >
<t d> i si kol om1 bar i s 2</ t d>
<t d> i si kol om2 bar i s 2</ t d>
<t d> i si kol om3 bar i s 2</ t d>
</ t r >
</ t abl e>

Maka hasilnya akan menjadi seperti ini :

Bila ingin tulisan pada cel 3 Kolom Jadi Satu menjadi rata tengah, tinggal menambahkan attribute
align dengan nilai center pada tag <td>.

<t abl e bor der ="1">
<t r >
<t d colspan="3" align=center> 3 Kol omJ adi Sat u </ t d>
</ t r >
<t r >
<t d> i si kol om1 bar i s 2</ t d>
<t d> i si kol om2 bar i s 2</ t d>
<t d> i si kol om3 bar i s 2</ t d>
</ t r >
</ t abl e>




endradwiputra@gmail.com
pemrograman web 9

Maka hasilnya akan menjadi seperti ini :



Cara Menggabungkan Baris di Tabel HTML

Misalnya kita ingin menggabungkan 2 baris terakhir menjadi satu. Namun baris yang lain tetap.
Formatnya adalah :

<t d r owspan=j uml ah bar i s yang i ngi n di sat ukan> . . . </ t d>

Contoh tabel yang belum disatukan barisnya ( belum di rowspan ) berdasarkan kasus diatas:

<t abl e bor der ="1">
<t r >
<t d> Bar i s 1 Kol om1</ t d>
<t d> 2 Bar i s J adi Sat u</ t d>
</ t r >
<t r >
<t d> Bar i s 2 Kol om1</ t d>
</ t r >
</ t abl e>

Berikut ini hasil tabel yang barisnya belum disatukan ( belum di rowspan barisnya ) :

Untuk menggabungkan 2 baris di kolom ke-2 pada tabel maka kita harus mengubah kode HTML
tabel diatas menjadi seperti ini :

<t abl e bor der ="1">
<t r >
<t d> i si kol om1 bar i s 1 </ t d>
<t d rowspan=2> 2 bar i s j adi sat u</ t d>
</ t r >
<t r >
<t d> i si kol om1 bar i s 2</ t d> </ t r >
</ t abl e>

Maka hasilnya akan menjadi seperti ini :