Cara Membuat Tabel HTML Lengkap dengan Contoh

Tabel HTML adalah salah satu elemen penting dalam pengembangan website yang digunakan untuk menampilkan data dalam format baris dan kolom. Dengan menggunakan tabel html, Anda dapat menyajikan informasi secara terstruktur dan mudah dibaca oleh pengunjung website.

Baca juga: Cara Menampilkan Teks di HTML dengan Tag Heading dan Paragraph

Struktur Dasar Tabel HTML

Untuk membuat tabel di HTML, Anda memerlukan beberapa tag utama yang bekerja secara bersamaan. Berikut adalah tag-tag penting dalam pembuatan tabel html:

• <table> – Tag pembuka untuk membuat tabel
• <tr> – Tag untuk membuat baris (table row)
• <td> – Tag untuk membuat sel data (table data)
• <th> – Tag untuk membuat header tabel (table header)

Contoh Tabel HTML Sederhana

Berikut adalah contoh dasar cara membuat tabel html:

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Umur</th>
        <th>Kota</th>
    </tr>
    <tr>
        <td>Budi</td>
        <td>25</td>
        <td>Jakarta</td>
    </tr>
    <tr>
        <td>Ani</td>
        <td>22</td>
        <td>Bandung</td>
    </tr>
</table>
Code language: HTML, XML (xml)

Hasil tampilan tabel:

Kode di atas akan menghasilkan tabel dengan 3 kolom (Nama, Umur, Kota) dan 2 baris data.

Menambahkan Border pada Tabel

Untuk membuat tabel html lebih jelas, Anda bisa menambahkan border menggunakan atribut border atau CSS:

<table border="1" cellpadding="10" cellspacing="0">
    <tr>
        <th>Produk</th>
        <th>Harga</th>
    </tr>
    <tr>
        <td>Laptop</td>
        <td>Rp 5.000.000</td>
    </tr>
</table>
Code language: HTML, XML (xml)

Hasil tampilan tabel:

Menggabungkan Sel Tabel (Colspan dan Rowspan)

HTML memungkinkan Anda menggabungkan sel menggunakan atribut colspan (menggabungkan kolom) dan rowspan (menggabungkan baris):

<table border="1">
    <tr>
        <th colspan="2">Data Siswa</th>
    </tr>
    <tr>
        <td>Nama</td>
        <td>Ahmad</td>
    </tr>
    <tr>
        <td>Kelas</td>
        <td>10A</td>
    </tr>
</table>
Code language: HTML, XML (xml)

Hasil tampilan tabel:

Styling Tabel dengan CSS

Agar tabel html terlihat lebih menarik, Anda dapat menambahkan CSS:

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        padding: 12px;
        text-align: left;
        border: 1px solid #ddd;
    }
    th {
        background-color: #4CAF50;
        color: white;
    }
    tr:hover {
        background-color: #f5f5f5;
    }
</style>

<table>
    <tr>
        <th>No</th>
        <th>Mata Pelajaran</th>
        <th>Nilai</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Matematika</td>
        <td>85</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Bahasa Indonesia</td>
        <td>90</td>
    </tr>
</table>
Code language: HTML, XML (xml)

Hasil tampilan tabel:

Tips Membuat Tabel HTML yang Baik

1. Gunakan tag <thead>, <tbody>, dan <tfoot> untuk struktur tabel yang lebih semantik
2. Tambahkan atribut scope pada tag <th> untuk aksesibilitas
3. Gunakan CSS untuk styling daripada atribut HTML deprecated
4. Pastikan tabel responsif untuk tampilan mobile dengan CSS atau framework

Kesimpulan

Membuat tabel html sangat mudah dengan memahami struktur dasar tag <table>, <tr>, <td>, dan <th>. Dengan menambahkan CSS, Anda dapat membuat tabel yang tidak hanya fungsional tetapi juga menarik secara visual. Praktikkan contoh-contoh di atas untuk menguasai cara membuat tabel di HTML dengan sempurna.