Tutorial HTML: Memahami Pembentukan Tabel

Di matematika kita mempelajari tabel sebagai wadah informasi yang terdiri dari baris dan kolom. Tabel ini dibentuk dengan komposisi dasar judul tabel, judul kolom, baris dan kolom. Bagaimana dengan HTML dan bagaimana pendefenisiannya.

Apa itu Tabel

Tabel pada HTML sesuai dengan penjelasan singkat diatas, ada judul, judul kolom, baris, kolom, beserta isinya. Sementara untuk pendefinisan dalam HTML, kita memakai tag <table>.

Tabel yang terdiri dari baris didefenisikan dengan tag <tr> dan tag <td> untuk setiap barisnya. Dan khusus untuk header tabel atau judul dari isi tabel, kita pakai <th>. Khusus untuk tabel header atau <th> akan dicetak tebal dan diposisikan ditengah.

<table>
 <tr>
  <th>No</th>
  <th>Provinsi</th>
  <th>Ibukota</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Sumatera Utara</td>
  <td>Medan</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Sumatera Selatan</td>
  <td>Palembang</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Sulawesi Selatan</td>
  <td>Makassar</td>
 </tr>
</table>

HTML Dasar : Tabel

Grup Pada Tabel

Bukan hal yang terlalu signifikan, tapi pendefenisian ini bisa sangat bermanfaat bagi kita. Apalagi untuk memebedakan setiap elemen dari tabel. Sistem grup ini akan memudahkan dalam penyajian data.

Grup pada tabel ada 3, tabel header dengan <thead>, tabel body dengan <tbody> dan tabel footer dengan <tfoot>. Seharusnya kita sudah mengerti apa fungsi dari ketiganya.

Yaa, untuk table header di gunakan untuk membedakan bagian table header, tabel body untuk bagian isi atau konten utama, sedangkan bagian tabel footer untuk mendefinisikan bagian paling bawah atau kaki dari tabel.

<table>
 <thead>
  <tr>
   <th>No</th>
   <th>Provinsi</th>
   <th>Ibukota</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>Jawa Timur</td>
   <td>Surabaya</td>
  </tr>
  <tr>
   <td>2</td>
   <td>Riau</td>
   <td>Pekanbaru</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td></td>
   <td></td>
   <td>Total : 2</td>
  </tr>
 </tfoot>
</table>

HTML Dasar : Tabel Grup

Ingat: Msekipun pendefenisian didahului oleh tabel footer dari pada tabel body, hasil akan dianggap sama aja, posisi tabel footer tetap dibawah, begitu juga sebaliknya.

Menambahkan Caption dan Pembatas

Jika kita perhatikan hasilnya tidak terlalu memuaskan. Data diatas masih sangat sedikit, bagiamana kalau ada banyak data ? Hasil yang rapat dan tanpa ada pembatas disetiap sisi membuatnya sulit untuk dibaca.

<table style="border-collapse: collapse; width:100%" border="1">
 <caption>Data Ibukota Provinsi Di Indonesia</caption>
 <thead>
  <tr>
   <th>No</th>
   <th>Provinsi</th>
   <th>Ibukota</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>Jawa Timur</td>
   <td>Surabaya</td>
  </tr>
  <tr>
   <td>2</td>
   <td>Riau</td>
   <td>Pekanbaru</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td></td>
   <td></td>
   <td>Total : 2</td>
  </tr>
 </tfoot>
</table>

HTML Dasar : Tabel 2

Jika kita perhatikan kode diatas, ada beberapa tambahan. Ada tag <caption> dan beberapa atribut.

<caption>Data Ibukota Provinsi Di Indonesia</caption>

Bagian caption didefenisikan sebagai bagian judul utama dari tabel. Menjelaskan secara singkat guna tabel.

<table style="border-collapse: collapse; width:100%" border="1">...</table>

Pada bagian-bagian sebelumnya kita telah membahas bagian atribut (silahkan dicari bagi yang belum faham). Untuk style, merupakan atribut penunjang desain tampilan yang biasanya diikuti kode CSS. Dan atribut border merupakan atribut dari tabel sebagai pemberi garis tepi pada tabel.

Menggabungkan Baris atau Kolom Pada Tabel

Jika kamu perhatikan hasilnya, tepatnya pada bagian tabel footer ada dua kolom kosong, dan sangat kurang efektif jika kita menyajikan data seperti itu. Nah, muncul ide, bagaimana kalau itu disatukan saja…

Dalam penyatuannya sendiri, kita kenal atribut rowspan untuk baris dan colspan untuk kolom. Masih ingat, baris di defenisikan dengan <tr> dan kolom oleh <td>. Nah, masing-masing atribut didefenisikan sesuai pasangannya.

Contoh: -menyatukan bagian footer sehinggan haya tinggal satu kolom.

<table style="border-collapse: collapse; width:100%" border="1">
 <caption>Data Ibukota Provinsi Di Indonesia</caption>
 <thead>
  <tr>
   <th>No</th>
   <th>Provinsi</th>
   <th>Ibukota</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>DKI Jakarta</td>
   <td>Jakarta</td>
  </tr>
  <tr>
   <td>2</td>
   <td>Kalimantan Barat</td>
   <td>Pontianak</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td colspan="3">Total : 2</td>
  </tr>
 </tfoot>
</table>

HTML Dasar : Tabel 4

Lihat perbedaannya ? Mari kita cek.
Pertama lihat pada tabel footer (<tfoot>), tepatnya pada <td>, hanya ada satu pendefenisian <td> bukan, tapi kok bisa menutupi semuanya ya ? Nah, disnilah fungsi atribut colspan, menyatukan beberapa kolom, sementara untuk nilai colspannya bisa ditaksir berapa kolom yang ingin kita satukan. Coba rubah angkanya. Lihat perbedaannya ?

Bagaiman untuk menyatukan baris, saya pikir sampai disini harusnya anda sudah bisa mengasah otak anda sendiri. Jika belum silahkan berkomentar, atau tanya saja google yang super pintar…

Kesimpulan

Saya pikir untuk tabel bisa difahami dengan mudah, karena tidak jauh berbeda dengan dunia nyata. Anda mempelajari banayk hal hari ini, mulai dari pendefenisian tabel di HTML, melakukan grouping tabel, menambah atribut dan caption hingga menyatukan baris dan kolom. Tapi, bukan tidak hanya itu silahkan eksplor ilmu mu dan silahkan melakukan eksperimen lainnya.

Terima Kasih

Azhari Sikumbang

Tulis dan bicarakan, agar lebih berguna. (Github | Linked in)
~ azhari@coretanit.com