Home » » CARA MEMBUAT TABEL / KOTAK PADA POSTINGAN

CARA MEMBUAT TABEL / KOTAK PADA POSTINGAN

Tabel atau kotak berguna untuk menempatkan file ( teks,kode script,gambar dll ) yang kita anggap penting pada postingan.
Disamping untuk membedakan dengan teks biasa memasang file dalam kotak juga akan memperindah tampilan halaman blog.

Untuk membuat kotak dalam postingan,kita harus menggunakan kode HTML <table> ..... </table>yang didalamnya terdapat berbagai atribut a.l :
  • bordercolor --> warna dari garis tabel
  • bgcolor --> warna dari background tabel
  • cellpadding --> jarak antara tulisan dengan garis luar tabel
  • cellspacing --> jarak antar tulisan
  • border --> ketebalan garis pinggir tabel

    • dotted --> garis titik putus-putus
    • dashed --> garis datar putus-putus
    • double --> garis rangkap dua
  • align --> posisi dari isi tabel, bisa kiri, tengah, atau kanan
  • width --> lebar tabel
  • height --> tinggi tabel
Dari pada membuat bingung,kita akan mencoba membuat sebuah tabel / kotak sederhana dengan kode sbb :


<table width="250" border="1">
<tr>
<td>
Isi Tabel
</td>
</tr>
</table>
maka jadi :



Isi Tabel

coba perhatikan tulisan yang berwarna :
     a.hijau          : lebar tabel / kotak
     b.biru           : tebal garis
     c.merah        : file yang akan dimasukan
Sekarang kita akan memasukan beberapa atribut dalam kotak di atas :


<tablewidth="250"border="7">
<tr bgcolor="#81BEF7">
<td align="center">
Isi Tabel
</td>
</tr>
</table>
maka jadi :


Isi Tabel
perhatikan warna :
     d.ungu           : warna background
     e.kuning        : posisi file

Bagaimana cara membuat beberapa kotak yang terdiri kolom dan baris..?
Untuk membuat kolom dan baris kita menggunakan kode sbb :
1.Dua Kolom


<table width="400" border="7">
<tr bgcolor="#99CC00">
<td align="center">
Kolom 1 Baris 1
</td>
<td align="center">
Kolom 2 Baris 1
</td>
</tr>
</table>
maka jadi :




Kolom 1 Baris 1

Kolom 2 Baris 1
2.Dua Kolom Tiga Baris



<table width="400" border="5" bordercolor="blue">
<tr bgcolor="
#33CCCC">
<td align="center">
Kolom 1 Baris 1
</td>
<td align="center">
Kolom 2 Baris 1
</td>
</tr>
<tr bgcolor="
#33CCCC">
<td align="center">
Kolom 1 Baris 2
</td>
<td align="center">
Kolom 2 Baris 2
</td>
</tr bgcolor="
#33CCCC">
<tr>
<td align="center">
Kolom 1 Baris 3
</td>
<td align="center">
Kolom 2 Baris 3
</td>
</tr>
</table>

maka jadi :









Kolom 1 Baris 1
Kolom 2 Baris 1
Kolom 1 Baris 2

Kolom 2 Baris 2

Kolom 1 Baris 3

Kolom 2 Baris 3
Sampai sini dulu ah capai nulis panjang-panjang.....Untuk yang kolom dan barisnya banyak,Ayo kita cari bersama tutorialnya...!!
Semoga bermanfaat.....
Bagikan artikel via :

5 komentar:

  1. Mantap sob postingan nya. Tambah informasi nich buat ku. makasih kawan...

    BalasHapus
  2. @Hadi :Makasih banyak....jadi gak enak blm sempat kunjung balik...!

    BalasHapus
  3. bagus bro postingannya...ane mau nanya, kalo script buat preview dari semua kotak itu ada gk ya?maksudnya kita mau ngambil data dari semua yang sudah di ketik dalam kotak...

    BalasHapus
  4. salam kenal! Mau nanya nih bos, kalimat terakhir yg mengatakan: untuk kolom dan barisnya banyak, ayo kita cari bersama tutorialnya...memangnya kode diatas hanya terbatas sampai 2 kolom 3 baris saja ya? Mksh atas tutornya

    BalasHapus
  5. makasih banyak, lg cari2 tau ttg blog

    BalasHapus

 
Support : Your Link | Your Link | Your Link
Copyright © 2013. PRAPATAN KERTEK - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger