Tabel

Tampilkan data baris-kolom dengan table, tr, th, dan td.

Pahami konsepnya

Tabel menyajikan informasi dalam kisi baris dan kolom — tepat untuk data terstruktur: daftar harga, jadwal, hasil ujian. Kerangkanya: <table> membungkus semuanya, <tr> (table row) membuat satu baris, dan <td> (table data) menjadi sel isi di dalam baris tersebut.

Baris kepala memakai <th> (table heading) alih-alih td — isinya tebal dan rata tengah secara bawaan, serta dibaca sebagai judul kolom oleh pembaca layar. Hitungannya lugas: tabel tiga kolom berarti setiap tr memuat tiga td/th.

Garis tabel yang tampak pada contoh lama berasal dari atribut border="1" — cara usang yang kini digantikan CSS (properti border pada sel). Materi CSS akhir kursus ini sampai ke sana; untuk sekarang, bayangkan tabelmu berbingkai tipis.

Coba contoh kode

<table>
  <tr>
    <th>No</th>
    <th>Nama</th>
    <th>Kota</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Badrul</td>
    <td>Sumedang</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Andi</td>
    <td>Jakarta</td>
  </tr>
</table>

Baris pertama berisi th karena kepala kolom; dua baris berikut td berisi data. Bayangkan sel-sel itu berbingkai: kolom rata karena jumlah td tiap baris sama. Tanpa CSS, tabel tampil tanpa garis — strukturnya tetap ada, tampilannya menyusul nanti.

Tampilan cepat berbingkai

<style>
  table, th, td { border: 1px solid #999; }
</style>

Tiga baris CSS ini menempelkan garis pada tabel dan tiap selnya — versi modern dari border="1" zaman dulu. Cukup letakkan di dalam head untuk melihat tabelmu berbingkai saat mengembangkan materi ini.

Latihan singkat

Buat tabel jadwal pelajaranmu: baris kepala hari, dua baris isi mata pelajaran, lalu beri bingkai dengan potongan CSS di atas.