Tabel adalah tampilan berupa baris dan kolom yang menampilkan informasi dengan struktur data tertentu. Contoh penggunaan tabel adalah saat ingin menampilkan laporan atau data yang memiliki beberapa heading, misalnya laporan penjualan, data siswa dan sebagainya. Tampilan berupa tabel sering kita jumpai pada laporan dengan format word atau spreadsheet.
Tampilan berupa tabel juga dibutuhkan saat kita membuat blog. Seperti saat saya membuat artikel sebelumnya tentang perbedaan pos dan page, saya menampilkan daftar beda dalam bentuk tabel agar mudah dibandingkan. Sayangnya, untuk menampilkan tabel pada Blogger/Blogspot agak sulit karena pada editor teks tidak disediakan tool untuk membuat tabel. Lebih jelas bisa dilihat pada screenshot tool teks editor Blogger berikut ini.
 |
| Tool pada Editor teks Blogger |
Lalu bagaimana cara menampilkan tabel pada Blogger/Blogspot?
Untuk menampilkan tabel pada Blogger/Blogspot kita bisa masuk ke mode edit HTML lalu taruh saja kode script HTML untuk membuat tabel. Jika kita mengenal sedikit kode HTML tentu hal ini tidak jadi masalah. Kita bisa membuat tabel dengan menggunakan kode HTML dengan tag <table>...</table>.Namun bagi yang belum tahu HTML jangan khawatir karena dibawah akan saya jelaskan juga tentang sedikit kode HTML untuk membuat tabel.
Berikut ini penjelasan step by step menampilkan tabel pada halaman Blogger/Blogspot :
- Pastikan sudah masuk Editor Teks untuk membuat Entri baru atau Laman Baru.
- Klik tombol HTML yang ada disebelah kiri atas.
- Posisikan kursor ketik (tanda strip tegak berkedip) pada area yang akan ditempatkan tabelnya.
- Taruh kode HTML untuk membuat tabel diarea tersebut.
- Kode HTML-nya bisa dilihat pada penjelasan berikut ini.
<table border=1>Pada contoh diatas terlihat bahwa untuk membuat tabel kita menggunakan tag HTML <table> dengan akhiran </table>. Atribut border=1 digunakan untuk menampilkan garis batas pada tabel yang biasa disebut border. Setiap baris tabel ditandai dengan awalah kode <tr> dan akhiran kode </tr>. Kemudian setiap kolom ditandari dengan awalan kode <td> dan akhiran kode </td>. Judul kolom dibuat dengan awalah kode <th> dan akhiran </th>.
<tbody>
<tr>
<th>Judul Kolom 1</th>
<th>Judul Kolom 2</th>
<th>Judul Kolom 3</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</tbody>
</table>
Kode diatas akan menampilkan tabel seperti berikut ini:
| Judul Kolom 1 | Judul Kolom 2 | Judul Kolom 3 |
|---|---|---|
| Baris 1, Kolom 1 | Baris 1, Kolom 2 | Baris 1, Kolom 3 |
| Baris 2, Kolom 1 | Baris 2, Kolom 2 | Baris 2, Kolom 3 |
| Baris 3, Kolom 1 | Baris 3, Kolom 2 | Baris 3, Kolom 3 |
Tabel diatas menampilkan empat baris, dimana satu baris merupakan judul kolom/tabel heading sedangkan tiga baris berupa data. Untuk menambahkan baris baru kita bisa kopi saja kode diantara tag <tr> dan </tr> yang berisi kode <td> karena jika yang berisi kode <th> berarti kita membuat tabel heading baru.
Untuk membuat style garis border agar tidak terlihat lepas antar cell-nya (cell adalah setiap bidang kotak pada tabel yang dibentuk oleh garis vertikal dan horisontal), kita bisa menambahkan beberapa artibut pada tabel seperti berikut ini :
<table border="1" bordercolor="#C0C0C0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;">
Kemudian untuk membuat judul menjadi rata tengah bisa kita tambahkan atribut align="center" pada tag <tr> paling atas menjadi <tr align="center">.
Kode HTML untuk membuat tabel setelah dimasukkan modifikasi diatas:
<table border="1" bordercolor="#C0C0C0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;">Dan berikut ini tampilan tabel setelah di ganti dengan kode diatas :
<tbody>
<tr>
<th>Judul Kolom 1</th>
<th>Judul Kolom 2</th>
<th>Judul Kolom 3</th>
</tr>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
<tr>
<td>Baris 3, Kolom 1</td>
<td>Baris 3, Kolom 2</td>
<td>Baris 3, Kolom 3</td>
</tr>
</tbody>
</table>
| Judul Kolom 1 | Judul Kolom 2 | Judul Kolom 3 |
|---|---|---|
| Baris 1, Kolom 1 | Baris 1, Kolom 2 | Baris 1, Kolom 3 |
| Baris 2, Kolom 1 | Baris 2, Kolom 2 | Baris 2, Kolom 3 |
| Baris 3, Kolom 1 | Baris 3, Kolom 2 | Baris 3, Kolom 3 |
Bagaimana, mudah kan cara menampilkan tabel pada halaman blog-nya. Agak rumit memang tapi dengan beberapa kali latihan nanti juga terbiasa dengan kode-kodenya. Bagi yang ingin membuat tampilan tabel agar menjadi lebih cantik silahkan bereksperimen sendiri dengan menambahkan beberapa style.
