Tabel pada blog merupakan pelengkap sebuah artikel. Biasanya tabel terdiri atas beberapa kolom dan baris. Banyaknya kolom dan baris tentu tergantung keperluan kita. Yang penting kita tahu istilah-istilah tabel. Nah ini ada script pembuatan tabel secara sederhana. Kamu bisa modifikasi sendiri.
Nih kode-kode htmlnya, kamu harus ganti kata-katanya sesuai keinginan ya!
TABEL SATU KOLOM<table border="1"><tr><td>satu kolom</td></tr></table>Nanti hasilnya begini:TABEL DUA KOLOM<table border="2"><tr><td>Kolom pertama</td><td>Kolom kedua</td></tr></table>Nanti hasilnya begini:Catatan: Untuk Wordpress, cukup dibuat seperti di atas. Namun untuk Blogspot, kode-kode html tersebut harus dirapatkan ke kanan dengan tombol backspace. Jika tidak dirapatkan hasilnya akan jauh dari judul, seperti contoh di atas. Berikut ini adalah tabel yang benar. Angka pada border bisa diganti, misalnya 3, 4, dst.
<table border="2"><tr><td>Kolom pertama</td> <td>Kolom kedua</td></tr></table>TABEL DUA KOLOM DAN DUA BARIS<table border="1"><tr><td>Satu</td><td>Dua</td></tr><tr><td>Tiga</td><td>Empat</td></tr></table>Nanti hasilnya begini:TABEL 2 KOLOM DAN 3 BARIS<table border="1"><tr><th>Nama</th><th>Alamat Sekolah</th></tr><tr><td>Amat</td><td>Jalan Rusa No. 1</td></tr><tr><td>Amit</td><td>Jalan Badak No. 2</td></tr></table>Nanti hasilnya begini:| Nama | Alamat Sekolah |
|---|
| Amat | Jalan Rusa No. 1 |
| Amit | Jalan Badak No. 2 |
TABEL CAMPURAN
<span style="color: rgb(255, 0, 0);"><table border="1" cellpadding="5" cellspacing="5" width="100%"></span><span style="color: rgb(255, 0, 0);"><tr></span><span style="color: rgb(255, 0, 0);"><th rowspan="2"><span style="color: rgb(0, 0, 0);">Table header</span></th><td><span style="color: rgb(0, 0, 0);">Table cell 1</span></span><span style="color: rgb(255, 0, 0);"></tr></span><span style="color: rgb(255, 0, 0);"><tr></span><span style="color: rgb(255, 0, 0);"><td><span style="color: rgb(0, 0, 0);">Table cell 2</span></td></span><span style="color: rgb(255, 0, 0);"></tr></span><span style="color: rgb(255, 0, 0);"></table></span>Nanti hasilnya begini:| Table header | Table cell 1 |
|---|
| Table cell 2 |
ADA BAGIAN TABEL YANG KOSONG
<TABLE BORDER=2><TR> <TD> </TD> <TH>10 am - noon</TH> <TH>noon - 2 pm</TH> <TH>2 pm - 4 pm</TH> </TR><TR> <TH>Monday</TH> <TD>Home Ec</TD> <TD>Math</TD> <TD>Geography</TD><TR> <TH>Wednesday</TH> <TD>History</TD> <TD>Social Studies</TD> <TD>P.E.</TD><TR> <TH>Friday</TH> <TD>Music</TD> <TD>Peace Studies</TD> <TD>Sleep</TD></TABLE>Nanti hasilnya begini:
| 10 am - noon | noon - 2 pm | 2 pm - 4 pm |
| Monday | Home Ec | Math | Geography |
| Wednesday | History | Social Studies | P.E. |
| Friday | Music | Peace Studies | Sleep |
Istilah pada tabel:Sebuah elemen TABLE, juga berisi beberapa elemen yaitu CAPTION, elemen TH (table header), elemen TR (table row), serta elemen TD (table data). Ada lagi neh, istilah2 untuk tabel, mohon diperhatikan:
- bgcolor - atribut untuk menentukan warna latar belakang
- background - atribut untuk menentukan gambar yang akan menjadi latar belakang tabel/kolom
- width - atribut untuk menentukan lebar
- height - atribut untuk menentukan tinggi
- align - mengatur perataan horizontal
- valign - mengatur perataan vertikal
- border - atribut untuk menentukan lebar bingkai tabel
- cellspacing - atribut untuk menentukan jarak antar kolom
- cellpadding - atribut untuk menentukan jarak antara isi dengan tepi kolom
- colspan - menentukan berapa kolom yang akan digabung
- rowspan - menentukan berapa baris yang akan digabung
VARIASI TABELCara membuat tabel 3 kolom cukup sederhana. Dari sini kita bisa memodifikasinya menjadi 4 kolom, 5 baris, dst, sesuai keperluan kita. Yang penting banyaknya kolom tergantung dari bagian yang berwarna merah. Sementara banyaknya baris tergantung dari bagian yang berwarna biru. Cara menambahkan kolom atau baris dengan copy paste saja. Begitu pun kalau ingin mengurangi kolom dan baris, misalnya ingin 2 kolom dan 2 baris, cukup dihapus aja kolom dan baris itu.
Setelah jadi, kode-kode HTML tersebut harus dirapatkan atau dipadatkan ke kanan. Gunakan saja backspace. Kalau tidak dirapatkan ke kanan, tabel akan jauh letaknya dari judul. Nah, selamat mencoba
<TABLE BORDER=2>
<TR><TH>Nomor</TH><TH>Nama Siswa</TH><TH>Nama Sekolah</TH></TR><TR><TD>1</TD><TD>Mamat</TD><TD>SD Satu</TD><TR><TD>2</TD><TD>Soleh</TD><TD>SMP Dua</TD><TR><TD>3</TD><TD>Peang</TD><TD>SMA Tiga</TD></TABLE>Nanti hasilnya begini:
| Nomor | Nama Siswa | Nama Sekolah |
|---|
| 1 | Mamat | SD Satu |
| 2 | Soleh | SMP Dua |
| 3 | Peang | SMA Tiga |
Sekarang kita coba untuk tabel 4 kolom dan 5 baris
<TABLE BORDER=2>
<TR><TH>Nomor</TH><TH>Nama Siswa</TH><TH>Nama Sekolah</TH><TH>Nama Kota</TH></TR><TR><TD>1</TD><TD>Mamat</TD><TD>SD Satu</TD><TD>Jakarta</TD><TR><TD>2</TD><TD>Soleh</TD><TD>SMP Dua</TD><TD>Bandung</TD><TR><TD>3</TD><TD>Peang</TD><TD>SMA Tiga</TD><TD>Semarang</TD><TR><TD>4</TD><TD>Panjul</TD><TD>STM Empat</TD><TD>Surabaya</TD></TABLE>
Nanti hasilnya begini:
| Nomor | Nama Siswa | Nama Sekolah | Nama Kota |
| 1 | Mamat | SD Satu | Jakarta |
| 2 | Soleh | SMP Dua | Bandung |
| 3 | Peang | SMA Tiga | Semarang |
| 4 | Panjul | STM Empat | Surabaya |
TABEL BERISI FOTOBukan hanya tulisan, tabel di atas bisa diisikan foto atau lainnya, sesuai keperluan. Jika diisikan foto hasilnya seperti ini.
Jika diisikan foto maka hasilnya begini:TABEL BERTINGKATMembuat tabel bertingkat tak ubahnya membuat tabel biasa. Hanya bentuknya yang agak berlainan. Metode pembuatannya tetap sama. Tinggal copy paste dan ganti nama-nama yang tercetak hitam saja.
<TABLE BORDER=3><TR><TD COLSPAN=3 ALIGN=CENTER>PANDUAN</TD></TR><TR><TD>Vivi</TD><TD>Yuli</TD> <TD>Lusi</TD></TR></TABLE> Nanti hasilnya begini:Model selanjutnya adalah sbb:
<TABLE BORDER=3><TR><TD ROWSPAN=2>PANDUAN</TD><TD>Wawan</TD><TD>Agung</TD></TR><TR><TD>Yuli</TD><TD>Lusi</TD></TR></TABLE> *Untuk memudahkan penulisan memang sebaiknya ditulis begini. Namun setelah dianggap memadai, kode2 html ini harus dipadatkan agar jarak tabel tidak jauh dari kalimat di atasnya.
Nanti hasilnya begini:| PANDUAN | Wawan | Agung |
| Yuli | Lusi |
Masih ada model lain lagi, nih dia:
<TABLE BORDER=3><TR><TD ROWSPAN=2>PANDUAN</TD><TD COLSPAN=2>Wawan</TD></TR><TR><TD>Yuli</TD><TD>Lusi</TD></TR></TABLE> Nanti hasilnya begini:(Sumber: gratis45.com)TABEL BERWARNAKalau berwarna hitam putih saja mungkin terasa menjenuhkan, ya? Karena itu tabel bisa dibuat berwarna. Soal kode2 warna, aq pernah memasukkannya ke dalam postingan, cari aja sendiri. Gak repot kok.
Tapi kamu jangan sembarang ngopy kode2 html berikut. Kamu masih perlu merapikannya, pokoknya sisi kanan dipenuhin. Gak percaya? Nih liat kalo cuma copy paste mentah2, jadinya terlalu jauh begini.
<TABLE BORDER=3><TR BGCOLOR="#FF9999"><TD>PANDUAN</TD><TD>Wawan</TD><TD>Agung</TD></TR><TR BGCOLOR="#99CCCC"><TD>Vivi</TD><TD>Yuli</TD><TD>Lusi</TD></TR></TABLE>Nanti hasilnya begini:
PANDUAN |
Wawan |
Agung |
Vivi |
Yuli |
Lusi |
Tapi kalo dirapikan seperti ini:
<TABLE BORDER=3><TR BGCOLOR="#FF9999"><TD>PANDUAN</TD><TD>Wawan</TD><TD>Agung</TD></TR><TR BGCOLOR="#99CCCC"><TD>Vivi</TD><TD>Yuli</TD><TD>Lusi</TD></TR></TABLE>
maka hasilnya...eng...ing...eng rapi begini:| PANDUAN | Wawan | Agung |
| Vivi | Yuli | Lusi |
Selamat mencoba. Pokoknya begitu dasarnya. Soal bentuk dan model tabel, cari aja di Um Gugel, dengan kata kunci "membuat tabel html". Tinggal pilih, lalu modifikasi aja.
Nah ada lagi tabel dengan tiga kolom. Jadi kalo kamu mau buat tabel dengan 10 baris, misalnya, kamu cukup copy paste saja dari script ini. Tinggal ganti kata-katanya sesuai keperluan.
Nih script html-nya:
<table border="2"><tbody><tr><td style="font-weight: bold;">Hasil Perhitungan </td><td style="font-weight: bold;">Rumus 1</td><td style="font-weight: bold;">Rumus 2</td></tr><tr><td>Positif</td><td>A x B + C</td><td>A + B x C</td></tr><tr><td>Negatif</td><td>A - B - C</td><td>A : B - C</td></tr><tr><td>Netral</td><td>A + B + C</td><td>A + B - C</td></tr></tbody></table>
Nanti hasilnya begini:| Hasil Perhitungan | Rumus 1 | Rumus 2 |
| Positif | A x B + C | A + B x C |
| Negatif | A - B - C | A : B - C |
| Netral | A + B + C | A + B - C |
Begitu cara membuat tabel yag rapi. Kalo kamu mau membuat 4 kolom atau lebih ya tinggal di copy paste aja. Coba dulu, kalo uda positif bagus, baru dilanjutin. Selamat mencoba.
Wartakota.co.id, Sabtu, 28 Agustus 2010 - Sekolah Menengah Kejuruan (SMK) Wikrama Kota Bogor, Jawa Barat, menyelenggarakan pelatihan bagi siswa dan guru untuk lebih mencintai mata pelajaran matematika, Sabtu (28/8).
