Membuat Tabel di HTML

Pada dasarnya tag <table> jarang digunakan pada setiap halaman web yang sering dijelajahi kebanyakan orang. Tapi faktanya tabel paling sering digunakan untuk menampilkan informasi menjadi baris dan kolom.

Daftar isi:

Table sederhana

Berikut contoh yang sederhana untuk memulai menggunakan tabel, berikut contohnya:

<table>
    <tr>
        <th>Buah</th>
        <th>Harga</th>
        <th>Diskon</th>
    </tr>
    <tr>
        <td>Durian</td>
        <td>Rp50.000,-</td>
        <td>0%</td>
    </tr>
    <tr>
        <td>Semangka</td>
        <td>Rp5.000,-</td>
        <td>2%</td>
    </tr>
</table>

Ringkasan tag diatas:

  • Tag <table> menentukan elemen tabel
  • Tag <tr> digunakan untuk baris tabel
  • Tag <th> menentukan judul tabel
  • Tag <td> menentukan data tabel

Tag <th> akan menampilkan teks tebal secara bawaan, sedangkan tag <td> akan menampilkan teks biasa.

Catatan: Jika tidak ada garis berbatasan (border) tambahkan atribut border="1" di tag <table> atau baca Atribut border

Menggunakan tag thead, tbody, dan tfoot

Rasanya kurang lengkap jika tidak menggunakan tag <thead>, <tbody>, dan <tfoot>, kenapa hal ini dilakukan? Karena tag tersebut memisahkan elemen seperti bagian head, body, dan foot atau (footer). Berikut contohnya:

<table>
    <thead>
        <tr>
            <th>Buah</th>
            <th>Harga</th>
            <th>Diskon</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Durian</td>
            <td>Rp50.000,-</td>
            <td>0%</td>
        </tr>
        <tr>
            <td>Semangka</td>
            <td>Rp5.000,-</td>
            <td>2%</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Buah</th>
            <th>Harga</th>
            <th>Diskon</th>
        </tr>
    </tfoot>
</table>

Ringkasan tag diatas:

  • Tag <thead> sekumpulan baris header di tabel
  • Tag <tbody> sekumpulan baris elemen <tr> pada body di tabel
  • Tag <tfoot> sekumpulan baris footer di tabel

Catatan: Saya sangat jarang menggunakan tag <tfoot>, adapun saya menggunakannya untuk menampilkan elemen yang sama pada tag <thead>. Perlu diketahui tag <tfoot> bisa digunakan untuk menampilkan informasi seperti total harga atau semisalnya.

Menggunakan atribut tabel

Tabel secara bawaan memiliki beberapa atribut yang bisa Anda pelajari disini, hanya saja saya mengambil atribut yang paling umum digunakan.

Catatan: Berikut atribut yang tidak digunakan lagi, tetapi mungkin masih bisa berfungsi. Yaitu align, bgcolor, border, cellpadding, frame, roles, summary, dan width dikutip dari The Table element - MDN Web Docs

Contoh atribut border

Atribut border akan memberikan garis pembatas disekeliling tabel, ini memudahkan Anda untuk melihat struktur tampilan tabel. Perlu diketahui jika nilai border bernilai 0 maka garis pembatas tidak akan tampil, minimal bernilai 1 atau lebih. Berikut contohnya:

<table border="1">
    ...
</table>

Contoh atribut bgcolor

Atribut bgcolor akan mengantikan latar belakang tabel, Anda bisa menggunakan nilai atribut ini dengan kode RGB heksadesimal 6 digit yang diawali # atau bisa menggunakan keywords warna seperti contoh berikut ini:

<table bgcolor="whitesmoke">
    ...
</table>

Contoh atribut align

Atribut align memungkinkan sebuah elemen tabel akan disejajarkan di dalam dokumen yang dimuat. Berikut nilai bawaan dari atribut align:

  • left: tabel ditampilkan di sisi kiri dokumen
  • center: tabel ditampilkan di sisi tengah dokumen
  • right: tabel ditampilkan di sisi kanan dokumen

Berikut contohnya:

<table align="center">
    ...
</table>

Menggunakan atribut colspan dan rowspan

Pada tabel HTML ada yang tidak kalah penting untuk di pelajari yaitu atribut colspan dan rowspan. Berikut definisi keduanya:

  • Atribut colspan menentukan jumlah kolom yang akan di setel
  • Atribut rowspan menentukan jumlah baris yang akan di setel

Contoh atribut colspan

<table border="1">
    <tr>
        <th colspan="3">Menu</th>
    </tr>
    <tr>
        <td>Ayam Panggang</td>
        <td>Mie Ayam</td>
        <td>Nasi Goreng</td>
    </tr>
</table>

Contoh atribut rowspan

<table border="1">
    <tr>
        <th rowspan="4">Menu</th>
    </tr>
    <tr>
        <td>Ayam Panggang</td>
    </tr>
    <tr>
        <td>Mie Ayam</td>
    </tr>
    <tr>
        <td>Nasi Goreng</td>
    </tr>
</table>

Bonus contoh atribut colspan dan rowspan

<table border="1">
    <thead>
        <tr>
            <th rowspan="2">Buah</th>
            <th colspan="3">Jumlah</th>
            <th rowspan="2">Harga</th>
        </tr>
        <tr>
            <th>Masuk</th>
            <th>Keluar</th>
            <th>Sisa</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Durian</td>
            <td>50</td>
            <td>10</td>
            <td>40</td>
            <td>Rp50.000,-</td>
        </tr>
        <tr>
            <td>Semangka</td>
            <td>84</td>
            <td>44</td>
            <td>40</td>
            <td>Rp5.000,-</td>
        </tr>
    </tbody>
</table>

Sumber: MDN Web Docs

Belajar HTML Untuk Pemula