Table atau dalam Bahasa Indonesia disebut Tabel, merupakan cara untuk membagi suatu area ke dalam kolom dan baris. Sama halnya ketika kita bekerja dengan spreadsheet yang terdiri atas kotak-kotak cell, demikian pula dengan tabel terdiri atas kotak-kotak kecil yang dapat diberi tulisan, diberi warna, diberi border, dsb. Namun, dalam perkembangannya, table ternyata tidak hanya berfungsi untuk membuat kolom dan baris, melainkan lebih dari itu, dipergunakan untuk membentuk halaman website itu sendiri. Dengan kata lain, Table adalah salah satu cara yang dapat memudahkan kita dalam menata website ke dalam bagian-bagian yang lebih kecil. Dengan adanya table, maka pekerjaan menata halaman website menjadi sebuah pekerjaan yang mudah, bahkan menjadi menyenangkan.
Kenyataannya, kebanyakan website sekarang ini ditata dengan menggunakan pembagian area yang dikelompokkan dengan rapi. Misalnya sebagai berikut:
Bagian atas diperuntukkan bagi Header atau Kepala halaman website dan menu utama.
Bagian kiri diperuntukkan bagi Menu, Submenu, atau bagian-bagian lain yang cukup penting.
Bagian tengah diperuntukkan bagi content website, yang berisi berbagai artikel.
Bagian kanan diperuntukkan bagi hal-hal lain, seperti iklan, link, dll.
Bagian bawah diperuntukkan bagi menu dan copyright.
Pembagian area website seperti di atas sangatlah wajar dilakukan pada saat sekarang mengingat kecenderungan pemakaian monitor dan VGA Card yang berkualitas cukup baik, menghasilkan resolusi yang tajam dan dapat menampilkan ukuran panjang x lebar yang cukup besar (minimal 800 x 600 piksel) yang dapat dimanfaatkan untuk menampung semua hal tersebut di atas.
Nah, mengingat pentingnya table dalam hal pengaturan tata letak halaman website, maka kita dapat mempelajari bagaimana table bekerja dan bagaimana bekerja dengan menggunakan table.
Membuat Struktur Table
Table terbagi atas tiga bagian utama, yaitu Tag table atau <table>, Tag Table Row atau <tr>, dan Tag Table Data atau <td>. Ketiganya disusun dalam hierarki. Tag Table pada hierarki tertinggi, Table Row berada di bawahnya, dan Table Data pada hierarki di bawah Table Row, sehingga kita dapat menuliskan susunan table tersebut sebagai berikut :
<table>
<tr>
<td>ini isi table</td>
</tr>
</table> |
Hasilnya akan terlihat sebagai berikut:
Belum terlihat seperti tabel karena belum diisi dengan atribut sebagaimana lazimnya sebuah table.
Sekarang, kita tambahkan atribut border di dalamnya:
<table border="1">
<tr>
<td>ini isi table</td>
</tr>
</table> |
Table di atas sekarang diberi pembatas atau border sebesar 1 piksel.
Untuk menambahkan baris, maka kita harus menambahkan Tag <tr> sampai </tr>, sebagai berikut :
<table border="1">
<tr>
<td>ini baris pertama</td>
</tr>
<tr>
<td>ini baris kedua</td>
</tr>
<tr>
<td>ini baris ketiga</td>
</tr>
</table> |
| ini baris pertama |
| ini baris kedua |
| ini baris ketiga |
Sedangkan untuk menambahkan kolom, maka kita harus menambahkan Tag <td> sampai </td>, sebagai berikut :
<table border="1">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
<tr>
<td>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
</table> |
| baris 1 kolom 1 | baris 1 kolom 2 |
| baris 2 kolom 1 | baris 2 kolom 2 |
| baris 3 kolom 1 | baris 3 kolom 2 |
Menambahkan Heading dan Warna pada Table
Selain Tag <table>, <tr>, dan <td>, kita dapat menambahkan tag Heading atau <th> pada table. Tag ini dipergunakan sebagai kepala pada kolom ataupun baris.
Agar table bisa lebih menarik untuk dilihat, kita dapat menambahkan warna background pada Tag <table>, <tr>, <td>, maupun <th>. Contohnya adalah sebagai berikut :
<table border="1">
<tr>
<th bgcolor="royalblue">Heading 1 </th>
<th bgcolor="royalblue">Heading 2 </th>
</tr>
<tr bgcolor="lightgrey">
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
<tr bgcolor="lightgrey">
<td>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
</table> |
| Heading 1 | Heading 2 |
| baris 1 kolom 1 | baris 1 kolom 2 |
| baris 2 kolom 1 | baris 2 kolom 2 |
| baris 3 kolom 1 | baris 3 kolom 2 |
Cellpadding dan Cellspacing
Cellpadding dan Cellspacing adalah atribut pada Tag <table> yang fungsinya untuk memberi jarak pada isi table. Atribut cellspacing dipergunakan untuk memberikan jarak antar baris dan kolom :
<table border="1" cellpadding="0" cellspacing="10">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
<tr>
<td>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
</table> |
| baris 1 kolom 1 | baris 1 kolom 2 |
| baris 2 kolom 1 | baris 2 kolom 2 |
| baris 3 kolom 1 | baris 3 kolom 2 |
Sedangkan atribut cellpadding dipergunakan untuk memberi jarak antara border dengan isi sel :
<table border="1" cellpadding="0" cellspacing="10">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
<tr>
<td>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
</table> |
| baris 1 kolom 1 | baris 1 kolom 2 |
| baris 2 kolom 1 | baris 2 kolom 2 |
| baris 3 kolom 1 | baris 3 kolom 2 |
Menyatukan Kolom dan Baris pada Table
Menyatukan beberapa kolom atau baris sekaligus, lazim dilakukan untuk membentuk layout Table sesuai dengan yang diinginkan. Proses menyatukan kolom dan baris pada spreadsheet dinamakan dengan merge columns dan merge rows. Untuk mengabungkan dua kolom, digunakan atribut colspan. Beberapa Tag <td> digabungkan pada satu <td>, sebagai berikut :
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td colspan="2" bgcolor="lightgrey">baris 1 menempati 2 kolom</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
<tr>
<td>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
</table> |
| baris 1 menempati 2 kolom |
| baris 2 kolom 1 | baris 2 kolom 2 |
| baris 3 kolom 1 | baris 3 kolom 2 |
Sedangkan untuk menggabungkan baris kita dapat menambahkan tag rowspan pada Tag <td> dan menghapus beberapa <td> di bawahnya :
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td rowspan="3" bgcolor="lightgrey">kolom 1 menempati 3 baris</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 2</td>
</tr>
<tr>
<td>baris 3 kolom 2</td>
</tr>
</table> |
| kolom 1 menempati 3 baris | baris 1 kolom 2 |
| baris 2 kolom 2 |
| baris 3 kolom 2 |
Tidak ada komentar:
Posting Komentar