Tutorial Table Pemula: Membuat Tabel HTML dari Dasar

Table html memungkinkan menampilkan data dalam baris dan kolom secara terstruktur, ideal untuk pemula yang belajar web development.

Table html digunakan untuk menampilkan data terstruktur seperti statistik, jadwal, daftar harga, atau informasi lain yang membutuhkan format grid.

Dengan memahami struktur table HTML, pemula dapat membuat tampilan data yang rapi dan informatif.

Struktur Dasar HTML Tables

Elemen utama tabel adalah <table>, yang berisi <tr> (baris), <th> (header), dan <td> (data).

<table>
    <tr>
        <th>Nama</th>
        <th>Umur</th>
        <th>Kota</th>
    </tr>
    <tr>
        <td>Andi</td>
        <td>25</td>
        <td>Jakarta</td>
    </tr>
    <tr>
        <td>Budi</td>
        <td>30</td>
        <td>Surabaya</td>
    </tr>
</table>

• table: membungkus seluruh tabel.
• tr: membuat baris tabel.
• th: sel header di baris pertama.
• td: sel data di baris tabel.

Menambahkan Borders pada Tabel

Atribut border menambahkan garis pembatas agar tabel lebih mudah dibaca.

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Umur</th>
        <th>Kota</th>
    </tr>
    <tr>
        <td>Andi</td>
        <td>25</td>
        <td>Jakarta</td>
    </tr>
</table>

Menggabungkan Sel: Rowspan dan Colspan

Colspan (Horizontal)

<table border="1">
    <tr>
        <th colspan="2">Nama Lengkap</th>
        <th>Umur</th>
    </tr>
    <tr>
        <td>Andi</td>
        <td>Setiawan</td>
        <td>25</td>
    </tr>
</table>

Rowspan (Vertikal)

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Umur</th>
    </tr>
    <tr>
        <td rowspan="2">Budi</td>
        <td>30</td>
    </tr>
    <tr>
        <td>32</td>
    </tr>
</table>

Header, Body, dan Footer Tabel

Tabel dapat dibagi menjadi <thead>, <tbody>, dan <tfoot> agar lebih terstruktur.

<table border="1">
    <thead>
        <tr>
            <th>Nama</th>
            <th>Umur</th>
            <th>Kota</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Andi</td>
            <td>25</td>
            <td>Jakarta</td>
        </tr>
        <tr>
            <td>Budi</td>
            <td>30</td>
            <td>Surabaya</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Data terakhir di-update: Agustus 2024</td>
        </tr>
    </tfoot>
</table>

Ringkasan

HTML Tables membantu menampilkan data terstruktur secara jelas. Dengan menguasai tr, th, td, serta atribut rowspan dan colspan, pemula dapat membuat tabel yang informatif dan fleksibel.

Apa pendapatmu? Tulis di kolom komentar dengan sopan dan beretika. Jangan lupa bagikan agar semakin banyak yang tahu!