Ada banyak cara untuk menampilkan informasi melalui dokumen html di aplikasi browser, salah satunya menampilkan data dengan tabel.
Ada 10 element pembentuk sebuah tabel di html antara lain sebagai berikut:
Element tag <table>
Element ini adalah element utama untuk membuat sebuah tabel. tag tabel yang akan menampung keseluruhan data mulai dari element pendukung dan data yang akan di tampilkan di dalam tabel.
Element tag <caption>
tag caption berfungsi sebagai tempat untuk memberi keterangan terhadap isi yang di muat dalam tabel. tag ini biasanya di tulis di dalam setelah tag pembuka <table>.
Contoh tag <caption>
<table>
<caption>keterangan tabel</caption>
<table>
Element tag <thead>
Element ini berfungsi sebagai pembungkus kepala tabel, biasanya berisi tentang judul sebuah tabel.
Contoh tag <thead>
<table>
<caption>keterangan tabel</caption>
<thead>..</thead>
<table>
Element tag <tr>
Element tr (table row) di gunaka untuk membuat baris pada tabel.
contoh tag <tr>
<table>
<caption>keterangan tabel</caption>
<thead>
<tr>..</tr>
</thead>
<table>
Element tag <th>
Element ini berfungsi sebagai tempat untuk menampung judul baris atau kolom. tag ini bisa di tempatkan di dalam tag <thead>.
view yang di hasilkan oleh tag ini defaultnya text di tengah dan di cetak tebal.
Contoh tag <th>
<table>
<caption>keterangan tabel</caption>
<thead>
<tr>
<th>judul1 colom1</th> <th>judul2 colom2</th>
</thead>
<table>
Element tag <tbody>
Element ini mendefinisikan tubuh dari sebuah tabel yang berisi data utama dalam tabel. penempatan element
ini biasanya setelah tag penutup </thead>.
Contoh tag <tbody>
<table>
<caption>keterangan tabel</caption>
<thead>
<tr>
<th>judul1 colom1</th> <th>judul2 colom2</th>
</thead>
<tbody>...</tbody>
<table>
Element tag <td>
Tag ini memiliki fungsi yang sama seperti tag <th> namaun terdapat perbedaan di sisi viewnya. view dari tag ini, data akan di tampilkan rata kiri dan ukuran teks standar.
Tag ini akan sering kita gunakan untuk menampung content utama dari sebuah tabel. tag ini biasanya di tempatkan dalam tag <tbody>.
Contoh tag <td>
<table>
<caption>keterangan tabel</caption>
<thead>
<tr>
<th>col1,row1</th> <th>col2,row1</th>
</tr>
</thead>
<tbody>
<tr>
<td>col1,row2</td> <td>col2,row2</td>
</tr>
<tr>
<td>col1,row3</td> <td>col2,row3</td>
</tr>
<tr>
<td>col1,row4</td> <td>col2,row4</td>
</tr>
</tbody>
<table>
Jika di jalankan di web browser table kita akan tampil seperti di bawah ini:
Preview
keterangan tabel
| col1,row1 | col2,row1 |
| col1,row2 | col2,row2 |
| col1,row3 | col2,row3 |
| col1,row4 | col2,row4 |
Sampai di sini tabel kita masih belum memiliki garis pembatas. tambahakan atribut border="1" di tag table. contohnya <table border="1"> dan jika di jalankan di web browser maka penampakan tabel kita akan seperti di bawah ini:
Preview
keterangan tabel
| col1,row1 | col2,row1 |
| col1,row2 | col2,row2 |
| col1,row3 | col2,row3 |
| col1,row4 | col2,row4 |
Secara default element tanble tidak akan memberika nilai border pada penampilan tabelnya,
kita perlu menambahkan atribut border=".." sendiri untuk mengintruksikan kepada web browser untuk menampilkan border. banyak atribut untuk tabel yang akan kita bahas di artikel selanjutnya.
Element tag <tfoot>
Element tfoot (table footer) berfungsi sebagai pembungkus kolom dan baris tabel di bagian kaki tabel. tag tfoot sangat jarang sekali di gunakan, namun
tidak ada salahnya jika kita mencoba menerapakan element tfoot pada tabel kita sebagai pembelajaran.
Contoh tag <tfoot>
<table>
<caption>keterangan tabel</caption>
<thead>
<tr>
<th>col1,row1</th> <th>col2,row1</th>
</tr>
</thead>
<tbody>
<tr>
<td>col1,row2</td> <td>col2,row2</td>
</tr>
<tr>
<td>col1,row3</td> <td>col2,row3</td>
</tr>
<tr>
<td>col1,row4</td> <td>col2,row4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>col1,row5</td> <td>col2,row5</td>
</tr>
</tfoot>
</table>
Sekarang tabel kita sudah memiliki struktur yang lengkap, ada kepala tabel thead, tubuh tabel tbody dan kaki tabel tfoot.
Element tag <colgroup> dan <col/>
Element berguna untuk mengelompokkan tiap-tiap data dalam kolom menjadi satu dan dapat di modifikasi secara bersamaan.
Satu kolom akan di wakilkan kepada satu element dengan tag <col>.
Contoh tag <colgroup> dan tag <col/>
<table>
<colgroup>
<col/>
<col/>
</colgroup>
<caption>keterangan tabel</caption>
<thead>
<tr>
<th>col1,row1</th> <th>col2,row1</th>
</tr>
</thead>
<tbody>
<tr>
<td>col1,row2</td> <td>col2,row2</td>
</tr>
<tr>
<td>col1,row3</td> <td>col2,row3</td>
</tr>
<tr>
<td>col1,row4</td> <td>col2,row4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>col1,row5</td> <td>col2,row5</td>
</tr>
</tfoot>
</table>
Contoh di atas kita mempunyai dua kolom. dan setiap kolom telah kita wakilkan kepada element <col/> dengan bantuan colgroup. dengan begini kita dapat memanipulasi kolom kita tanpa harus memodifikasi satu persatu element yang ada, kita cukup memberi perintah kepada element <col/> yang sudah kita buat. contoh:
contoh tag <colgroup> dan tag <col/>
<table border="1">
<colgroup>
<col style="background: cyan;"/>
<col style="background: red;"/>
</colgroup>
<caption>keterangan tabel</caption>
<thead>
<tr>
<th>col1,row1</th> <th>col2,row1</th>
</tr>
</thead>
<tbody>
<tr>
<td>col1,row2</td> <td>col2,row2</td>
</tr>
<tr>
<td>col1,row3</td> <td>col2,row3</td>
</tr>
<tr>
<td>col1,row4</td> <td>col2,row4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>col1,row5</td> <td>col2,row5</td>
</tr>
</tfoot>
</table>
Maka hasilnya akan seperti di bawah ini:
Preview
keterangan tabel
| col1,row1 | col2,row1 |
| col1,row2 | col2,row2 |
| col1,row3 | col2,row3 |
| col1,row4 | col2,row4 |
| col1,row5 | col2,row5 |
Sebenarnya untuk membuat tabel di html, kita cukup menghafal empat tag element table yang paling sering di gunakan, yakni tag <table>, <tr>, <th> dan tag <td>. dengan empat tag ini saja, table kita sudah bisa di gunakan dan di tampilkan dengan baik.
Contoh struktur tabel sederhana di html sebagai berikut:
Contoh tag <colgroup> dan tag <col/>
<table border="1">
<tr>
<th>nama</th> <th>alamat</th>
</tr>
<tr>
<td>zenv</td> <td>jember</td>
</tr>
<tr>
<td>nike</td> <td>jonggol</td>
</tr>
<tr>
<td>alfarizy</td> <td>jonggol</td>
</tr>
</table>
Maka hasilnya akan seperti di bawah ini:
Preview
| nama | alamat |
| zenv | jember |
| nike | jonggol |
| alfarizy | jonggol |
Ada dua atribut tag table yang fungsinya cukup penting dan berguna untuk mengelola struktur tabel, yakni atribut colspan dan rowspan. keterangan fungsi ke dua atribut sebagai berikut:
Atribut element table colspan
Atribut colspan di gunakan untuk memperlebar element th atau td ke kanan. lebar baris tergantung dari value yang di definisikan.
Contoh penggunaan atribut colspan sebagai berikut:
Contoh atribut rowspan
<table border="1">
<tr>
<th rowspan="2">developers</th>
<tr>
<tr>
<th>nama</th> <th>alamat</th>
</tr>
<tr>
<td>zenv</td> <td>jember</td>
</tr>
<tr>
<td>nike</td> <td>jonggol</td>
</tr>
<tr>
<td>alfarizy</td> <td>jonggol</td>
</tr>
</table>
Preview
| developers |
| nama | alamat |
| zenv | jember |
| nike | jonggol |
| alfarizy | jonggol |
Contoh di atas, element th pertama dengan teks developers memiliki atribut colspan="2" yang artinya baris th akan di tarik ke kana sebanyak dua kolom.
Atribut element table rowspan
Atribut rowspan sama dengan atribut colspan yakni memperluas janngkauan element th dan elemen td. jika di colspan element di tarik dari kiri ke kana, sedangkkan untuk atribut rowspan menarik element dari atas ke bawah sebanyak value yang di tentukan di atributnya.
Contoh penggunaan atribut row span sebagai berikut:
Contoh atribut rowspan
<table border="1">
<tr>
<th rowspan="5">developers</th>
<tr>
<tr>
<th>nama</th> <th>alamat</th>
</tr>
<tr>
<td>zenv</td> <td>jember</td>
</tr>
<tr>
<td>nike</td> <td>jonggol</td>
</tr>
<tr>
<td>alfarizy</td> <td>jonggol</td>
</tr>
</table>
Preview
| developers |
| nama | alamat |
| zenv | jember |
| nike | jonggol |
| alfarizy | jonggol |
contoh di atas, element th pertama dengan teks developers memiliki atribut colspan="5" yang artinya baris th akan di tarik ke bawah sebanyak lima baris termasuk elementnnya sendiri.
Banyak yang beranggapan bahawa colspan dan rowspan fungsinya adalam menggabungkan colom atau baris. namun sebenarnya
pernyataan seperti itu tidaklah sesuai. karena dalam html, tidak ada konsep yang dapat di gunakan dalam menyatukan dua element secara langsung, meskipun kita menempatkan element di dalam element
yang akhirnya kedua element tersebut akan tetap terpisah.
Bukti jika rowspan dan colspan bukan konsep untuk menyatukan row atau colom:
Contoh
<table border="1">
<tr>
<th rowspan="5">developers</th>
<th rowspan="5">tes</th>
<tr>
<tr>
<th>nama</th> <th>alamat</th>
</tr>
<tr>
<td>zenv</td> <td>jember</td>
</tr>
<tr>
<td>nike</td> <td>jonggol</td>
</tr>
<tr>
<td>alfarizy</td> <td>jonggol</td>
</tr>
</table>
Preview
| developers |
tes |
| nama | alamat |
| zenv | jember |
| nike | jonggol |
| alfarizy | jonggol |
Contoh di atas kita menambahkan satu element <th>. karena element th dengan teks tes merupakan satu baris dengan element th yang memiliki atribut colspan, maka element baru tersebut akan di geser lebih ke kanan oleh efek colspan.