7 August 2025
Tabel adalah salah satu elemen penting dalam membangun tampilan website yang terstruktur. Baik untuk menampilkan data, jadwal, harga, atau daftar informasi lainnya, tabel membantu membuat informasi terlihat lebih rapi dan mudah dipahami pengunjung.
HTML menyediakan serangkaian tag khusus yang dirancang untuk membuat tabel dengan mudah. Namun, agar hasilnya optimal, kamu perlu memahami struktur dasarnya seperti baris, kolom, sel, dan cara menggabungkannya.
Kalau kamu baru mulai belajar HTML atau sedang ingin menyempurnakan tampilan tabel di website-mu, artikel ini akan jadi panduan yang tepat. Kita akan membahas cara membuat tabel website dengan HTML secara lengkap — mulai dari dasar hingga praktik terbaik yang modern.
Yuk baca sampai akhir, supaya kamu bisa langsung praktik dan hasilnya terlihat profesional di websitemu!
Pahami komponen dasar tabel HTML
Sebelum mulai membuat tabel di website, penting untuk memahami elemen-elemen dasar seperti sel, baris, kolom, dan border. Komponen-komponen ini menjadi fondasi dalam menyusun struktur tabel yang rapi dan fungsional. Dengan pemahaman yang tepat, kamu akan lebih siap melanjutkan ke penggunaan tag HTML dan teknik styling yang lebih lanjut di bagian berikutnya.
Sel, baris, kolom, border
Komponen ini merupakan fondasi utama saat kamu belajar cara membuat tabel website dengan html.
Biasanya setiap tabel terdiri dari sel yang dibundel dalam baris, yang kemudian disusun membentuk kolom dan diikat oleh border agar terlihat rapi.
Jika kamu paham struktur sel‑baris‑kolom, kamu bisa buat tabel yang responsif dan mudah dibaca oleh pengunjung website kamu.
Definisi sel, baris, kolom
Sel adalah kotak informasi kecil di dalam tabel, di mana setiap sel biasanya berada di antara tag <td>…</td> atau <th>…</th> untuk header.
Baris adalah deretan horizontal sel di dalam tabel, dibuat menggunakan tag <tr>…</tr>.
Kolom adalah jajaran vertikal sel yang sejajar; pengelompokan berdasarkan posisi vertikal baris demi baris.
Sering kamu juga temukan penjelasan bahwa tabel terdiri dari baris, kolom dan sel secara simultan. Misalnya baris memuat beberapa sel yang jika ditarik ke bawah membentuk kolom tertentu.
Fungsi border
Border adalah garis tepi pada tabel, baris maupun sel yang membantu pemisahan visual antardata pada tabel. Border bisa diberi atribut border="1" di tag <table> agar tabel muncul garisnya.
Jika kamu ingin kendali lebih terhadap tampilan border, CSS memungkinkan pengaturan style (solid, dotted, double), warna, ketebalan, bahkan radius untuk sudut membulat.
Tag penting untuk membuat table
Jika sudah memahami struktur dasarnya, kini saatnya mengenal tag-tag esensial yang digunakan dalam pembuatan tabel HTML. Penggunaan tag seperti <table>, <tr>, <td>, hingga <thead> dan <tbody> akan membantu kamu membangun tabel yang tidak hanya rapi, tapi juga semantik dan ramah aksesibilitas.
Dengan memahami fungsinya satu per satu, kamu bisa membuat tabel yang optimal untuk pengguna maupun mesin pencari.
<table>, <tr>, <td> sebagai dasar
Tag <table> jadi kerangka utama ketika kamu memulai cara membuat tabel website dengan html. Tag ini memuat seluruh struktur baris, sel, header, serta footer di bagian lain tabel.
Di dalam <table> tag <tr> digunakan untuk mendefinisikan baris. Setiap baris terdiri beberapa sel berupa <td> untuk data biasa atau <th> untuk header kolom.
Penggunaan tag ini penting bagi cara membuat tabel website dengan html yang bersih dan sesuai standar. Secara default browser menampilkan <th> dengan teks tebal dan rata tengah, sedangkan <td> normal, memudahkan pembaca membedakan header dan isi.
Jika kamu ingin menambah baris baru, cukup tambahkan <tr>…</tr> dalam <table>, pastikan jumlah <td> konsisten setiap baris supaya format tetap rapi.
<th>, <thead>, <tbody>, <tfoot>
Tag <th> digunakan untuk memberikan judul kolom atau header pada tabel. Biasanya ditempatkan di baris pertama dalam <thead>, meski bisa juga di dalam <tbody> jika kamu gunakan header vertikal.
Tag <thead> menandai bagian kepala tabel yang terdiri baris header. Ini membantu struktur tabel lebih semantik dan memudahkan screen reader agar tahu mana bagian kolom label.
Tag <tbody> membungkus bagian utama data di tabel setelah bagian <thead>. Jika kamu tidak menulis eksplisit <tbody>, browser otomatis menambahkan bagian ini saat render halaman.
Tag <tfoot> menunjukkan bagian footer tabel, ideal untuk rangkuman atau total data. Posisi <tfoot> bisa setelah <tbody>, dan sering dipakai pada tabel panjang agar footer tetap terlihat saat mem-print ke halaman berikut.
Penggunaan seluruh tag ini menjadi bagian dari cara membuat tabel website dengan html yang memenuhi kaidah aksesibilitas dan memberi struktur jelas pada data di web kamu.
Cara membuat tabel sederhana
Langkah awal dalam membangun tabel HTML adalah memahami struktur dasarnya tanpa tambahan atribut atau styling. Dengan hanya menggunakan tag inti seperti <table>, <tr>, dan <td>, kamu sudah bisa membentuk kerangka dasar sebuah tabel yang bisa ditampilkan di halaman web.
Melalui pendekatan minimalis ini, kamu akan lebih mudah melihat bagaimana baris dan kolom terbentuk, serta bagaimana data ditata di dalam sel-sel tabel. Ini akan membantumu memahami logika di balik penyusunan data dalam tabel HTML.
Sebelum lanjut ke bagian styling atau fitur lanjutan seperti penggabungan sel atau penyesuaian warna, memahami struktur sederhana ini akan menjadi fondasi penting. Dari sini, kamu bisa membangun tampilan tabel yang lebih kompleks dengan percaya diri.
Membuat struktur dasar <table> dan <tr><td>
Supaya bisa mempraktikkan cara membuat tabel website dengan html, kamu perlu mulai dari struktur dasar berikut:
1. Tag <table> bentuk wadah utama tabel. Semua baris dan sel diletakkan di dalamnya.
2. Setiap baris dibuat dengan tag <tr>, yang berisi beberapa <td> sebagai sel data.
Contoh struktur paling sederhana:
<table>
<tr>
<td>Baris1 Kolom1</td>
<td>Baris1 Kolom2</td>
</tr>
<tr>
<td>Baris2 Kolom1</td>
<td>Baris2 Kolom2</td>
</tr>
</table>
Dalam contoh, dua baris masing-masing punya dua sel. Tidak ada header atau border, tapi ini sudah cukup sebagai titik awal buat praktek kode HTML tabel.
Kamu cukup salin dan tempel kode ke file .html lalu buka di browser untuk melihat hasil tabel polos tanpa garis.
Contoh kode tabel tanpa atribut
Berikut contoh paling sederhana untuk melihat langsung tampilan default browser:
<table>
<tr>
<td>Nama</td>
<td>Umur</td>
<td>Hobi</td>
</tr>
<tr>
<td>Sopo</td>
<td>21</td>
<td>Ngoding</td>
</tr>
<tr>
<td>Jarwo</td>
<td>18</td>
<td>Menulis</td>
</tr>
</table>
Tabel ini punya tiga kolom dan tiga baris. Tidak ada border, table terlihat polos, namun sudah bisa memperlihatkan struktur HTML tabel.
Beberapa hal yang penting kamu tahu:
1. Browser secara otomatis menampakkan sel berdampingan yang terstruktur dalam baris dan kolom.
2. Jika jumlah <td> di tiap <tr> berbeda, akan tetap di-render, tetapi struktur tabel bisa tidak konsisten secara visual.
Setelah kamu mempraktikkan kode ini, kamu akan siap lanjut ke bagian berikutnya untuk menambahkan atribut seperti border, cellpadding, atau bahkan header tabel.
Menambahkan atribut tampilan table
Untuk membuat tampilan tabel lebih menarik dan tertata, kamu bisa memanfaatkan berbagai atribut bawaan HTML yang tersedia. Atribut ini membantu mengatur jarak antar sel, ketebalan garis, warna latar, hingga lebar keseluruhan tabel secara langsung dari tag HTML.
Pada tahap ini, kamu akan diperkenalkan dengan atribut-atribut klasik seperti border, cellpadding, cellspacing, width, align, dan bgcolor. Meski kini sebagian besar styling sudah beralih ke CSS, memahami atribut ini tetap penting agar kamu mengenali dasar pengaturan visual tabel.
Sebelum beralih ke teknik styling modern menggunakan CSS, bagian ini akan menjadi fondasi yang berguna. Kamu akan punya gambaran yang lebih jelas tentang bagaimana tampilan tabel dikendalikan lewat HTML murni.
border, cellpadding, cellspacing
1. Atribut border memungkinkan kamu memberi garis tepi tabel. Jika kamu pakai <table border="1">, browser tampilkan garis tipis 1 px di sekeliling tabel. Nilai lebih tinggi bikin garis terkesan lebih tebal.
2. cellpadding menambah jarak antara batas sel dan isi konten, misalnya cellpadding="5" beri ruang bagi konten agar tidak terlalu rapat ke tepi sel.
3. cellspacing mengatur jarak antar sel tabel, misalnya cellspacing="5" ciptakan ruang kosong antar sel secara visual.
Walau masih berfungsi di browser lawas, atribut ini sudah deprecated di HTML5. Semua kini digantikan oleh CSS: border di CSS ganti border HTML, padding mengganti cellpadding, dan border-spacing atau border-collapse ganti cellspacing.
width, align, bgcolor
1. Atribut width mengatur lebar tabel, bisa menggunakan nilai piksel (width="500") atau persen (width="80%"). Namun HTML5 tidak merekomendasikan penggunaannya—sebaiknya pakai CSS width.
2. align menentukan posisi tabel secara horizontal: nilai left, center, atau right. Di HTML5 ini deprecated; sekarang kamu bisa pakai CSS seperti margin: 0 auto atau properti float.
3. bgcolor memberi warna latar seluruh tabel, misalnya <table bgcolor="#ffcc00">. Atribut ini juga sudah dianggap usang; gunakan CSS background-color untuk gantinya.
Contoh attribut warna background bgcolor, jarak sel, garis tepi
Contoh praktis tabel menggunakan atribut klasik:
<table border="2" width="80%" cellspacing="5" cellpadding="10" bgcolor="#e0f7fa" align="center">
<tr>
<td>Nama</td><td>Umur</td><td>Hobi</td>
</tr>
<tr>
<td>Siti</td><td>22</td><td>Membaca</td>
</tr>
</table>
Penjelasan implementasi:
1. border="2" bikin garis tepi tabel 2 px.
2. cellspacing="5" memberi jarak antar sel sebesar 5 px.
3. cellpadding="10" menciptakan jarak 10 px antara isi dan batas sel.
4. bgcolor="#e0f7fa" menerapkan warna latar muda.
5. align="center" memposisikan tabel di tengah halaman.
Hasilnya tabel tampil lebih rapih dan mudah dibaca meskipun tanpa CSS. Tapi perlu kamu tahu: pendekatan ini tergolong jadul, tidak ideal untuk desain modern atau responsif karena tidak fleksibel dan sudah tidak disarankan di HTML5.
Menggabungkan sel tabel (rowspan & colspan)
Untuk memperluas kemampuan dalam membuat tabel yang kompleks, kamu perlu memahami cara menggabungkan beberapa sel menjadi satu. Teknik ini memungkinkan penyusunan data yang lebih fleksibel dan rapi, terutama saat menampilkan informasi yang saling berkaitan.
Di bagian ini, kamu akan mempelajari dua atribut utama dalam penggabungan sel: rowspan yang digunakan untuk menggabungkan sel secara vertikal, dan colspan yang berfungsi menggabungkan sel secara horizontal.
Pemahaman terhadap kedua atribut ini akan sangat membantu ketika kamu masuk ke contoh penerapan nyatanya di bagian selanjutnya. Dengan begitu, tampilan tabel yang kamu buat bisa lebih dinamis dan sesuai kebutuhan informasi.
rowspan untuk gabung vertical
Atribut rowspan memungkinkan kamu gabung sel ke arah vertikal. Misalnya satu sel bisa meliputi dua baris atau lebih.
Cara pakainya: kamu tambahkan rowspan="2" di <td> atau <th>. Hal ini bikin satu sel menempati ruang dua baris, tanpa perlu menambah sel di baris berikutnya.
colspan untuk gabung horizontal
Atribut colspan digunakan saat kamu perlu gabung sel ke arah horizontal. Misalnya sebuah header bisa meliputi dua atau lebih kolom.
Contohnya <th colspan="3">Judul</th> membuat satu header membentang tiga kolom. Sangat membantu untuk mengelompokkan kolom data atau menyorot bagian khusus data tabel.
Contoh praktis dengan <th> dan <td>
Berikut contoh kombinasi praktis rowspan dan colspan untuk latihan cara membuat tabel website dengan html:
<table border="1">
<tr>
<th rowspan="2">Nama</th>
<th colspan="2">Nilai</th>
</tr>
<tr>
<th>Ulangan</th>
<th>Tugas</th>
</tr>
<tr>
<td>Ali</td>
<td>85</td>
<td>90</td>
</tr>
<tr>
<td>Budi</td>
<td>88</td>
<td>92</td>
</tr>
</table>
Penjelasan:
1. rowspan="2" pada header “Nama” membuat sel ini menutup dua baris.
2. colspan="2" pada header “Nilai” meliputi dua kolom (“Ulangan” dan “Tugas”).
Contoh lain untuk tabel lebih kompleks:
<table border="1">
<tr>
<th colspan="2">Team</th>
<th colspan="2">Performance Q1</th>
</tr>
<tr>
<th>Nama</th><th>Posisi</th><th>Target</th><th>Realisasi</th>
</tr>
<tr>
<td rowspan="2">Team A</td><td>Lead</td><td>50</td><td>45</td>
</tr>
<tr>
<td>Member</td><td>60</td><td>55</td>
</tr>
</table>
Di sini:
1. “Team A” gabung dua baris (rowspan),
2. “Team” header gabung dua kolom (colspan) untuk mengelompokkan kolom Target dan Realisasi
Struktur tabel semantik (thead, tbody, tfoot)
Agar tabel yang kamu buat lebih terstruktur dan bermakna, penting untuk memanfaatkan elemen semantik seperti <thead>, <tbody>, dan <tfoot>. Elemen-elemen ini tidak hanya memperjelas pembagian isi tabel, tetapi juga membantu pembaca maupun mesin pencari memahami konten secara lebih baik.
Di bagian ini, kamu akan mempelajari fungsi masing-masing tag semantik tersebut. <thead> digunakan untuk bagian kepala tabel, <tbody> untuk isi utama, dan <tfoot> untuk bagian akhir atau ringkasan. Pemisahan ini juga akan sangat berguna saat kamu ingin menambahkan fitur aksesibilitas atau mengatur tampilan dengan CSS.
Dengan menerapkan struktur semantik seperti ini, tabel HTML milikmu akan lebih mudah dikelola dan siap untuk dikembangkan ke tahap desain lanjutan yang lebih profesional.
Bagian head (judul kolom)
Tag <thead> menampung baris header yang biasanya berisi <th>. Elemen ini menandai baris judul kolom sehingga memberi makna semantik ke struktur tabel kamu.
Ini membantu mesin pencari dan pembaca layar mengidentifikasi bagian heading tabel, serta mempermudah kamu memberi styling tersendiri jika perlu.
Secara praktik <thead> ditempatkan setelah <caption> atau <colgroup> jika ada, sebelum <tbody> atau <tfoot>.
Body (data utama)
Tag <tbody> membungkus bagian utama data tabel, yaitu baris-baris yang bukan header atau footer.
Browser akan otomatis menambahkan <tbody> meski kamu tidak menulisnya sendiri. Namun kamu tetap bisa pakai secara eksplisit supaya lebih tertata, terutama saat memberi styling atau bagian scroll khusus.
Selain itu, kamu bisa punya lebih dari satu <tbody> di satu tabel untuk mengelompokkan data ke beberapa grup.
Footer (opsional)
Tag <tfoot> digunakan untuk bagian footer tabel, misalnya baris rangkuman atau total data.
Di HTML5, <tfoot> harus diletakkan setelah <tbody> karena urutan ini lebih baik untuk aksesibilitas dan struktur DOM.
Walau tidak menambahkan fungsi aksesibilitas secara langsung, <tfoot> sangat berguna saat cetak halaman panjang karena bisa membuat baris footer muncul di tiap halaman cetak.
Contoh Struktur Semantik
<table border="1">
<thead>
<tr>
<th>Produk</th>
<th>Jumlah</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apel</td><td>10</td><td>Rp 20.000</td>
</tr>
<tr>
<td>Pisang</td><td>5</td><td>Rp 15.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td><td>Rp 35.000</td>
</tr>
</tfoot>
</table>
Dalam contoh ini:
1. <thead> mendefinisikan judul kolom: Produk, Jumlah, Harga
2. <tbody> memuat data utama item produk
3. <tfoot> menyediakan baris rangkuman total semua harga
Bagian ini sangat penting dalam cara membuat tabel website dengan html agar struktur tabel kamu lebih jelas, tertata, dan mudah di-styling atau diproses mesin pencari.
Kesimpulan
Memahami komponen dasar seperti sel, baris, kolom, dan border adalah langkah pertama yang penting sebelum kamu mulai menulis struktur HTML. Dengan memahami elemen-elemen ini, kamu akan lebih mudah membayangkan bagaimana data tersusun dalam bentuk tabel di halaman web.
Menggunakan tag HTML penting seperti <table>, <tr>, <td>, <th>, <thead>, <tbody>, dan <tfoot> akan memberikan struktur semantik yang jelas. Ini tidak hanya membantu dalam penataan visual, tetapi juga meningkatkan aksesibilitas dan keterbacaan oleh mesin pencari maupun pembaca layar, sesuai praktik standar HTML modern.
Menerapkan teknik lanjutan seperti rowspan dan colspan memungkinkan kamu menggabungkan sel secara vertikal maupun horizontal. Fitur ini sangat bermanfaat ketika menampilkan data yang saling berkaitan atau membutuhkan format penyajian yang lebih fleksibel.
Dulu, atribut-atribut klasik seperti border, cellpadding, cellspacing, width, align, dan bgcolor sering digunakan untuk mengatur tampilan tabel. Namun seiring perkembangan web modern, penggunaan CSS jauh lebih dianjurkan karena memberikan kontrol styling yang lebih rapi dan terstruktur.
Setelah memahami semua komponen di atas, kamu kini telah memiliki pengetahuan lengkap tentang cara membuat tabel website dengan HTML. Mulai dari membangun struktur dasar, menerapkan semantik yang tepat, hingga styling yang efektif dengan CSS—semuanya berperan dalam menciptakan tampilan tabel yang fungsional dan profesional.
Kalau kamu masih merasa kesulitan membangun struktur tabel atau komponen lainnya dalam HTML, jangan khawatir. Kamu bisa mengandalkan jasa web development profesional untuk membantumu merancang tampilan website yang tidak hanya rapi, tapi juga sesuai standar teknis dan SEO terkini.
DCLIQ sebagai digital agency berpengalaman siap menjadi partner transformasi digital bisnismu. Mulai dari pembuatan website, pengembangan sistem custom, hingga optimalisasi tampilan dan branding—semua kami kerjakan dengan pendekatan strategis, desain modern, dan performa tinggi. Tunggu apalagi? Hubungi kami sekarang untuk dapatkan konsultasi branding dan website gratis!
