Yuk, Belajar Bikin Tabel di HTML!

Halo, teman-teman RPL! Siapa di sini yang pernah melihat data di internet yang tersusun rapi dalam bentuk kotak-kotak, seperti jadwal pelajaran, daftar harga, atau daftar nilai? Nah, itu namanya tabel, dan kita bisa bikin sendiri menggunakan HTML.

Bayangkan kamu sedang membuat daftar jadwal piket kelas. Pasti akan lebih rapi kalau datanya dimasukkan ke dalam kotak-kotak, kan? Daripada cuma ditulis berderet-deret. Nah, tabel di HTML itu fungsinya mirip, yaitu untuk menyajikan data yang terstruktur.

1. Elemen Dasar Tabel

Untuk membuat tabel, kita butuh beberapa "bahan" atau tag HTML. Ingat, tag di HTML selalu berpasangan, ada tag pembuka (<tag>) dan tag penutup (</tag>).

  • <table>...</table>: Ini adalah tag paling utama. Semua isi tabel harus berada di dalam tag ini. Anggap saja ini "wadah" atau "bingkai" dari tabel kita.

  • <tr>...</tr>: Tag ini singkatan dari table row, yang artinya baris. Setiap <tr> mewakili satu baris data di dalam tabel.

  • <td>...</td>: Tag ini singkatan dari table data, yang artinya sel data. Ini adalah kotak-kotak kecil tempat kita memasukkan isi tabel, seperti nama hari, nama siswa, atau mata pelajaran. Tag ini harus berada di dalam <tr>.

  • <th>...</th>: Tag ini singkatan dari table header, yang artinya judul kolom. Ini mirip dengan <td>, tapi biasanya digunakan untuk membuat judul di bagian atas atau samping tabel. Teks di dalam <th> akan terlihat lebih tebal dan rata tengah secara otomatis.

2. Contoh Sederhana

Agar lebih paham, yuk kita coba buat tabel jadwal piket sederhana. Kita akan buat tabel dengan 2 baris dan 3 kolom.


<table>
  <tr>
    <th>Hari</th>
    <th>Nama Siswa</th>
  </tr>
  <tr>
    <td>Senin</td>
    <td>Andi</td>
  </tr>
  <tr>
    <td>Selasa</td>
    <td>Budi</td>
  </tr>
</table>

3. Penjelasan Kode

  • Kita mulai dengan tag <table>.

  • Di dalam <table>, kita buat baris pertama menggunakan <tr>.

  • Di dalam baris pertama itu, kita gunakan <th> untuk membuat judul kolom, yaitu "Hari" dan "Nama Siswa".

  • Lalu, kita buat baris kedua menggunakan <tr> lagi.

  • Di dalam baris kedua, kita pakai <td> untuk memasukkan data: "Senin" dan "Andi".

  • Sama seperti baris kedua, kita buat baris ketiga untuk data "Selasa" dan "Budi".

  • Terakhir, jangan lupa tutup tag <table>

Hasil nya adalah sebagai berikut :


Tentu, mari kita buat materi tentang cara membuat tabel di HTML dengan bahasa yang mudah dipahami untuk anak-anak SMK jurusan Rekayasa Perangkat Lunak (RPL).

Yuk, Belajar Bikin Tabel di HTML!

Halo, teman-teman RPL! Siapa di sini yang pernah melihat data di internet yang tersusun rapi dalam bentuk kotak-kotak, seperti jadwal pelajaran, daftar harga, atau daftar nilai? Nah, itu namanya tabel, dan kita bisa bikin sendiri menggunakan HTML.

Bayangkan kamu sedang membuat daftar jadwal piket kelas. Pasti akan lebih rapi kalau datanya dimasukkan ke dalam kotak-kotak, kan? Daripada cuma ditulis berderet-deret. Nah, tabel di HTML itu fungsinya mirip, yaitu untuk menyajikan data yang terstruktur.

1. Elemen Dasar Tabel

Untuk membuat tabel, kita butuh beberapa "bahan" atau tag HTML. Ingat, tag di HTML selalu berpasangan, ada tag pembuka (<tag>) dan tag penutup (</tag>).

  • <table>...</table>: Ini adalah tag paling utama. Semua isi tabel harus berada di dalam tag ini. Anggap saja ini "wadah" atau "bingkai" dari tabel kita.

  • <tr>...</tr>: Tag ini singkatan dari table row, yang artinya baris. Setiap <tr> mewakili satu baris data di dalam tabel.

  • <td>...</td>: Tag ini singkatan dari table data, yang artinya sel data. Ini adalah kotak-kotak kecil tempat kita memasukkan isi tabel, seperti nama hari, nama siswa, atau mata pelajaran. Tag ini harus berada di dalam <tr>.

  • <th>...</th>: Tag ini singkatan dari table header, yang artinya judul kolom. Ini mirip dengan <td>, tapi biasanya digunakan untuk membuat judul di bagian atas atau samping tabel. Teks di dalam <th> akan terlihat lebih tebal dan rata tengah secara otomatis.

2. Contoh Sederhana

Agar lebih paham, yuk kita coba buat tabel jadwal piket sederhana. Kita akan buat tabel dengan 2 baris dan 3 kolom.

HTML
<table>
  <tr>
    <th>Hari</th>
    <th>Nama Siswa</th>
  </tr>
  <tr>
    <td>Senin</td>
    <td>Andi</td>
  </tr>
  <tr>
    <td>Selasa</td>
    <td>Budi</td>
  </tr>
</table>

3. Penjelasan Kode

  • Kita mulai dengan tag <table>.

  • Di dalam <table>, kita buat baris pertama menggunakan <tr>.

  • Di dalam baris pertama itu, kita gunakan <th> untuk membuat judul kolom, yaitu "Hari" dan "Nama Siswa".

  • Lalu, kita buat baris kedua menggunakan <tr> lagi.

  • Di dalam baris kedua, kita pakai <td> untuk memasukkan data: "Senin" dan "Andi".

  • Sama seperti baris kedua, kita buat baris ketiga untuk data "Selasa" dan "Budi".

  • Terakhir, jangan lupa tutup tag <table>.

4. Merapikan Tabel (colspan & rowspan)

Terkadang, ada data yang butuh digabung. Misalnya, kalau ada dua hari yang sama-sama piket tapi datanya berbeda. Kita bisa menggabungkan sel atau kotak menggunakan atribut colspan dan rowspan.

  • colspan: Singkatan dari column span. Digunakan untuk menggabungkan sel secara horizontal (ke samping). Nilai yang kita berikan adalah berapa banyak kolom yang ingin digabung.

  • rowspan: Singkatan dari row span. Digunakan untuk menggabungkan sel secara vertikal (ke bawah). Nilai yang kita berikan adalah berapa banyak baris yang ingin digabung.

Contoh colspan:

Misalnya, kita ingin membuat satu judul besar untuk dua kolom. Kita gunakan colspan="2".



<table>
  <tr>
    <th colspan="2">Jadwal Piket</th>
  </tr>
  <tr>
    <td>Hari</td>
    <td>Nama</td>
  </tr>
  <tr>
    <td>Senin</td>
    <td>Andi</td>
  </tr>
</table>

Contoh rowspan:

Misalnya, nama "Budi" piket dua hari berturut-turut. Kita bisa gabungkan selnya ke bawah dengan rowspan="2".



<table>
  <tr>
    <td>Hari</td>
    <td>Nama</td>
  </tr>
  <tr>
    <td>Senin</td>
    <td rowspan="2">Budi</td>
  </tr>
  <tr>
    <td>Selasa</td>
  </tr>
</table>
Nah, itu dia dasar-dasar untuk membuat tabel di HTML. Kuncinya adalah ingat urutannya: tabel > baris (tr) > sel (td/th). Dengan latihan, kamu pasti bisa membuat tabel yang rapi dan terstruktur! Selamat mencoba! 😊