Cara Membuat Tabel Menggunakan kode HTML [Tabel Part-1]

Halo Go Troopers, apa kabar hari ini?

Balik di blog Goilkom, blog dengan berbagai Informasi bermanfaat serta tips dan trik menarik lainnya.

Sesuai dengan Judul artikel di atas, pada kesempatan kali ini saya akan berbagi sebuah tutorial coding untuk anda, yaitu Cara Membuat Tabel Menggunakan kode HTML [Tabel Part-1]



Dalam menampilkan data yang terstruktur atau tampilan dari database, seseorang biasanya akan membuatnya dalam bentuk tabel.

Nah, dalam bahasa Markup seperti HTML juga menyediakan Tabel tag yang dapat digunakan untuk menampilkan data dalam bentuk tabel.

Bagaimana cara membuat tabel menggunakan kode HTML?

Untuk membuat sebuah tabel menggunakan kode HTML sangatlah mudah, tapi sebelum itu anda harus tahu beberapa tag yang digunakan dalam membuat sebuah tabel. Tag apa sajakah itu?

Berikut ini beberapa tag yang digunakan dalam membuat sebuah tabel serta pejelasannya.


Penjelasan Serta Tag Yang Digunakan Dalam Membuat Tabel HTML


Untuk membuat sebuah tabel anda perlu menengenal 5 jenis tag html yaitu <table>, <thead>, <tbody>, <th>, <tr>, dan <td>.

  • Tag <table>
    Tag ini merupakan tag pertama yang hanya digunakan pada saat ingin memulai sebuah tabel.
  • Tag <thead>
    Tag ini digunakan untuk membedahkan bagian kepala tabel agar tidak tergabung dengan badan tabel.
  • Tag <tbody>
    Tag ini sama halnya dengan tag <thead> digunakan untuk membedakan bagian badan tabel agar tidak tergabung dengan kepala tabel.
  • Tag <tr>
    Tag ini adalah singkatan dari table row yang digunakan untuk membuat baris baru pada tabel dan tag ini diletakkan diantara tag <tbody>
  • Tag <th>
    Tag ini adalah singkatan dari table heading yang biasa digunakan pada bagian kepala tabel dan tag ini diletakkan diantara tag <tr>
  • Tag <td>
    Tag ini adalah singkatan dari table data yang digunakan untuk menginput data ke tabel dan tag ini diletakkan diantara tag <tr>

Itulah penjelasan serta beberapa jenis tag html yang digunakan untuk membuat sebuah tabel.


Membuat Tabel Menggunakan Enam Tag HTML di Atas


Setelah anda memahami penjelasan tentang enam tag htm yang di gunakan dalam membuat sebuah tabel di atas.

Maka selanjutnya kita lanjut ke cara menggunakan enam tag di atas untuk membuat tabel.

Berikut ini contoh penggunaan tag <table>, <thead>, <tbody>, <th>, <tr>, dan <td>.


<table border="1">
   <thead>
   <!-- Kepala Tabel -->
   <tr>
      <th>No</th>
      <th>Name</th>
      <th>Profession</th>
   </tr>
   </thead>
   <tbody>
   <tr>
      <!-- Basis Pertama -->
      <td>1</td>
      <td>Alexander</td>
      <td>Businessman</td>
   </tr>
   <tr>
      <!-- Basis kedua -->
      <td>2</td>
      <td>Elisabelt dm</td>
      <td>Tailor</td>
   </tr>
   <tr>
      <!-- Basis ketiga -->
      <td>3</td>
      <td>Mickey </td>
      <td>Singer</td>
   </tr>
   </tbody>
</table>

Hasilnya*
No Name Profession
1 Alexander Businessman
2 Elisabelt dm Tailor
3 Mickey Singer


Keterangan*
Perhatikan pada tag <table> terdapat Atribut border="1" . Artribut border yang bernilai 1 diberikan untuk memberi garis tepi pada tabel yang berukurang 1 pixel.

Jika nilai yang terdapat pada Atribut border semakin besar, maka ukuran garis tepi pada tabel juga akan semakin besar. Sebalikanya, jika pada Artibut border tidak terdapat nilai, maka secara default tabel tidak memiliki garis tepi.

Tag miring berwarna abu-abu (<!-- Baris -->) di atas hanya komentar dan tidak akan tampil di browser


Akhir Kata


Nah, itulah di atas Tutorila Coding yang sepat saya bagikan untuk anda semoga anda sudah paham tahu cara membuat Tabel menggunakan kode HTML

Dan semoga pengetahuan anda dalam dunia pemograman semakin meningkat.

Bagaimana dengan tutorial coding di atas, mudah bukan?
Tuliskan jawaban anda pada kolom komentar di bawah.


Sekian tutorial yang sempat saya bagikan kali ini semoga bermanfaat untuk anda dan Terima kasih atas kunjungan anda ke artikel ini.

Salam Kreatif!

2 Responses to "Cara Membuat Tabel Menggunakan kode HTML [Tabel Part-1]"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel