HTML Dasar: Tabel

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 ! ;-)
0 Comments