MANFAATKAN MASA MUDAMU SEBAIK MUNGKIN, RAJIN PANGKAL PANDAI

Rabu, 10 Februari 2010

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

SatuDua
TigaEmpat



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:
NamaAlamat Sekolah
AmatJalan Rusa No. 1
AmitJalan 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 headerTable 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 - noonnoon - 2 pm 2 pm - 4 pm
MondayHome EcMathGeography
WednesdayHistorySocial StudiesP.E.
FridayMusicPeace StudiesSleep



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:
NomorNama SiswaNama Sekolah
1MamatSD Satu
2SolehSMP Dua
3PeangSMA 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:

NomorNama SiswaNama SekolahNama Kota
1MamatSD SatuJakarta
2SolehSMP DuaBandung
3PeangSMA TigaSemarang
4PanjulSTM EmpatSurabaya


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
ViviYuliLusi


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:

PANDUANWawanAgung
YuliLusi


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:

PANDUANWawan
YuliLusi


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















PANDUANWawanAgung
ViviYuliLusi


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:



PANDUANWawanAgung
ViviYuliLusi


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 1Rumus 2
PositifA x B + CA + B x C
NegatifA - B - CA : B - C
NetralA + B + CA + 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.

Tidak ada komentar:

Posting Komentar

Kontak Saya

Your Name :
Your Email :
Subject :
Message :
Image (case-sensitive):
Glitter Text Generator at TextSpace.net