HTML Dasar Part 9 - Cara Membuat Tabel Pada HTML

HTML Dasar Part 9 - Cara Membuat Tabel Pada HTML - Dalam HTML kita bisa membuat tabel yang fungsinya untuk menampilkan data tabular, sama seperti pada saat kita menggunakan aplikasi microsoft office atau microsoft excel dalam membuat tabel.

Ta tabel digunakan untuk membuat tabel pada halaman html

Tag Tabel

Tabel menurut arti dari Kamus Besar Bahasa Indonesia adalah adalah daftar berisi ikhtisar sejumlah (besar ) data informasi, biasanya berupa kata-kata dan bilangan yang tersusun secara bersistem, urut ke bawah dulu lajur dan deret tertentu dengan garis pembatas, sehingga dapat dengan mudah disimak.

Sebuah tabel, pastinya mempunyai struktur yang terbentuk dari baris & kolom. Baris terdiri dari kotak-kotak yang letakknya secara horizontal, sedangkan kolom terdiri berdasarkan kotak-kotak yg letaknya secara vertikal, sedangkan perpotongan antara baris & kolom dinamakan menggunakan cell/data.

Struktur Tabel

Jenis menurut tabel, terdapat pula yang memiliki header baik secara horizontal, vertikal, atau keduanya. Seperti gambar dibawah ini. Di HTML kita bisa mengimplementasikan atau membuat tabel baik yg tabel biasa ataupun yg tidak memiliki header dengan menggunakan tag tabel.

header tabel bisa dibuat baik secara horizontal atau vertikal

Header Pada Tabel

Tag tabel di HTML ditulis dengan tanda kurung siku buka / tanda lebih kecil dari ( < ), kemudian diikuti dengan nama tag table, dan diakhiri dengan tanda kurung siku tutup / tanda lebih besar dari ( > ).Lebih tepatnya untuk penulisan tag table ini sebagai berikut <table>. Tag <table> ini merupakan salah satu tag HTML yang berpasangan, karena itu tag ini memiliki tag pembuka <table> dan tag penutup </table>.

Tag Tabel

Tata cara penulisa tag < table > berdasarkan jenis strukturnya :

1. Struktur yg tabel yg simple / sederhana

Untuk penulisan tag <table> dengan jenis struktur ini, dimulai dengan membuat tag <table></table>, kemudian di dalam tag <table></table>, terdapat tag untuk membuat baris yang ditulis dengan tag<tr></tr>. Di dalam tag <tr></tr> kita bisa membuat kolom dengan menggunakan tag <td></td>.

cara membuat tag tabel sederhana pada halaman html

Struktur Tabel Sederhana Pada HTML

			<!DOCTYPE html> <head> <title>HTML Table</title> </head> <body> <!-- belajar tag <table> --> <table> <tr> <td>baris 1, kolom1</td> <td>baris 1, kolom2</td> <td>baris 1, kolom3</td> <td>baris 1, kolom4</td> </tr> <tr> <td>baris 2, kolom1</td> <td>baris 2, kolom2</td> <td>baris 2, kolom3</td> <td>baris 2, kolom4</td> </tr> <tr> <td>baris 3, kolom1</td> <td>baris 3, kolom2</td> <td>baris 3, kolom3</td> <td>baris 3, kolom4</td> </tr> </table> <!-- artinya kita membuat tabel yang terdiri dari 3 baris dan masing-masing baris terdapat 4 kolom --> </body> </html>

Cara Penulisan Tabel Sederhana & Hasilnya di Web Browser

Tabel yang dibuat sudah terlihat hasilnya dibrowser, namun tidak ada bordernya, karena HTML yang kita buat belum ada atributnya, tapi pembuatan tabelnya sudah berhasil. Setelah penjelasan struktur dari tabel, artikel ini akan berlanjut ke atribut apa saja yang bisa diberikan untuk tag <table> ini.

2. Struktur tabel yg complex

Struktur table yang complex, memilki bagian head dan bagian body. bagian head direpresentasikan dengan tag <thead></thead> dan bagian body direpresentasikan dengan tag <tbody></tbody>.

Di dalam tag <thead></thead> kita bisa membuat baris dengan menggunakan tag <tr></tr> yang di dalamnya terdapat kolom untuk header/judul yang direpresentasikan dengan tag <th></th>.

Di dalam tag <body></body> sebuah table, di dalamnya kita bisa membuat tag <tr></tr> yang didalamnya kita bisa membuat kolom untuk header/judul dan kolom untuk data. Kolom untuk header/judul kita bisa bungkus dengan tag <th></th> dan kolom untuk data kita bungkus dengan tag <td></td>.

cara membuat struktur tabel komplex pada halamanhtml/website

Struktut Tabel Komplex

Berikut contoh buat merepresentasikan sebuah tabel yg memiliki header baik horizontal & vertikal :

			<!DOCTYPE html> <head> <title>HTML Table</title> </head> <body> <!-- belajar tag <table> --> <table> <thead> <tr> <th></th> <th>Kolom 1</th> <th>Kolom 2</th> </tr> </thead> <tbody> <tr> <th>baris 1</th> <td>baris 1, kolom 1</td> <td>baris 1, kolom 2</td> </tr> <tr> <th>baris 2</th> <td>baris 2, kolom 1</td> <td>baris 2, kolom 2</td> </tr> </tbody> </table> <!-- artinya : kita membuat 1 table, yang memiliki header horizontal, dan header vertikal. dimana didalamnya terdapat 2 kolom dan 2 baris --> </body> </html>

Cara Penulisan Tabel Komplex di halaman html dan Hasilnya di Web Browser

Cara Penulisan Tabel Komplex & Hasilnya di Web Browser

Setelah kita mengetahui struktur dari tag HTML untuk membuat tabel. Kita juga perlu tahu, atribut apa saja yang bisa disematkan dalam tag <table> ini . berikut atribut untuk tag table. :

kelengkapan didalam tag html yang bisa dipakai atau ditambahkan

Atribut Pada Tag Tabel

Border : digunakan untuk menambah garis disekitar cell/data
Cellspacing : atribut ini digunakan untuk menambah jarak antar cell/data
Cellpadding : atribut ini digunakan untuk memberi luas pada cell

Noted : untuk border, cellspacing, dan cellpadding sebenarnya penggunaanya untuk css, tapi selama kita belum tahu css, kita sementara bisa menggunakan atribut HTML ini untuk menata / merias sebuah tabel

			<!DOCTYPE html> <head> <title>HTML Table</title> </head> <body> <!-- belajar tag atribut <table> --> <!-- tanpa atribut --> <table> <tr> <td>baris 1, kolom1</td> <td>baris 1, kolom2</td> <td>baris 1, kolom3</td> <td>baris 1, kolom4</td> </tr> <tr> <td>baris 2, kolom1</td> <td>baris 2, kolom2</td> <td>baris 2, kolom3</td> <td>baris 2, kolom4</td> </tr> <tr> <td>baris 3, kolom1</td> <td>baris 3, kolom2</td> <td>baris 3, kolom3</td> <td>baris 3, kolom4</td> </tr> </table> <hr> <!-- border --> <table border="3px"> <tr> <td>baris 1, kolom1</td> <td>baris 1, kolom2</td> <td>baris 1, kolom3</td> <td>baris 1, kolom4</td> </tr> <tr> <td>baris 2, kolom1</td> <td>baris 2, kolom2</td> <td>baris 2, kolom3</td> <td>baris 2, kolom4</td> </tr> <tr> <td>baris 3, kolom1</td> <td>baris 3, kolom2</td> <td>baris 3, kolom3</td> <td>baris 3, kolom4</td> </tr> </table> <hr> <!-- cellspacing --> <table border="3px" cellspacing="0"> <tr> <td>baris 1, kolom1</td> <td>baris 1, kolom2</td> <td>baris 1, kolom3</td> <td>baris 1, kolom4</td> </tr> <tr> <td>baris 2, kolom1</td> <td>baris 2, kolom2</td> <td>baris 2, kolom3</td> <td>baris 2, kolom4</td> </tr> <tr> <td>baris 3, kolom1</td> <td>baris 3, kolom2</td> <td>baris 3, kolom3</td> <td>baris 3, kolom4</td> </tr> </table> <hr> <!-- cellpadding --> <table border="3px" cellspacing="0" cellpadding="10px"> <tr> <td>baris 1, kolom1</td> <td>baris 1, kolom2</td> <td>baris 1, kolom3</td> <td>baris 1, kolom4</td> </tr> <tr> <td>baris 2, kolom1</td> <td>baris 2, kolom2</td> <td>baris 2, kolom3</td> <td>baris 2, kolom4</td> </tr> <tr> <td>baris 3, kolom1</td> <td>baris 3, kolom2</td> <td>baris 3, kolom3</td> <td>baris 3, kolom4</td> </tr> </table> </body> </html>

Penggunaan Atribut Pada Tag Tabel pada halaman html dan Hasilnya di Web Browser

Penggunaan Atribut Pada Tag Tabel & Hasilnya di Web Browser

Collspan : atribut ini digunakan untuk menggabungkan 2 kolom atau lebih.
Rowspan : atribut ini digunakan untuk menggabungan 2 baris atau lebih.

Untuk inplementasi berdasarkan collspan dan rowspan, kita sanggup pribadi lihat contoh HTML berikut :

			<!DOCTYPE html> <head> <title>HTML Table</title> </head> <body> <!-- belajar tag atribut <table> --> <!-- collspan dan rowspan --> <h2>Tabel 1</h2> <table border="1px" cellspacing="0" cellpadding="5px"> <tr> <td>baris 1, kolom1</td> <td>baris 1, kolom2</td> <td>baris 1, kolom3</td> <td>baris 1, kolom4</td> </tr> <tr> <td>baris 2, kolom1</td> <td>baris 2, kolom2</td> <td>baris 2, kolom3</td> <td>baris 2, kolom4</td> </tr> <tr> <td>baris 3, kolom1</td> <td>baris 3, kolom2</td> <td>baris 3, kolom3</td> <td>baris 3, kolom4</td> </tr> <tr> <td>baris 4, kolom1</td> <td>baris 4, kolom2</td> <td>baris 4, kolom3</td> <td>baris 4, kolom4</td> </tr> </table> <hr> <h2>Tabel 2</h2> <table border="1px" cellspacing="0" cellpadding="5px"> <tr> <td>baris 1, kolom1</td> <td colspan="3">colspan 3 kolom</td> </tr> <tr> <td rowspan="3">rowspan 3 baris</td> <td>baris 2, kolom2</td> <td>baris 2, kolom3</td> <td>baris 2, kolom4</td> </tr> <tr> <td>baris 3, kolom2</td> <td>baris 3, kolom3</td> <td>baris 3, kolom4</td> </tr> <tr> <td>baris 4, kolom2</td> <td>baris 4, kolom3</td> <td>baris 4, kolom4</td> </tr> </table> </body> </html>

cara menggabungkan kolom dan baris pada halaman html

Cara Menggunakan Collspan dan Rowspan

Untuk penjelasan mengenail tag <table> pada HTML sekian. Semoga teman-teman bisa paham dengan penjelasan ini dan penjelasan ini bisa bermanfaat buat teman-teman yang baru belajar HTML terutama bagi para pemula. See you on my next articles. Bye bye....

Referensi:

https://www.W3schools.Com

https://www.W3schools.Com/html/default.asp

kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik pembahasan.
the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.