Tutorial Cara Membuat Tabel di HTML untuk Pemula

Cara Membuat Tabel di HTML – Pernah Anda kebingungan menampilkan data secara rapi di halaman web? Tenang, solusinya sederhananya kita dapat menggunakan tabel di HTML. Pada artikel ini, kita akan belajar bersama cara membuat tabel di HTML untuk pemula dengan mudah.

Apalagi kalau Anda masih pemula dan belum tahu apa itu tabel pada HTML? Jangan khawatir. Di sini, kita akan belajar bareng mulai dari fungsi tabel di HTML, cara membuat tabel di HTML, hingga menyusun contoh tabel di HTML yang menarik dan responsif.

Apa Itu Tabel pada HTML?

Secara sederhana, tabel di HTML adalah elemen penting yang digunakan untuk menyusun data dalam bentuk baris dan kolom. Misalnya, jika Anda ingin menampilkan daftar produk, jadwal pelajaran, atau laporan keuangan, maka menggunakan tabel HTML adalah pilihan yang tepat.

Secara teknis, struktur dasar dalam membuat tabel di HTML yaitu menggunakan elemen <table>, <tr> (table row), <td> (table data), dan <th> (table header). Nah, struktur dasar membuat tabel HTML inilah yang jadi pondasi untuk menyusun data yang rapi dan mudah dibaca.

Fungsi Tabel di HTML

Salah satu fungsi tabel HTML adalah menyusun dan menampilkan data dengan cara yang lebih sistematis. Dengan adanya baris dan kolom, informasi menjadi lebih mudah dipahami oleh pengguna. Tabel juga membantu mempercantik tampilan halaman ketika digunakan secara proporsional.

Tidak hanya itu, fungsi tabel pada HTML juga berperan besar dalam pembuatan layout atau tampilan halaman pada masa awal pengembangan web. Meski sekarang layout lebih banyak menggunakan CSS, namun fungsi tabel di HTML tetap relevan, terutama dalam penyajian data tabular.

Cara Membuat Tabel di HTML

Nah, tibalah saatnya kita masuk ke bagian inti dari tutorial cara membuat tabel di HTML. Langkah pertama yang harus kita pahami adalah memahami struktur dasar membuat tabel pada HTML sebagai berikut.

<table>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>25</td>
  </tr>
</table>

Penjelasan

• <table> – Tag utama atau kerangka tabel.
• <tr> – Baris tabel.
• <th> – digunakan untuk header atau judul kolom.
• <td> – untuk data di setiap kolom.

Jika Anda bertanya, struktur dasar untuk membuat tabel pada HTML adalah apa? Maka, jawabannya ya itu tadi. Cukup simpel, bukan?

Untuk menambahkan gaya, Anda bisa mulai dengan cara membuat tabel HTML yang bagus dan rapi menggunakan CSS. Bisa juga mencoba cara membuat tabel HTML berwarna agar tidak monoton dan lebih menarik. Perhatikan contoh berikut.

<style>
  table {
    border-collapse: collapse;
    width: 100%;
    background-color: #f9f9f9;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  th {
    background-color: #4CAF50;
    color: white;
  }
</style>

Tag untuk membuat tabel di HTML adalah <table>, lalu ditambahkan baris dan kolomnya seperti contoh di atas. Anda juga bisa mengatur agar membuat tabel HTMLdi tengah halaman menggunakan CSS margin: auto.

Contoh Tabel di HTML

Setelah kita memahami struktur dasar membuat tabel pada HTML, mari kita lihat contoh tabel di HTML yang menarik dan mudah dimengerti. Misalnya, Anda ingin menampilkan data nilai siswa.

<table>
  <tr>
    <th>Nama</th>
    <th>Matematika</th>
    <th>Bahasa Indonesia</th>
  </tr>
  <tr>
    <td>Budi</td>
    <td>85</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Santi</td>
    <td>78</td>
    <td>88</td>
  </tr>
</table>

Tabel di atas sangat cocok digunakan pada halaman laporan atau pendidikan. Namun, agar lebih eye-catching, Anda bisa terapkan cara membuat tabel HTML yang menarik dengan menambahkan warna dan border yang elegan.

Jika Anda ingin tampil beda, Anda juga bisa mencoba cara membuat tabel menggunakan HTML yang bagus dengan menambahkan efek hover atau border dinamis. Ini adalah salah satu cara meningkatkan estetika UI halaman web Anda.

Penutup

Intinya, cara membuat tabel di HTML itu ternyata tidak sesulit yang dibayangkan. Setelah tahu fungsi tabel HTML, memahami struktur dasar dalam membuat tabel pada HTML yaitu elemen-elemen <table>, <tr>, <td>, dan <th>, Anda sekarang bisa menyusun dan menampilkan data dengan rapi di halaman web.

Jadi, jangan ragu untuk terus eksplorasi lebih dalam. Pelajari cara membuat tabel di HTML yang menarik, bereksperimen dengan warna, dan jangan lupa terapkan struktur dasar yang benar. Jika Anda sudah menguasai ini, maka Anda selangkah lebih dekat menjadi web developer yang andal.