Kebanyakan dari kita akan menggunakan maupun melihat tabel yang menampilkan data atau informasi. Bila kalian menggunakan word, tentu saja kalian sudah mengenali istilah-istilah yang akan kita diskusikan disini:
"row" - unit garis horizontal
"column" - unit garis vertikal
"cell" - setiap unit atau data yang dipisahkan oleh garis
Mari kita ambil sebuah contoh untuk menggambarkan bagaimana kode tabel HTML bekerja dan dimana kita dapat menempatkannya.
Penempatan kode tabel
Untuk membuat tabel dalam postingan web/blog, mudahnya ketik didalam kode HTML(gambar dibawah) ketika kalian menulis postingan. Seperti dalam Blog, pilih mode "compose" ketika kita memasukkan kodenya.
Dasar Tabel
| Tinggi: | 2.2m |
| Berat: | 185kg |
Kode HTML untuk tabel diatas adalah:
<table width="200" border="1" cellspacing="2" cellpadding="2"><tbody> <tr> <td>Tinggi:</td> <td>2.2m</td> </tr> <tr> <td>Berat:</td> <td>185kg</td> </tr> </tbody> </table> |
|---|
Catatan:
Harus dimulai dengan tag <table> dan ditutup dengan tag </table>
Garis dapat diatur menjadi "0" untuk membuat agar garis tidak terlihat
Cobalah untuk menentukan lebar garis. Hal ini meningkatkan kecepatan loading halaman. Ketika kalian melihat source code (masih ingat posting lalu?), alokasi lebar postingan blog terletak dibawah #main atau #main-wrapper dan lebar tabel kalian harus lebih kecil dari itu. Apabila kita tidak menetapkan lebar tabel, secara default lebarnya akan penuh.
Cellpadding adalah jumlah ruang putih antara isi dan garis. Apabila tidak ada cellpadding, kita akan mendapatkan teks sangat dekat dengan garis. Cellpadding Dipergunakan untuk menentukan jarak antara tiap cell
Setiap row dimulai dengan tag <tr> dan diakhiri dangan tag </tr>. Sebagai contoh kita, terdiri dari 2 row, yang berwarna biru adalah row 1 dan yang merah adalah row 2.
Isi setiap row diatur oleh tag <td> (tabel data) dan diakhiri oleh tag </td>. Isi tabel data tidaklah harus selalu teks, kita dapat menyisipkan gambar, video, link, dll. Sebagai contoh, kita akan menggati "Height" dengan code “<img src="Image URL" />” untuk menyisipkan gambar. Untuk lebih lengkapnya kita akan membahasnya di hyperlink dan image link
Format Teks
Kita dapat mengganti jenis huruf yang dipergunakan, ukuran huruf dan warna dan membuat tebal (bold) atau garis miring (italic) lengkapnya lihat diposting yang lalu disini. Kita juga dapat mengatur align left, right, atau center dari cell. Kita rasa metode ini mudah untuk diterapkan tanpa harus mempelajari kode style yang rumit.
Header tabel
| S/No. | Inventory | Jml |
|---|---|---|
| 1. | Buku | 50 |
| 2. | Meja | 22 |
| 3. | Lemari | 30 |
Kode untuk tabel diatas adalah
<table border="1" cellpadding="1" cellspacing="0" width="200"><tbody> <tr> <th>S/No.</th> <th>Inventory</th> <th>Qty</th> </tr> <tr> <td>1.</td> <td>Buku</td> <td>50</td> </tr> <tr> <td>2.</td> <td>Meja</td> <td>22</td> </tr> <tr> <td>3.</td> <td>Lemari</td> <td>30</td> </tr> </tbody> </table> |
|---|
Catatan:
- Tag <th> digunakan untuk menandakan konten (isi) sebagai header dan teks akan otomasi tebal (bold) untuk membedakannya dengan isi yang lain.
Row Span and Column Span
Kadangkala, kalian ingin untuk menggabung (merge) beberapa cell, untuk itu cell span row atau column seperti ini:
| Menu | ||
| Pembuka | Salad | Rp. 5000 |
| Sup | Rp. 7000 | |
| Utama | Ikan | Rp. 10.000 |
| Ayam | Rp. 13.000 | |
| Udang | Rp. 15.000 | |
Kode untuk tabel diatas adalah:
<table border="1" cellpadding="0" cellspacing="0" width="300"><tbody> <tr> <td colspan="3">Menu</td> </tr> <tr> <td rowspan="2">Pembuka</td> <td>Salad</td> <td>Rp. 5000 </td> </tr> <tr> <td>Sup</td> <td>Rp. 7000 </td> </tr>> <tr> <td rowspan="3">Utama</td> <td>Ikan</td> <td>Rp. 10.000 </td> </tr> <tr> <td>Ayam</td> <td>Rp. 13.000 </td> </tr> <tr> <td>Udang</td> <td>Rp. 15.000 </td> </tr> </tbody> </table> |
|---|
Catatan:
- Untuk row paling atas kita merge 3 kolom dan dinamakan "Menu". Pada tag <td>, kita sisipkan colspan="3" untuk menandakan bahwa kata tersebut me-span 3 kolom.
- Pada kolom kiri, kata "Pembuka" me-span 2 row, kita sisipkan rowspan="2" kedalam tag <td>.
- Sama saja, kata "Main" me-span 3 row, sisipkan rowspan="3" ke tag <td>.
Warna garis, Warna Latar, Gambar Latar
Mari kita sisipkan beberapa warna dalam tabel kita.
| Musik | Video |
| Game |  |
Kode untuk tabel diatas adalah:
<table border="1" bordercolor="#ff3366" cellpadding="0" cellspacing="0" width="200"> <tbody> <tr> <td bgcolor="#33ffcc">Musi</td> <td background="http://www.blogpulp.com/imagehost/images/381245101.jpg">Video</td> </tr> <tr> <td bgcolor="#ff66cc">Game</td> <td><img src="http://www.blogpulp.com/imagehost/images/236728310.jpg" /></td> </tr> </tbody> </table> |
|---|
Catatan:
- Kita telah menambahkan warna garis ke tabel. Coba lihat kembali kode warna untuk memilih warna lainnya.
- Untuk menambahkan warna latar ke cell, sisipkan subfungsi "bgcolor"
- Kalian dapat membuat latar gambar selain warna seperti pada cell "Video". Upload gambar ke image server dan sisipkan link gambar tersebut.
- Pada cell kanan bawah, kita menyisipkan gambar, bukan teks, untuk menunjukkan bagaimana gambar dapat disisipkan ke dalam tabel.
Kita akhiri tutorial kali ini dengan metode alternatif untuk menyisipkan tabel ke dalam posting. Seperti yang telah saya paparkan sebelumnya, bahwa menggunakan program bantuan seperti Dreamweaver atau frontpage ataupun word kita dapat membuat tabel lebih mudah, tanpa harus mengerti bahasa HTML yang cukup memusingkan. Atur formatnya, masukkan isi tabel dan bila selesai, copy tabel tersebut dan paste di posting kita (tentu saja kedalam kode HTML/compose pada blog).
Apabila kalian melihat psoting dalam HTML mode, kalian dapat melihat kode tabel sama seperti yang kita diskusikan diatas.
