Cara Membuat Tabel di Blog

Jika kita ingin membuat tabel yang perlu di perhatikan adalah :
1. Table width : lebar keselurahan dari tabel, di sesuakan dengan kebutuhan,
2. Border : garis pembatas tabel
3. Colomns (kolom) : jumlah kotak dari kiri kenan atau horisontal
4. Rows (baris) : Jumlah kotak dari atas ke bawah atau vertical
5. Satu kolom di awalai kode pembuka yaitu <tr>

Coba sobat perhatikan contoh berikut :

Tabel 1 kolom

<table width="500" border="1">
<tr>
<td scope="col"><div align="center">Nama Kabupaten di Mars</div></td>
</tr>
<tr>
<td><div align="center">Kab. Marshung batu, Kab.Marsukin, Kab. Mars Kox Slow Banget</div></td>
</tr>
</table>

Maka Hasilnya seperti ini

Nama Kabupaten di Mars

Kab. Marshung batu, Kab.Marsukin, Kab. Mars Kox Slow Banget

Tabel 2 Kolom

<table width="500" border="1">
<tr>
<td scope="col"><div align="center">Nama</div></td>
<td scope="col"><div align="center">Kelas</div></td>
</tr>
</table>

maka hasilnya akan seperti ini

Nama

Kelas

Tabel 2 kolom dengan 2 baris

<table width="500" border="1">
<tr>
<td scope="col"><div align="center">Nama</div></td>
<td scope="col"><div align="center">Kelas</div></td>
</tr>
<tr>
<td scope="col"><div align="center">Mbah Goggle</div></td>
<td scope="col"><div align="center">berat</div></td>
</tr>
</table>

maka hasilnya seperti ini:

Nama	Kelas
Mbah Goggle	berat

Dari contoh tadi yang perlu sobat perhatikan adalah

1. Untuk membuat satu kolom , sobat perhatikan kode yang berwarna biru pada Tabel 1 kolom, jika sobat ingin menambahkan satu kolom dibawahnya agar menjadi dua baris, sobat hanya perlu mengcopy kode yang berwarna biru tadi. Begitu juga seterusnya jika sobat ingin menambahkan tiga baris atau lebih tinggal mengcopy kode yang berwarna biru saja.

2. Untuk membuat dua kolom, sobat perhatikan Tabel 2 kolom, dan apabila sobat ingin membuat tabel dua kolom dengan dua baris seperti pada Tabel 2 kolom dengan 2 baris, sobat hanya perlu mengcopy kode yang berwarna biru pada Tabel 2 kolom.

3. Untuk menambahkan jumlah kolom di baris pertama sobat hanya tinggal mengcopy kode yang berwarna merah setelah kode <tr> atau sebelum kode </tr>

4. Untuk menambakan kolom di baris berikutnya caranya sobat tinggal mengcopy kode yang berwana orange setelah kode <tr> atau sebelum kode </tr>

Bagaimana sobat ada yang kurang jelas? Setelah mengerti sistim kerja otak kiri dan otak kanan, (jah malah ngelantur), maksud saya setelah mengerti sistim membuat tabel seperti yang saya jelaskan tadi, sekarang kita tinggal memodifikasinya saja. Berikut ini adalah beberapa contoh tabel yang bisa sobat buat atau kreasikan sendiri.

Tabel Dengan Judul

Daftar anggota Megadang sampai pagi
nama	jenis kelamin	bangsa
ayam	kelamin ganda	reptil
cicak	belum jelas	unggas

kodenya :
<table border="1" style="margin-left: auto; margin-right: auto; text-align: left; width: 500px;"><tbody>

<tr> <th colspan="3" scope="col"><div align="center">Daftar anggota Megadang sampai pagi
</div></th> </tr>
<tr> <td><div align="center"><strong>nama</strong></div></td>
<td><div align="center"><strong>jenis kelamin</strong></div></td>
<td><div align="center"><strong>bangsa</strong></div></td>
</tr>
<tr> <td><div align="center">ayam</div></td>
<td><div align="center">kelamin ganda</div></td>
<td><div align="center">reptil</div></td>
</tr>
<tr> <td><div align="center">cicak</div></td>
<td><div align="center">belum jelas</div></td>
<td><div align="center">unggas</div></td>
</tr>
</tbody></table>

ket :
colspan="3" artinya baris pertama lebarnya 3 kolom

Tabel 3 Dimensi

mengapa	siapa	dimana
tidak tahu	tidak tahu	bukan tempe

kodenya :
<table width="0" border="5">
<tr>
<td>mengapa</td>
<td>siapa</td>
<td>dimana</td>
</tr>
<tr>
<td>tidak tahu</td>
<td>tidak tahu</td>
<td>bukan tempe</td>
</tr>
</table>

ket :
untuk membuat tabel terlihat 3 dimensi kita hanya mengganti nilai bordernya

Border Berwarna

warna	warna	warna
warna	warna	warna

kodenya :
<table width="0" border="1" bordercolor="#00FF00">
<tr>
<td>warna</td>
<td>warna</td>
<td>warna</td>
</tr>
<tr>
<td>warna</td>
<td>warna</td>
<td>warna</td>
</tr>
</table>

ket
untuk mengubah warna bodernya dengan warna yang kita sukai, kita hanya perlu menambahkan kode yang berwarna, dan kode yang berwarna merah itu adalah kode dari warna hijau yang saya pakai.

Background Berwarna

background berwana

background berwana

background berwana

kodenya :
<table width="0" border="1">
<tr>
<td bgcolor="#00FF00"><div align="center">background berwana</div></td>
<td bgcolor="#FF0000"><div align="center">background berwana</div></td>
<td bgcolor="#00FFFF"><div align="center">background berwana</div></td>
</tr>
</table>

Ket :
untuk mengubah warna bacgkroud kodenya adalah seperti kode yang berwarna orange dan kode warnanya adalah kode yang berwana biru.

Mengubah Warna Teks

warna teks

warna teks

kodenya :
sobat tinggal rubah secara otomatis di blog sobat, kan sudah ada pilihan warna teks heheheheh!!, tinggal di blok lalu pilih warna teksnya.

Tabel Bergambar dan Link
agar lebih jelas sobat bisa klik ke dua gambar, setelah sobat klik sobat akan tahu dmn perbedaannya.

yang ini contoh dengan gambar saja	yang ini gambar dengan link

kodenya :
<table width="0" border="1">
<tr>
<td><div align="center">yang ini contoh dengan gambar saja</div></td>
<td><div align="center">yang ini gambar dengan link</div></td>
</tr>
<tr>
<td><div align="center"><img src="http://1.1.1.4/bmi/i848.photobucket.com/albums/ab48/chuckysharpeye/metal%20teksture/1.gif" alt="contoh gambar" /></div></td>
<td><div align="center"><a href="http://www.ziddu.com/download/10827649/1.rar.html"><img src="http://1.1.1.4/bmi/i848.photobucket.com/albums/ab48/chuckysharpeye/metal%20teksture/1.gif" alt="contoh gambar" border="0" /></a></div></td>
</tr>
</table>

ket :
Untuk menambahkan gambar sobat masukkan kode yang ini
<img src="disini alamat url gambar sobat" alt="contoh gambar" />
Untuk membuat agar gambar menjadi tombol, sobat masukkan kode yang seperti ini
<a href="disini URL tujuan sobat"><img src="disini alamat url gambar sobat" alt="contoh gambar" />
maka hasilnya seperti kode di atas tadi.

Background Bergambar

teks disini aja

teks disini aja

kodenya :
<table width="0" border="3">
<tr>
<td width="300" height="35" background="http://i848.photobucket.com/albums/ab48/chuckysharpeye/button4a-2.gif"><div align="center">teks disini aja</div></td>

<td width="300" height="35" background="http://i848.photobucket.com/albums/ab48/chuckysharpeye/button4a-2.gif"><div align="center">teks disini aja</div></td>

</tr>

</table>
Ket:
1. kode yang berwana adalah kode backgroundnya.
2. yang berwana hijau adalah ukuran lebar dan tinggi gambar.
3. yang berwana orange adalah URL gambar milik sobat
Mungkin sekian dulu yaaa, sobat bisa coba-coba sendiri dimodif dengan kode-kode lainnya, sudah pagi, saia belum sempat bobok dua hari hehehehe!!
kalau ada yang salah mohon di koreksi yaaa, dan kalau ada yang kurang jelas silahkan bertanya.. huaahmm...,, bobok dulu aaah..

cari artikel lainnya, klik yang di bawah