www.aefil.

com
Free tutorial komputer

Lisensi Dokumen:
Copyright © 2011www.aefil.com
Seluruh tutorial di www.aefil.Com dapat digunakan, dimodifikasi dan disebarkan secara
bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau
merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap
dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin
terlebih dahulu dari www.aefil.Com.

HTML(1) Belajar Tabel

Hmm... minumannya dah disiapin blom, … biar lebih rileks gituh!!!!.. sekarang lagi malam atau
siang sih??? wah... jawaban benarnya apa ya?? massa uda gede' ngk bisa ngejawab?? kalo saya
jawabnya “tergantung” he..he..e

Didalam sebuah website bisa dikatakan pasti ada sebuah tabel, Hmm.. kalo ngk percaya coba
survey aja dulu,,.. baru dilanjutin lagi... Nah... sebuah tabel dibuat sebagai mempermudah
pembacaan suatu data ataupun untuk mendisign halaman web secara keseluruhan... tapi.. untuk
alasan yang terakhir ini sudah sangat jarang dilakukan oleh programmer.. kebanyakan dah
menggunakan CSS..

Walau gituh.. sebagai tahap awal, ngk dosa kok design website dengan menggunakan tabel...
Ok!!! Sebuah tabel terdiri atas :

<table>
<tr>
<td></td>
<td></td>
</tr>
</table>

Nah.. jadi sebuah tabel harus dimulai dari tag <table> dan ditutup oleh </table>, tag <table>
menginstruksikan kepada browser agar menampilkannya dalam bentuk sebuah tabel.

<table>....</table>

Copyright © 2009 www.aefil.com 1

www.aefil.com
Free tutorial komputer

Kemudian biasanya didalam tabel terdiri atas baris baris dan kolom. Tag <tr> ditutup </tr>
menginstruksikan kepada browser untuk menampilkan sebuah baris.

<table>

<tr> …. </tr>

</table>

Belum pusingkan??? minum dulu deh..... gmn?? dah lebih rileks kan???
kemudian didalam sebuah baris selalu ada kolom, untuk menampilkan sebuah kolom gunakan
tag <td>dan ditutup </td>. Adapun banyak jumlah tag <td></td> tidak terbatas sesuai dengan
kebutuhan anda.

<table>

<tr>
<td> …. </td>
<td> … </td>>
</tr>

<tr>
<td> …. </td>
<td> … </td>
</tr>
<table>

Perlu diketahui bahwa jumlah normal tag didalam tabel adalah simetris, maksudnya jumlah
<td> didalam <tr> harus selalu sama, kalau didalam <tr> yang satu, jumlah<td> sebanyak dua
buah, maka didalam <tr> yang lain jumlah <td> nya harus sama.

Skrip diatas akan menampilkan sebuah tabel dengan sebuah baris dan didalam baris tersebut
terdapat dua buah kolom. Seperti tabel 1.1 dibawah ini.

Tabel 1.1
aefil: “Kok tabelnya ngk nongol???? wah.... bohong nih!!!,

Copyright © 2009 www.aefil.com 2

www.aefil.com
Free tutorial komputer

Stttt.... tunggu dulu!!!! itu dikarenakan bingkainya ngk diberikan nilai, nah pada bagian <table>
ubah menjadi <table border=”1”> , gmn ??? dah muncul blom??? dah bisakan!!! he..hee.
Adapun angka 1 menunjukan lebar dari bingkai tersebut, jadi semakin tinggi nilai yang
diberikan maka bingkai semakin tebal.

aefil: “saya punya tabel seperti ini cara buatnya gmn??

K1 K2
K3 K4

Tabel 1.2

Hmmm....
Ntar... ya.. minum dulu, biar lebih segar gituu... saya tadi kelupaan di tag <td> bisa
ditambahkan atribut :
• rowspan yang fungsinya untuk menggabung kolom dengan kolom yang berada
dibawah kolom tersebut.
◦ <td rowspan=”2”> artinya menggabung dua buah kolom secara vertikal
◦ <td rowspan=”5”> artinya menggabung lima buah kolom secara vertikal

• colspan yang fungsinya untuk menggabung sebuah atau beberapa buah kolom, yang
berada disamping kanannya, sebagai contoh
◦ <td colspan=”2”> artinya menggabung dua buah kolom secara horizontal
◦ <td colspan=”5”> artinya menggabung lima buah kolom secara horizontal

dengan kata lain:

• <td colspan=”2”> </td> akan bergabung dengan 1 buah kolom yang

disampingnya.
• <td colspan=”3”> </td> akan bergabung dengan 2 buah kolom yang
disampingnya.
• <td colspan=”6”> </td> akan bergabung dengan 5 buah kolom di sampingnya.

Copyright © 2009 www.aefil.com 3

www.aefil.com
Free tutorial komputer

• <td rowspan=”2”> </td> akan bergabung dengan 1 buah kolom yang

dibawahnya.
• <td rowspan=”4”> </td> akan bergabung dengan 3 buah kolom yang ada
dibawahnya.
• <td rowspan=”8”> </td> akan bergabung dengan 7 buah kolom yang ada
dibawahnya.

K1 K2
K3 K4
Tabel 1.3

untuk skrip tabel 1.3

<table border=”1”>
<tr>
<td> K1 </td>
<td> K2 </td>
</tr>

<tr>
<td>K3 </td>
<td> K4 </td>
</tr>
</table>

Pada tabel 1.2 bisa kita lihat bahwa kolom K1 digabung dengan kolom yang disampingnya yaitu
K2, maka kita menggunakan colspan untuk menggabungkan dua buah kolom, colspan
diletakkan di <td>K1</td> sehingga menjadi <td colspan=”2”>K1 K2</td>, maka K1 akan
bergabung dengan kolom yang disampingnya, sehingga <td>K2</td> tidak perlu dituliskan
lagi. Adapun skrip lengkap tabel 1.2:

<table border=”1”>
<tr>
<td colspan=”2”>K1 K2</td>
</tr>

Copyright © 2009 www.aefil.com 4

www.aefil.com
Free tutorial komputer

<tr>
<td>K3 </td>
<td> K4 </td>
</tr>
</table>

aefil : gmn kalo yang seperti ini:

K1 K2 K3
K4 K5 K6
Tabel 1.4

Untuk ngejawabnya... kita minum dulu lagi ya!!!! wissh.. krn kebanyakan minummm, gw
ketoilet dulu, dah ngk nahan nih!!! he..hee.........

Nah... dah lega!!!!..

Kita lanjutin lagi ya!!! Tabel 1.4 bisa kita gambar dulu seperti tabel 1.5 ini:

K1 K2 K3
K4 K5 K6
Tabel 1.5

adapun skrip untuk tabel 1.5 adalah:

<table border=”1”>
<tr>
<td>K1</td>
<td>K2</td>
<td>K3</td>
</tr>

<tr>
<td>K4</td>
<td>K5</td>
<td>K6</td>
</tr>
</table>

Copyright © 2009 www.aefil.com 5

www.aefil.com
Free tutorial komputer

Pada tabel 1.4 kolom K2 dan K3 telah bergabung, kita menggunakan colspan untuk
menggabung dua buah kolom yang bersampingan, colspan diletakkan di <td>K2</td>
sehingga menjadi <td colspan=”2”>K2 K3</td>, dan <td>K3</td> tidak perlu
dituliskan lagi. Adapun skrip tabel 1.4 adalah:

<table border=”1”>
<tr>
<td>K1</td>
<td colspan=”2”>K2 K3</td>

</tr>

<tr>
<td>K4</td>
<td>K5</td>
<td>K6</td>
</tr>
</table>

aefil : gimana kalo yang seperti ini:

K1 K3 K2
K4
Tabel 1.6

Hmmm... lagi...he..he..he..

Untuk tabel 1.6 bisa aja kita buat seperti tabel 1.7 dulu:

K1 K2
K3 K4
Tabel 1.7

adapun skrip untuk Tabel 1.7

<table border=”1”>
<tr>
<td> K1 </td>
<td> K2 </td>
</tr>

<tr>
<td>K3 </td>

Copyright © 2009 www.aefil.com 6

www.aefil.com
Free tutorial komputer

<td> K4 </td>
</tr>
</table>

Pada tabel 1.6, Kolom K1 bergabung dengan kolom yang dibawahnya, yaitu K3, maka
kita menggunkan rowspan, sehingga <td>K1</td> diubah menjadi <td
rowspan=”2”>K1 K3</td>, dan <td>K3</td> tidak perlu ditulis lagi.

Adapun skrip lengkapnya adalah :

<table border=”1”>
<tr>
<td rowspan=”2”> K1 K3 </td>
<td> K2 </td>
</tr>

<tr>
<td> K4 </td>
</tr>
</table>

aefil: kalo yang ini:

K1 K2 K3
K4 K5 K6 K9
K7 K8
Tabel 1.8

Untuk tabel 1.8, Hmmm... bisa aja kita buat seperti ini dulu

K1 K2 K3
K4 K5 K6
K7 K8 K9
Tabel 1.9

Skrip untuk Tabel 1.9 :

<table border=”1”>
<tr>
<td> K1 </td>
<td> K2 </td>
<td> K3 </td>
</tr>

Copyright © 2009 www.aefil.com 7

www.aefil.com
Free tutorial komputer

<tr>
<td>K4</td>
<td> K5</td>
<td>K6</td>
</tr>

<tr>
<td>K7</td>
<td> K8</td>
<td>K9</td>
</tr>
</table>

wah!!! dah haus lagi nih!!! minum... dulu yah!! blom pusingkan???

Adapun tabel 1.8, kita melihat kolom K1 bergabung dengan kolom yang disampingnya
yaitu K2, ini artinya pada <td>K1</td> kita tambahkan colspan sehingga menjadi <td
colspan=”2”>K1 K2</td>
setelah ditambahkan colspan, maka kita tidak perlu menulis <td>K2</td> lagi.

Pada tabel 1.8 kita juga melihat bahwa kolom K6 bergabung dengan kolom K9 yang
berada dibawah K6, ini berarti kita menggunakan rowspan, sehingga pada <td>K6</td>
kita ubah menjadi <td rowspan=”2”>K6 K9</td>, sehingga kita tidak perlu menulis
<td>K9</td> lagi.

aefil: Gimana klo yang seperti ini:

Header
Menu Konten

Footer

Hmm... tolong dijawab ya!!!! please....

Copyright © 2009 www.aefil.com 8

www.aefil.com
Free tutorial komputer

Penutup
Semakin anda sering berlatih dalam menggunakan tag-tag tabel maka anda akan semakin faham
bagaimana merancang sebuah tabel dengan berbagai variasi.

Biografi Penulis

Muhammad Arif Harahap.

Saat ini bekerja sebagai staf di sektor perbankan Indonesia,
di sela-sela waktu kerja mencoba menyempatkan diri untuk
membagi ilmu dalam bentuk tutorial. Semoga tutorial ini
dapat bermanfaat bagi teman-teman semua.jika ada saran
dan kritik dapat berinteraksi dengan penulis melalui
facebook dengan email : aefil@yahoo.com

Email : arifhrp@gmail.com
aefil@yahoo.com

Copyright © 2009 www.aefil.com 9