Belajar HTML - Membuat Tabel untuk Menampilkan Data

Home » HTML

Halo teman-teman,

Setelah sebelumnya kita belajar cara menampilkan gambar di HTML, sekarang kita lanjut ke fitur lain yang berguna banget kalau kamu ingin menyusun data dengan rapi: tabel.

Dengan tabel, kamu bisa menyusun informasi dalam format baris dan kolom—cocok banget untuk data seperti jadwal, daftar harga, laporan, dan semacamnya.

Dasar Struktur Tabel HTML

Untuk membuat tabel, kamu akan menggunakan tag-tag berikut:

<table> untuk memulai tabel
<tr> untuk membuat baris (table row)
<th> untuk membuat judul kolom (table heading)
<td> untuk membuat sel data (table data)

Contoh dasar:

<table>
  <tr>
    <th>Nama</th>
    <th>Umur</th>
  </tr>
  <tr>
    <td>Rina</td>
    <td>21</td>
  </tr>
  <tr>
    <td>Budi</td>
    <td>23</td>
  </tr>
</table>

Keterangan:

Baris pertama <tr> berisi judul kolom (<th>) — tampil tebal dan rata tengah secara default
Baris-baris berikutnya berisi data (<td>) — sel data biasa

Menambahkan Border dan Styling Tabel

Secara default, HTML tidak menampilkan garis tabel. Supaya tabel terlihat lebih rapi, kamu bisa tambahkan style:

<table style="border: 1px solid black; border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid black; padding: 8px;">Nama</th>
    <th style="border: 1px solid black; padding: 8px;">Umur</th>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 8px;">Rina</td>
    <td style="border: 1px solid black; padding: 8px;">21</td>
  </tr>
</table>

Beberapa properti penting:

border: untuk menambahkan garis
border-collapse: collapse: supaya garis tidak dobel
padding: memberi jarak di dalam sel
text-align: mengatur posisi teks (kiri, tengah, kanan)

Menggabungkan Sel: `colspan` dan `rowspan`

Kamu bisa menggabungkan beberapa kolom atau baris menjadi satu sel menggunakan atribut berikut:

colspan untuk menggabungkan beberapa kolom
rowspan untuk menggabungkan beberapa baris

Contoh colspan:

<tr>
  <td colspan="2">Data digabung 2 kolom</td>
</tr>

Contoh rowspan:

<tr>
  <td rowspan="2">Gabung 2 baris</td>
  <td>Baris 1</td>
</tr>
<tr>
  <td>Baris 2</td>
</tr>

Dengan memahami dasar-dasar tabel ini, kamu bisa mulai menyusun data dengan rapi dan terstruktur di halaman web kamu. Jangan lupa untuk selalu perhatikan keterbacaan dan tampilan agar tabel mudah dipahami pengunjung.

Kalau kamu punya pertanyaan atau mau berbagi contoh tabel yang sedang kamu buat, tulis aja di kolom komentar ya. Kita bahas bareng!

Di materi selanjutnya, kita akan bahas tentang list di HTML—cara membuat daftar berurutan dan tidak berurutan dengan <ul>, <ol>, dan <li>. Sampai ketemu di tutorial berikutnya!