Apa yang terlintas dibenak kalian ketika mendengar kata "Tabel" (table)?

Tentu secara otomatis akan mengingat kolom dan baris yang disusun untuk kegunaan kerja tertentu. Tabel bagi sebagian kita identik dibuat menggunakan Ms.Word maupun Ms.Excel. Kali ini kita pelajari bagaimana membuat sebuah tabel dalam HTML atau dikenal dengan tag <table>. Sebelum kita mempelajari lebih jauh tentang tabel alangkah baiknya untuk mengetahui struktur dari sebuah tabel.

Baris = berjajar secara horizontal, kolom = berjajar secara vertical, dan cell/data = perpotongan antara baris dan kolom.

Mari kita implementasikan dalam tag <table> dalam dokumen HTML:

#Tabel Sederhana

Untuk membuat tabel sederhana, pertama kenali dulu istilah-istilah dalam tabel. Baris (<tr>=table row) berada dalam tabel, Kolom (<td> = table data) berada dalam baris. Contoh struktur tabel:  

<table>
   <tr>
     	<td>baris 1, kolom 1</td>
	<td>baris 1, kolom 2</td>
   </tr>
   <tr>
  	<td>baris 1, kolom 1</td>
	<td>baris 1, kolom 2</td>
   </tr>
</table>

#Tabel Kompleks

Tabel yang memiliki banyak struktur (kompleks) dalam tabel terbagi kedalam head dan body. Tabel header <thead> untuk menyimpan data head pada tabel, begitupun tabel body <tbody> untuk menyimpan data body pada tabel. Persamaan keduanya terletak pada penggunaan tag <tr> dan <th> untuk membuat baris, sedangkan perbedaanya ada pada body yang menggunakan <td> untuk menampilkan cell/data pada tabel. Struktur kompleks berikut:

 <table>
   <thead>
      <tr>
        <th></th>
        <th>kolom 1</th>
        <th>kolom 2</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <th>baris 1</th>
     	<td>baris 1, kolom 1</td>
	<td>baris 1, kolom 2</td>
      </tr>
      <tr>
        <th>baris 2</>
  	<td>baris 1, kolom 1</td>
	<td>baris 1, kolom 2</td>
      </tr>
    </tbody>
</table>

Hasil dari dokumen tabel kompleks tersebut menampilkan tabel dengan header dua sumbu. Lalu bagaimana cara untuk menghias tabel yang telah kita buat agar tidak melulu polosan. Bisa kita gunakan atribut-atribut untuk tabel misal: border, cellspacing, cellpadding, colspan, dan rowspan. Border digunakan untuk menambahkan garis/border di sekitar cell, cellspacing untuk menambah jarak antar cell, cellpadding untuk memberi luas pada sekitar cell. Colspan dan rowspan digunakan untuk melakukan merging atau menggabungkan dua cell pada tabel. Colspan digunakan untuk menggabungkan dua buah cell yang horizontal (kolom), dan rowspan  digunakan untuk menggabungkan dua buah cell yang vertikal (baris). Berikut contoh struktur tabel lengkapnya:

<!-- Penerapan atribut: border, cellspacing, cellpadding -->
<table border="1" cellspacing="0" cellpadding="5">
   <tr>
     	<td>1,1</td>
	<td>1,2</td>
     	<td>1,3</td>
   </tr>
   <tr>
  	<td>2,1</td>
	<td>2,2</td>
 	<td>2,3</td>
   </tr>
   <tr>
  	<td>3,1</td>
	<td>3,2</td>
 	<td>3,3</td>
   </tr>
</table>

<!-- Penerapan atribut: border, cellspacing, cellpadding, colspan, rowspan -->
<table border="1" cellspacing="0" cellpadding="5">
   <tr>
     	<td rowspan="3">rowspan 3</td>
	<td colspan="2">colspan 2</td>
   </tr>
   <tr>
	<td>2,2</td>
 	<td>2,3</td>
   </tr>
   <tr>
	<td>3,2</td>
 	<td>3,3</td>
   </tr>
</table>

Hasil dari contoh-contoh tersebut tentu masih sangat sederhana. Kalian bisa eksplorasi lebih jauh lagi dengan mencoba menggabungkan cell/data pada posisi tertentu dengan atribut yang ada. Untuk seri yang lebih keren, tentu tabel dapat kita modifikasi dengan bantuan CSS. Ditunggu aja seri CSS nya gak lama lagi kok. Ok, selamat belajar dan tetap semangat ! ;-)