Selasa, 17 Februari 2009

Membuat Tabel

. Selasa, 17 Februari 2009

Tabel sangat penting sekali dalam pembangunan sebuah web site karena dengan menggunakan table Anda dapat membuat halaman web site terbagi-bagi beberapa kolom atau baris. Elemen-elemen utama atau Tag-tag yang digunakan dalam pembuatan table adalah sebagai berikut :

  • <TABLE>yang diakhiri dengan tag </TABLE> Terdiri dari atribut :
    • align - perataan : rata kiri (left), tengah (center) atau kanan (right).
    • bgcolor - warna latar belakang (background) dari tabel.
    • border - ukuran lebar border tabel (dalam pixel).
    • cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).
    • cellspacing - jarak antar cell (dalam pixel).
    • width - ukuran tabel dalam pixel atau percent.
  • <TR>yang diakhiri dengan tag </TR>,Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
    • align - perataan : rata kiri (left), tengah (center) atau kanan (right).
    • bgcolor - warna latar belakang dari baris.
    • valign - perataan vertikal : top, middle atau bottom.
    Contoh :


    <TR align="right" bgcolor="#0000FF" valign=top>

  • <TD>yang diakhiri dengan tag </TD> Tag ini digunakan untuk membuat kolom baru pada tabel.

    • align - perataan
    • background - image yang digunakan sebagai latar belakang dari kolom.
    • bgcolor - warna latar belakang
    • colspan - lihat gambar contoh
    • height - ukuran tinggi cell dalam pixels.
    • nowrap - membuat supaya isi dari kolom tetap berada pada satu baris.
    • rowspan - lihat gambar contoh
    • valign - perataan vertikal :top, middle atau bottom.
    • width - ukuran kolom dalam pixel atau percen.
    Contoh :


    <TD align="right" background="back.gif" bgcolor="#0000FF" colspan="3" height="200" nowrap rowspan="2" valign="bottom" width="300">

    Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE>

    Contoh :

    <table style="width: 500px; height: 200px" cellspacing="2" cellpadding="2" width="500" border="1"><tbody>
        <tr>
          <td bgcolor="#f6cece"></td>

          <td bgcolor="#cef6ce"></td>

          <td bgcolor="#f6cef5" rowspan="2"></td>
        </tr>

        <tr>
          <td bgcolor="#a9f5f2" colspan="2"></td>
        </tr>

        <tr>
          <td bgcolor="#ffcc99" colspan="3"></td>
        </tr>
      </tbody></table>

     

    Hasilnya seperti ini :

0 komentar:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

Silakan isi komentar anda

 

TUKERAN LINK DISINI

ADHIE CENTER

INFO SITE

My Popularity (by popuri.us)
ADHIE CENTER is proudly powered by Blogger.com | Template by o-om.com