Membuat tabel di HTML

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

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>

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.