SIAP | Sistem Informasi Anak Pintar

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.