Blog

Web Development

Cara Membuat Tabel di HTML: Panduan Lengkap dan Contoh

Irhan Hisyam Dwi Nugroho

•

03 June 2023

•

8513

Catatan Redaksi:

Artikel ini pertama kali diterbitkan pada Juni 2023 dan diperbarui pada 11 Februari 2026 untuk memastikan informasi tetap akurat dan relevan.

Warga Bimbingan, cara membuat tabel di HTML mungkin terasa rumit bagi pemula. Tabel yang tidak terstruktur dengan baik bisa membuat data di situsmu terlihat berantakan dan sulit dipahami.

Tanpa tabel yang jelas, pengunjung situsmu bisa kesulitan membaca informasi yang disajikan. Ini bisa membuat mereka merasa frustrasi dan enggan melanjutkan untuk menjelajah situsmu lebih jauh.

Jangan khawatir! MinDi akan membimbing kamu langkah demi langkah untuk membuat tabel HTML dengan mudah. Yuk, simak panduan ini dan buat situsmu lebih rapi dan profesional!

Apa Itu Tabel di HTML?

Tabel di HTML adalah elemen yang digunakan untuk menyusun dan menampilkan data dalam format baris dan kolom.

Tabel ini sangat berguna untuk menampilkan informasi yang terstruktur, seperti daftar produk, jadwal, atau laporan.

Dengan menggunakan tabel, data yang ditampilkan menjadi lebih rapi dan mudah dibaca oleh pengunjung situs web.

Tabel di HTML dibuat menggunakan elemen-elemen khusus seperti <table>, <tr>, <th>, dan <td>, yang memungkinkan penataan data dengan cara yang sistematis dan terorganisir.

Apa Saja Struktur Dasar Tabel HTML?

Struktur dasar tabel HTML terdiri dari beberapa elemen yang bekerja bersama untuk membuat tampilan data yang rapi dan terorganisir.

Untuk memulai, kamu perlu memahami elemen-elemen utama yang digunakan dalam pembuatan tabel.

Berikut adalah elemen-elemen dasar yang membentuk tabel HTML:

<table>: Elemen utama yang digunakan untuk membungkus seluruh tabel. Tanpa elemen ini, tabel tidak akan terbentuk.
<tr>: Elemen baris yang digunakan untuk membuat baris dalam tabel. Setiap baris dapat berisi satu atau lebih kolom.
<th>: Elemen untuk mendefinisikan header kolom. Biasanya digunakan di baris pertama untuk memberikan judul pada setiap kolom.
<td>: Elemen yang digunakan untuk mendefinisikan sel data pada setiap kolom dalam tabel.
<thead>, <tbody>, <tfoot>: Elemen opsional yang digunakan untuk mendefinisikan bagian tabel, seperti header (<thead>), tubuh tabel (<tbody>), dan footer (<tfoot>). Ini membantu dalam pengelompokan dan pengaturan tabel secara lebih baik.

Dengan elemen-elemen ini, kamu bisa membuat tabel yang terstruktur dan mudah dibaca.

Bagaimana Cara Membuat Tabel di HTML?

Sumber: Canva

Membuat tabel di HTML cukup sederhana jika kamu memahami elemen-elemen dasarnya. Langkah pertama adalah menambahkan elemen <table> untuk memulai tabel.

Setelah itu, kamu dapat menggunakan elemen <tr> untuk membuat baris, <th> untuk header kolom, dan <td> untuk menambahkan data ke dalam kolom. Berikut adalah langkah-langkah lengkap untuk membuat tabel sederhana.

1. Menambahkan Elemen <table>

Untuk memulai membuat tabel, kamu perlu menambahkan elemen <table> yang akan membungkus seluruh tabel. Ini adalah elemen utama yang menjadi dasar dari tabel HTML.

Contoh Kode:

<table>

</table>

2. Membuat Baris dengan Elemen <tr>

Setelah elemen <table>, kamu perlu menambahkan baris dengan menggunakan elemen <tr> (table row). Setiap baris dalam tabel akan berisi data yang diatur dalam kolom-kolom.

Contoh Kode:

<table>

<tr>

<th>Nama Produk</th>

<th>Harga</th>

</tr>

</table>

Pada contoh di atas, elemen <tr> digunakan untuk membuat satu baris, dan elemen <th> digunakan untuk menambahkan header kolom seperti “Nama Produk”, “Harga”, dan “Stok”.

3. Menambahkan Data dengan Elemen <td>

Selanjutnya, kamu akan menambahkan data ke dalam tabel dengan menggunakan elemen <td> (table data). Elemen ini akan diulang di setiap baris untuk mengisi data dalam kolom yang sesuai.

Contoh Kode:

<table>

<tr>

<th>Nama Produk</th>

<th>Harga</th>

</tr>

<tr>

<td>Produk A</td>

</tr>

<tr>

<td>Produk B</td>

</tr>

</table>

Dengan tiga langkah tersebut, kamu sudah bisa membuat tabel sederhana di HTML. Begitu kamu memahami cara menggunakan elemen-elemen dasar ini, kamu bisa mulai menyesuaikan dan menambahkan berbagai fitur lain untuk memperindah tampilan tabel.

Contoh Tabel HTML yang Sederhana?

Membuat tabel di HTML tidaklah sulit. Berikut adalah contoh tabel HTML sederhana yang dapat kamu buat untuk menampilkan data produk, seperti nama produk, harga, dan stok.

Tabel ini sangat berguna untuk menyajikan informasi secara terstruktur dan mudah dibaca oleh pengguna situs.

Contoh Kode:

<tr>

<th>Nama Produk</th>

<th>Harga</th>

</tr>

<tr>

<td>Produk A</td>

</tr>

<tr>

<td>Produk B</td>

</tr>

<tr>

<td>Produk C</td>

</tr>

</table>

Penjelasan Kode:

<table border="1">: Membuat tabel dengan border.
<tr>: Digunakan untuk membuat baris.
<th>: Menyusun header kolom.
<td>: Menyusun data dalam kolom.

Contoh Gambar Tabel:

Dengan kode ini, kamu sudah bisa membuat tabel sederhana yang berisi informasi produk secara mudah dan cepat!

Ingin Jadi Web Developer Profesional?

Setelah mempelajari dasar-dasar HTML, kini saatnya memanfaatkan pengetahuanmu untuk membuat tabel yang rapi dan terstruktur di situs web!

Yuk, ikuti Bootcamp Web Development di dibimbing.id! Di sini, kamu akan mempelajari cara membuat tabel di HTML, serta keterampilan penting lainnya seperti CSS dan JavaScript untuk menciptakan website profesional.

Belajar langsung dari mentor berpengalaman dengan kurikulum praktis dan aplikatif yang akan membantumu membangun situs web yang menarik dan mudah dipahami.

Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu di dunia Web Development semakin terbuka lebar!

Jadi, tunggu apa lagi? Hubungi kami dan Daftar sekarang di sini untuk memulai perjalananmu menjadi seorang Web Developer profesional. #BimbingSampeJadi!