Pages

October 4, 2012

Membuat Tabel pada Pemrograman HTML


Membuat Tabel pada Pemrograman HTML 

Menggunakan Tabel dan Pengaturannya
Untuk dapat membuat tabel Anda dapat menggunakan Tag HTML yang dimulai dengan tag <TABLE>, yang kemudian diikuti dengan <TR> dan <TD>
·         <TABLE> : adalah tag yang menerapkan kepada browser bahwa itu adalah sebuah tabel. Tag TABLE dapat diikuti dengan beberapa atribut seperti lebar maupun warna background.
·         <TR> : adalah TABLE ROW merupakan Tag yang digunakan untuk membuat baris dalam tabel.
·         <TD>  : Tabel Data adalah tag yang berguna untuk meletakkan data yang kita isikan dalam tabel. TD dapat juga diartikan sebagai kolom, jadi kita dapat membuat beberapa kolom didalam sebuah baris tabel.

Sintaks dalam mebuat tabel :
<TABLE atribut=”value”>
<TR><TD atribut=”value”> …. Isi … </TD>
….
<TR>
<TABLE>

Didalam tag <TABLE> Anda dapat meletakkan beberapa atribut yang berguna dalam pengaturan tabel, atribut itu antara lain adalah :
·         BORDER : Atribut ini digunakan untuk menentukan tebal garis pada tabel dengan ukuran angka dimulai dari 1-n

Cobalah ketikkan script tabel pertama Anda :

Contoh24.html
<HTML>
  <HEAD>
     <TITLE>Belajar Tabel</TITLE>
  </HEAD>
<BODY>
  <TABLE border=1>
   <TR>
     <TD>Ini Table pertama</TD>
<BODY>
   </TR>
  </TABLE>
</BODY>
</HTML>

Script diatas jika Anda jalankan akan menghasilkan tabel dengan baris berjumlah satu (1) dan kolom = 1. Secara standar bila kita tidak menentukkan letak tabel, maka tabel akan berada disebelah kiri.

5.1.1 Tabel dengan Beberapa Kolom
Untuk dapat membuat tabel dengan dua kolom, berarti Anda harus menambahkan <TD> diantara <TR>, jadi jumlah <TD> akan mempengaruhi jumlah kolom dan tabel. Sekarang cobalah membuat tabel dengan jumlah baris 1, dan kolom = 3.

Contoh25.html
<HTML>
  <HEAD>
     <TITLE>Belajar Tabel</TITLE>
  </HEAD>
<BODY>
  <TABLE border=1>
   <TR>
     <TD>Colom 1</TD>
     <TD>Colom 2</TD>
     <TD>Colom 3</TD>
   </TR>
 </TABLE>
</BODY>
</HTML>

5.1.2 Tabel dengan Banyak Baris
Berikut adalah contoh pembuatan tabel dengan menggunakan kolom = 3 dan baris = 2. Untuk dapat membuat tabel tersebut Anda harus menambahkan  <TR> </TR> setelah <TR></TR> yang pertama, yang berarti Anda menambahkan satu baris didalam tabel Anda. Setelah itu Anda juga harus mendefiniskan jumlah kolom yang disesuaikan pada baris diatasnya. Sebagai contoh buatlah dokumen HTML dibawah ini.

Contoh26.html      
<HTML>
              <HEAD>
                          <TITLE>Belajar Tabel</TITLE>
             </HEAD>
<BODY>
  <TABLE border=1>
            <TR>
                        <TD>Colom 1</TD>
                        <TD>Colom 2</TD>
                        <TD>Colom 3</TD>
             </TR>
<TR>
                        <TD>cel</TD>
                        <TD>cel</TD>
                        <TD>cel</TD>
             </TR>
  </TABLE>
</BODY>
</HTML>

Pengaturan Tabel
Dengan menggunakan beberapa atribut, Anda dapat melakukan pengaturan bentuk tabel maupun posisi dari tabel dan data. Beberapa atribut yang dapat digunakan dalam pengaturan tabel adalah :

Atribut pada tag <TABLE> … </TABLE>
Pada tag <TABLE> memiliki beberapa atribut yaitu align (Perataan/Posisi), border (Lebar garis), Width (lebar tabel), cellpadding, cellspasing serta bgcolor (warna latar belakang). Atribut yang digunakan dalam <TABLE>

Atribut
Keterangan
Align
Digunakan untuk meratakan tabel ke kiri, ke tengah, ke kanan, atau kanan-kiri. Align dapat bernilai left, center, right, atau justify.
Border
Border digunakan untuk mengatur ketebalan garis pembatas antar sel-sel dalam tabel
Width
Digunakan untuk menentukan lebar tabel, Anda dapat menentukan lebar tabel dengan nilai persen (%)
Cellspacing
Cellspacing digunakan untuk menyatakan jarak spasi antar sel satu dengan lainnya serta antar sel dengan batas tabel
Cellpadding
Atribut ini menyatakan jarak spasi antara isi sel dengan batas sel (border)
Bgcolor
Menunjukkan warna background untuk semua cell pada tabel
Bordercolor
Digunakan untuk membuat warna pada garis / border


Atribut pada Tag <TR> … </TR>
Beberapa atribut yang digunakan pada pembuatan garis dengan menggunakan <TR>

Atribut yang digunakan dalam <TR>
Atribut
Keterangan
Align
Dapat bernilai left, center, right, atau justify. Digunakan untuk melakukan perataan tabel ke kiri (left), ke tengah (center), ke kanan (right)
Valign
Digunakan untuk melakukan perataan yang bersifat horizontal (alignment). Valign menggunakan nilai top (atas), center (tengah), bottom (bawah) atau baseline (standar)
Bgcolor
Menunjukkan warna background pada baris





Comments
0 Comments

0 komentar:

Post a Comment

Daftar Artikel