Tabel (table) HTML

Sekilas tentang tabel.

Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.

Cara membuat tabel.

Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.

Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.

<table border="1">
	<tr>
		<td>Cell 1 - Baris 1 Kolom 1</td>
		<td>Cell 2 - Baris 1 Kolom 2</td>
	</tr>
	<tr>
		<td>Cell 3 - Baris 2 Kolom 1</td>
		<td>Cell 4 - Baris 2 Kolom 2</td>
	</tr>
	<tr>
		<td>Cell 5 - Baris 3 Kolom 1</td>
		<td>Cell 6 - Baris 3 Kolom 2</td>
	</tr> 
</table>

Hasil:

Cell 1 – Baris 1 Kolom 1 Cell 2 – Baris 1 Kolom 2
Cell 3 – Baris 2 Kolom 1 Cell 4 – Baris 2 Kolom 2
Cell 5 – Baris 3 Kolom 1 Cell 6 – Baris 3 Kolom 2

Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>.

Mengatur lebar dan tinggi tabel.

Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height.

Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.

<table border="1" width="75%">
	<tr>
		<td style="width:50%;height:40px;">Baris 1 Kolom 1</td>
		<td>Baris 1 Kolom 1</td>
	</tr>
	<tr>
		<td>Baris 2 Kolom 1</td>
		<td>Baris 2 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 3 Kolom 1</td>
		<td>Baris 3 Kolom 2</td>
	</tr>
</table>

Hasil:

Baris 1 Kolom 1 Baris 1 Kolom 1
Baris 2 Kolom 1 Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2

Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.

Menggabungkan kolom pada tabel

Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.

Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.

<table border="1" width="75%">
	<tr>
		<td colspan="2">Gabungan Kolom 1&amp;2 pada Baris 1</td>
	</tr>
	<tr>
		<td style="width:50%">Baris 2 Kolom 1</td>
		<td>Baris 2 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 3 Kolom 1</td>
		<td>Baris 3 Kolom 2</td>
	</tr>
</table>

Hasil:

Gabungan Kolom 1&2 pada Baris 1
Baris 2 Kolom 1 Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2

Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.

<table border="1" width="75%">
	<tr>
		<td style="width:50%" rowspan="2">Gabungan Baris 1&amp;2 pada Kolom 1</td>
		<td>Baris 1 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 2 Kolom 2</td>
	</tr>
	<tr>
		<td>Baris 3 Kolom 1</td>
		<td>Baris 3 Kolom 2</td>
	</tr>
</table>

Hasil:

Gabungan Baris 1&2 pada Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 2
Baris 3 Kolom 1 Baris 3 Kolom 2

Mengatur jarak kolom pada tabel

Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.

Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.

<table border="1" width="75%" cellpadding="8">
	<tr>
		<td style="width:50%;">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>

Hasil:

Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2

Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.

<table border="1" width="75%" cellspacing="8">
	<tr>
		<td style="width:50%">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>

Hasil:

Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2

Membuat titel pada tabel.

Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom.

Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.

<table border="1" width="75%">
<caption>Disini adalah titel tabel ini</caption>
	<tr>
		<th style="width:50%;">Header Kolom 1</th>
		<th>Header Kolom 2</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>

Hasil:

Disini adalah titel tabel ini
Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2

Membuat background pada tabel

Untuk membuat background pada tabel kita gunakan atribut style dengan properti background.

Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.

<table style="background:#ffc" width="75%" border="1">
	<tr>
		<th style="background:red;width:50%;">Header Kolom 1</th>
		<th style="background:red;">Header Kolom 2</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>

Hasil:

Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2

Seperti kita lihat bahwa border dari cell tersebut terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah 1px.

Ini terjadi karena secara default atribut cellpadding dan cellspacing pada elemen table memiliki nilai masing-masing 1px.

Jadi untuk menghilangkannya kita harus memasukkan kedua atribut tersebut dengan nilai 0.

<table cellpadding="0" cellspacing="0" style="background:#ffc" width="75%" border="1">
...
</table>

Atau kita juga bisa menggunakan style CSS yaitu dengan properti border-collapse:collapse.

<table style="border-collapse:collapse;background:#ffc" width="75%" border="1">
	<tr>
		<th style="background:red;width:50%;">Header Kolom 1</th>
		<th style="background:red;">Header Kolom 2</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>

Hasil:

Header Kolom 1 Header Kolom 2
Baris 1 Kolom 1 Baris 1 Kolom 2
Baris 2 Kolom 1 Baris 2 Kolom 2

Pada link berikut ini kita akan membuat contoh tabel dengan CSS baik itu dengan atribut style (inline) maupun internal dan eksternal CSS.


« Tutorial sebelumnya:

Posted in HTML Tutorial by Masim man

Post a comment

32 Responses to “Tabel (table) HTML”

  1. adi saputra said:

    Thanks gan,.,.
    sangat membantu nich, ane masih new-bie

  2. ViviGo said:

    Thanks u very much

    sangat detail dan enak dipelajari

    Muantapp

    thanks

  3. Geo said:

    Thanks banget tutorialnya

  4. gragaz said:

    makasih sob, ane coba ya. oo ya art layout sangat bagus

  5. wah sangat membatu saya yang pemula hhehehe

  6. ARDHY said:

    MANTAP BRO TUTORIALNYA

  7. Tanto Suzuki said:

    langsung saya praktek kan, lalu bagaiman cara membuat kolom katalog produk agar teratur dan rapi, mohon pencerahannya. trmksh

  8. Zain said:

    Trims Tutorialnya,,,,
    mudah dan sederhana diterapkan, saya pakai untuk membuat postingan daftar isi majalah,,

  9. andono kusuma jati said:

    thanks, banget. soalnya masih NEWbie.thanks.yo

  10. Adiputra said:

    Makasih banget….

  11. Annonyms said:

    Ini benar2 sangat membantu sekali terima kasih^_^

  12. Terimakasih gan, informasinya bermanfaat sekali.
    Salam sukses dari Surya Logam

  13. subakir said:

    Thnks banget.
    ternyata masih banyak yang belum saya ketahui.
    cuma keknya ada yang kurang disini. mengenai ukuran setiap kolomnya.

  14. nona said:

    berguna bagi nyubi gan

  15. Raka Maulana said:

    mantab,, thanks gan tutornya 🙂

  16. surianti.s said:

    mau nanyak gan,
    klau buat 3 tabel dalam 1 tampilan gtc gmna,?
    tpi tabel tengah sbgai menu utama dan tdak pkai link datanya, yang kiri-kanan pakai link dataya diklik dlu bru mncul gan.
    dtggu ya gan.

  17. Terima kasih, sangat membantu langsung di praktek kan, hasilnya oke.

  18. bagaimana kalau kolomnya beda2 mas, misal kolom atas 2 kolom seperti contoh di gambar. dan kolom paling bawah cuman 1 kolom

    • Masim man said:

      Baca lagi lebih teliti mas, untuk menggabungkan kolom pada tabel dapat menggunakan atribut colspan, untuk menggabungkan baris pada tabel dapat menggunakan atribut rowspan.

  19. cinema movie said:

    wahh sangat berguna buat web ane. makasih bnyak gan

  20. Gragas said:

    Sudah berhasil gan. Tipsnya keren. Tapi ngomong-ngomong cara agar tabel tidak bisa berubah lebarnya gimana caranya? Soalnya sewaktu nulis agak banyak. Lebar kolomnya jadi melebar. Jadi agak kurang bagus. Agar pembagiannya tiap kolom tetap sama rata caranya gimana gan? Terima kasih bantuannya.

  21. ilmair said:

    seep html tabelnya, tutorialnya membantu

  22. Junel said:

    Terimakasih ilmunya, sangat membantu..

  23. dapet juga yang simple, trims gan atas sharing nya. manfaat banget, penjelasan setil nya buat mudah paham

  24. Yohanes said:

    langsung saya praktek kan, lalu bagaiman cara membuat kolom katalog produk agar teratur dan rapi, mohon pencerahannya. trmksh

  25. Fank Seng said:

    Heum ane coba untuk buat tabel di wordpad nih sampai pusing ga bisa emh…….ada panduan jelsnya ga nih?

  26. Kuncoro said:

    Terima kasih…
    Sangat membantu…

Back to top