Logo Komodo Koding /Koding

Membuat tabel di HTML

Saat menampilkan data yang terstruktur biasanya kita menggunakan sebuah tabel yang terbagi ke baris dan kolom. Lihat caranya di HTML

Saat menampilkan data yang terstruktur biasanya kita menggunakan sebuah tabel yang terbagi ke baris dan kolom. Seperti berikut

Nama Jenis
Paus Air
Rusa Darat
Hiu Air

Tabel di atas, dibuat dengan kode HTML berikut

<table>
  <tr>
    <th>Nama</th>
    <th>Jenis</th>
  </tr>
  <tr>
    <td>Paus</td>
    <td>Air</td>
  </tr>
  <tr>
    <td>Rusa</td>
    <td>Darat</td>
  </tr>
   <tr>
    <td>Hiu</td>
    <td>Air</td>
  </tr>
</table>

😳 Info

Tampilan tabel di atas sudah dihias dari tampilan aslinya

Tampilan dasar tabel HTML

Secara otomatis, tampilan dasar dari tabel akan terbagi ke baris dan kolom namun tanpa ada batas apa-apa. Tidak ada jarak dan baris. Untuk menghiasnya kita perlu belajar CSS nanti.

Cara membuat tabel HTML

  • Untuk membuat tabel, gunakan tag <table> sebagai pembungkus
  • Untuk membuat barisnya, gunakan tag <tr> (singkatan dari table row)
  • Untuk membuat isi dari setiap barisnya, gunakan tag <td> (singkatan dari table data)
  • Untuk membuat judul dari masing-masing baris tabelnya, gunakan tag <th> (singkatan dari table header)

Mungkin kamu akan bingung jika harus mengingat semuanya. Tidak perlu khawatir. Kamu bisa menyalin dan memainkan kode di sini.

See the Pen sample P and h1 tag by Sekolah Koding (@sekolahkoding) on CodePen.

Keterangan:

  • <th> membungkus “Nama” dan “Jenis”. Karena itu mereka menjadi tebal seperti sebuah judul
  • Setelah itu, masing-masing hewan disusun menjadi baris di antara tag <tr>

Membuat tabel HTML dengan 3 kolom

Dari contoh di atas, mari mengembangkan dengan kolom ketiga

See the Pen sample P and h1 tag by Sekolah Koding (@sekolahkoding) on CodePen.

Dengan prinsip yang sama, kamu bisa mengembangkannya menjadi berapapun baris atau kolom yang kamu butuhkan.

🤔 Coba deh

1. Tambahkan hewan di atas dan 2. Tambahkan kategori baru yaitu kategori "Bertelur"