HTML Table

Tabel

Tabel digunakan untuk menampilkan Data Tabular, informasi yang paling masuk akal jika disajikan dalam baris dan kolom.

1. Struktur Dasar dan Kontainer Utama (<table>)

Elemen <table> adalah pembungkus utama seluruh konten tabel. Tanpa tag ini, elemen baris dan kolom di dalamnya tidak akan memiliki konteks visual.

Di dalam kontainer ini, terdapat pembagian struktur:

• <thead>: Bagian kepala tabel yang menampung judul kolom.
• <tbody>: Bagian tubuh tabel yang menampung data utama.
• <tfoot>: Bagian kaki tabel (biasanya untuk total atau kesimpulan).

<table>
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
    <tfoot>
        ...
    </tfoot>
</table>

2. Judul Tabel (<caption>)

Elemen <caption> berfungsi sebagai judul atau ringkasan singkat isi tabel. Secara aturan HTML, tag ini harus diletakkan setelah tag pembuka <table>. Hal ini sangat membantu pengguna screen reader untuk langsung mengetahui isi tabel tanpa harus membacanya sel demi sel.

<table border="1" width="100%">
    <caption>Table 1.1 Hasil Penjualan</caption>
    ...
</table>

3. Header (<th>) dan Data (<td>)

Perbedaan antara th dan td:

• <th> (Table Heading): Digunakan untuk sel yang bertindak sebagai label/judul. Secara visual, browser akan membuatnya tebal dan rata tengah.
• <td> (Table Data): Digunakan untuk sel berisi data informasi biasa.

Setiap sel (baik <th> maupun <td>) harus dibungkus oleh elemen <tr> (Table Row) yang mendefinisikan baris.

<table>
    <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>Siti</td>
            <td>23</td>
            <td>Bandung</td>
        </tr>
    </tbody>
</table>

4. Border dan Size

Meskipun saat kita lebih sering menggunakan CSS, HTML memiliki atribut bawaan untuk border dan size:

• border: Menentukan ketebalan garis tepi tabel (misal: border="1").
• width & height (Size): Menentukan ukuran tabel. Bisa menggunakan satuan piksel (500) atau persentase (100%) agar tabel bersifat responsif terhadap lebar layar.

<table border="1" width="500" height="200">
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Andi</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Siti</td>
    <td>23</td>
  </tr>
</table>

5. Manipulasi Sel (Cell Spanning)

Inilah bagian yang paling sering membingungkan. Spanning memungkinkan satu sel mengambil ruang sel lain di sebelahnya.

• colspan (Spanning Columns): Menggabungkan sel secara horizontal (ke samping). Digunakan jika satu kategori data mencakup beberapa kolom di bawahnya.
• rowspan (Spanning Rows): Menggabungkan sel secara vertikal (ke bawah). Digunakan jika satu data yang sama berulang di baris-baris berikutnya.

Contoh colspan

<table border="1" width="500">
    <tbody>
        <tr>
            <th colspan="3">Data Nilai Siswa</th>
        </tr>
        <tr>
            <th>Nama</th>
            <th>Matematika</th>
            <th>Bahasa Inggris</th>
        </tr>
        <tr>
            <td>Andi</td>
            <td>85</td>
            <td>90</td>
        </tr>
    </tbody>
</table>

Contoh rowspan

<table border="1" width="500">
    <tbody>
        <tr>
            <th>Nama</th>
            <th>Hobi</th>
        </tr>
        <tr>
            <td rowspan="2">Siti</td>
            <td>Membaca</td>
        </tr>
        <tr>
            <td>Menulis</td>
        </tr>
    </tbody>
</table>

Latihan

Buatlah table dengan tampilan berikut ini :