Cara Membuat Berbagai Macam Tabel

Views

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:

satu kolom

TABEL DUA KOLOM

<table border="2">
<tr>
<td>Kolom pertama</td>
<td>Kolom kedua</td>
</tr>
</table>

Nanti hasilnya begini:

Kolom pertama

Kolom kedua

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>

Kolom pertama

Kolom kedua

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:

Satu	Dua
Tiga	Empat

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>&nbsp;</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 TABEL

Cara 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 FOTO

Bukan 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 BERTINGKAT

Membuat 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:

PANDUAN
Vivi	Yuli	Lusi

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:

PANDUAN	Wawan
	Yuli	Lusi

(Sumber: gratis45.com)


TABEL BERWARNA

Kalau 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.