Pengenalan HTML 11
Membuat Tabel (Table)

Kali ini kita akan mempelajari apa itu tabel (table). Kalian pasti pernah memakai Microsoft Word bukan? Di dalam Microsoft Word tersebut kita bisa menggunakan fasilitas tabel untuk bisa membuat urutan terlihat lebih rapi.

Contoh Gambar Tabel dalam Microsoft Word

Sekarang kita coba analisa bersama gambar di atas. Pada gambar di atas, terdapat komponen:

1. Header yang menggunakan huruf tebal (No., Hari, Jadwal)
2. Isi yang hurufnya tidak tebal

Untuk mulai belajar tabel, kita akan membuat tabel sederhana dengan tag struktur adalah:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Isi 1</td>
        <td>Isi 2</td>
        <td>Isi 3</td>
    </tr>
    <tr>
        <td>Isi 1</td>
        <td>Isi 2</td>
        <td>Isi 3</td>
    </tr>
</table>

Penjelasannya adalah sebagai berikut:

• tag <table> dan </table> merupakan penanda bahwa ini adalah komponen sebuah tabel
• tag <tr> dan </tr> merupakan penanda bahwa ada row / baris baru
• tag <th> dan </th> merupakan penanda bahwa di dalam row / baris tersebut akan ditambahkan header, dengan huruf tebal
• tag <td> dan </td> merupakan penanda bahwa di dalam row / baris tersebut akan ditambahkan isi, dengan huruf normal (tidak tebal)

Di dalam row (<tr> </tr>), jumlah kolom (<th> </th> dan <td> </td>) baik td ataupun th ataupun campuran darinya harus sama jumlahnya.

Nah Tugas kali ini, coba kalian belajar membuat tabel seperti pada gambar di bawah ini.

Silakan kalian kombinasikan styling bootstrap untuk bisa membuat huruf ke tengah dan list untuk membuat list nya, dan jangan lupa beri warna yang menarik.

Kapan tabel dipakai, dan kapan tidak

Tabel dirancang untuk menyajikan data berbentuk baris dan kolom, seperti jadwal pelajaran, daftar nilai, atau harga barang. Tabel tidak cocok dipakai untuk mengatur tata letak halaman; untuk itu gunakan div dan Bootstrap. Aturan sederhananya: jika datanya bisa dibuka dengan spreadsheet, gunakan tabel.

Contoh tabel jadwal yang lengkap

<table class="table table-bordered table-striped">
    <caption>Jadwal Pelajaran Kelas 7</caption>
    <thead class="table-dark">
        <tr>
            <th>No.</th>
            <th>Hari</th>
            <th>Mata Pelajaran</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Senin</td>
            <td>Matematika</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Selasa</td>
            <td>Informatika</td>
        </tr>
    </tbody>
</table>

Selain tag dasar, ada beberapa tag pendukung. <caption> memberi judul pada tabel. <thead> membungkus baris judul kolom, <tbody> membungkus isinya, dan <tfoot> dipakai untuk baris ringkasan seperti total. Pembagian ini membantu pembaca layar dan memudahkan pengaturan gaya. Class Bootstrap table mengubah tabel polos menjadi rapi, table-bordered menambah garis, table-striped membuat warna baris selang-seling, dan table-hover menyorot baris yang dilewati kursor.

Menggabungkan sel dengan colspan dan rowspan

Kadang satu sel perlu melebar ke beberapa kolom atau baris. Atribut colspan menggabungkan sel ke samping, dan rowspan menggabungkan ke bawah. Contohnya <th colspan="2">Nilai</th> membuat satu judul yang membentang di atas dua kolom. Saat memakai atribut ini, hitung ulang jumlah kolom setiap baris karena sel yang tergabung menggantikan beberapa sel biasa.

Kesalahan yang sering terjadi

• Jumlah td tiap baris tidak sama sehingga tabel berbentuk miring atau bergeser.
• Memakai tabel untuk menata menu atau kolom halaman; hasilnya sulit dibaca di ponsel.
• Lupa menutup </tr> atau </td>.
• Menaruh td langsung di dalam table tanpa tr.
• Menggunakan td untuk judul kolom padahal seharusnya th, sehingga judul tidak bermakna bagi pembaca layar.

Ringkasan

Tabel tersusun dari table, tr, th, dan td. Gunakan thead, tbody, dan caption agar rapi dan mudah diakses, serta class Bootstrap untuk tampilan. Gunakan tabel khusus untuk data, bukan untuk tata letak.

Latihan

1. Tag mana yang menandai satu baris tabel?
   Lihat jawaban

   <tr>.
2. Berapa kolom yang terbentuk bila satu baris berisi tiga th?
   Lihat jawaban

   Tiga kolom, dan baris lain harus memiliki jumlah sel yang sama (tiga).
3. Class Bootstrap apa yang membuat tabel bergaris dan baris berselang-seling warna?
   Lihat jawaban

   table table-bordered table-striped.
4. Bagaimana membuat judul "Nilai" yang melebar di atas dua kolom?
   Lihat jawaban

   <th colspan="2">Nilai</th>.