Cara Membuat Tabel dengan Kode HTML - Part 1

Get Link | Click 2X

Apakah Anda ingin menyajikan sebuat data di blog atau pada sebuah dokumen HTML dalam bentuk tabel? Tabel adalah susunan baris dan kolom yang digunakan untuk mengatur dan menempatkan data secara terstuktur.

Nah tabel sering kita jumpai pada sebuah dokumen baik itu berwujud kertas atau bukan. Tabel tidak hanya dapat dapat dibuat dengan mengunakan sebuah alat ketik seperti Microsoft Word yang tidak perlu menggunakan sebuah kode untuk membuatnya tapi, tabel juga bisa dibuat dengan menggunakan bahasa markup, yaitu susunan kode atau script HTML.

Sebelum berlanjuk ke langkah cara pembuatan, ada beberapa tag HTML yang umumnya digunakan oleh progarmmer dalam membuat sebuah tabel. Nah apasajakah tag HTML tersebut? Berikut beberapa tag umum untuk membuat tabel beserta penjelasannya.

Tag Umum yang Perlu Dikuasai Dalam Membuat Tabel

Seperti yang telah saya terangkan diatas bahwa, dalam membuat sebuah tabel ada beberapa tag HTML umumnya digunakan untuk membuat tabel. Nah berikut beberapa tag umum yang digunakan untuk membuat tabel beserta penjelasannya.

• 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>

Nah itulah enam tag HTML yang umumnya digunakan untuk membuat sebuah tabel yang utuh. Keenam tag diatas harus sobat pahami atau sobat bisa mecatatnya di notepad. Oke setelah mengenal enam tag di atas selanjutkan mari kita melangkah ke cara penggunaan tag nya.

Cara Membuat Tabel dengan Kode HTML

Untuk membuat sebuah tabel sangatlah mudah namun, buat sobat yang masih baru belajar membuat tabel dengan kode HTML mungkin akan membutukan waktu yang agak lambat dalam penulisan kodenya.

Jika sudah tidak sabar seperti apa caranya. Silahkan sobat simak dengan teliti cara penggunaan enam tag diatas untuk membuat tabel berikut ini.

<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>

Nah hasil dari susunan kode di atas kurang lebih seperti tabel di bawah ini.

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

Info
Coba sobat perhatikan, pada tag terdapat satu atribut border="1". Nah atribut tersebut fungsinya untuk memberi ketebalan pada setiap garis tabel.

Jika nilai yang diberikan pada atribut adalah 1 dan di akhir nilai 1 tidak disebutkan satuannya, maka seluruh garis tepi tabel akan berukuran pixel. Misalnya, border="1" sama dengan border="1px" (1pixel). Jika sobat ingin menambah ukuran ketebalan garis tepi tabel, sobat tinggal mengganti nilai atribut border="1" dengan nilai nominal yang lebih tinggi seperti border="5" dan seterusnya.

Tag <!-- --> (berwarna abu-abu) pada script diatas hanyalah komentar dan tidak akan tampil di browser.

Contoh tabel dengan artibut border="2" pixel.

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

Nah begitulah cara penggunaan enam tag umum yang biasa digunakan untuk membuat tabel. Bagaiman mudah bukan?

Saran saya, alangkah baikanya jika sobat rutin latihan membuat sebuah tabel dengan kode HTML agar nantinya sobat akan lebih mudah dalam membuat tabel yang lebih besar dan lebih banyak kolomnya.

Artikel Terkait

• Cara Mengubah Background di Tabel HTML - Tutorial Tabel Part 2

Oke saya rasa cukup sekian dulu artikel kali ini terima kasih atas kunjungannya, semoga apa yang saya bagikan untuk sobat kali ini akan bermanfaat untuk sobat dan banyak orang yang ingin mengenal dunia coding secara sedikit demi sedikit dan nantikan part-part selanjutnya dari jalur super. Saya feri irawan, Salam Anak Bangsa!

Go to Link

Feri irawan

Blogger asal Sulawesi Selatan yang jarang posting artikel.

Share this post