Monday, 26 September 2011

Membuat Tabel di HTML

| Monday, 26 September 2011 | 1 comments


Pemanfaatan Tabel
Tabel biasanya digunakan untuk menempatkan data secara spreadset, tapi untuk desain suatu web, selain untuk  menempatkan data,  tabel digunakan untuk merapikan teks, ataupun gambar.
Dengan menggunakan tabel, teks ataupun gambar dapat disusun menjadi lebih rapi. Tampilan halaman web akan menjadi lebih baik, apabila dasar/kerangkanya menggunakan tabel.


Tag  Pembuatan Tabel
Adapun elemen-elemen yang digunakan untuk membuat suatu tabel adalah :

Elemen
Kegunaan
TABLE
Tag utama. Digunakan untuk memberitahu browser "ini adalah tabel", bersama dengan beberapa atribut seperti ukuran, lebar border dan beberapa hal lagi. Tag <TABLE>..<TABLE>
TR
Baris Tabel, yaitu baris-baris pada suatu tabel, yang dinyatakan dalam pasangan tag <TR>..</TR> 
TD
Data tabel, yaitu tempat dimana informasi/data dimasukkan dalam tabel. tabel data adalah colom dari suatu baris tabel. tabel data dinyatakan dengan tag <TD>..<TD>    
TH
Judul tabel, biasnya terletak di bagian paling atas atau paling kiri dari suatu tabel. Tabel header yang terletak di bagian atas adalah judul kolom tabel, sedang tabel header yan terletak di bagian kiri adalah judul baris tabel. Tag yang digunakan adalah <TH>…</TH>
CAPTION
Judul tabel yang terletak diluar tabel biasanya di bagian atas/bawah tabel. tag <CAPTION>..</CAPTION>
Selain elemen-elemen diatas, tabel juga mempunyai bermacam-macam atribut yang dapat mempercantik bentuk tabel tersebut, seperti atribut-atribut :

Atribut
Nilai
Keterangan
Border
Angka 0, 1 dst
Digunakan untuk menentukan tebal garis batas tepi tabel
Cellspacing
Angka 1,2,3 dst
Digunakan untuk menentukan jumlah spasi/celah diantara tiap-tiap sel
Cellpadding
Angka 1,2,3 dst
Digunakan untuk menentukan jumlah spasi antara data dalam suatu sel
width
Pixel / persentase
Digunakan untuk mengatur lebar tabel, dapat menggunakan ukuran piksel atau persentasi %
Align
Left, center.right
Digunakan untuk perataan tabel secara horizontal
Valign
Middle, bottom, baseline
Digunakan untuk perataan tabel secara vertikal
bgcolor
Warna/bil.hexadesimal
Warna latar dari tabel atau pada sel
Rowspan
Angka 1,2,3 dst
Menggabungkan beberapa baris tabel
Colspan
Angka 1,2,3 dst
Menggabungkan beberapa kolom tabel



Tabel Sederhana
Untuk membuat suatu tabel minimal diperlukan tiga elemen tabel. Tag TABLE digunakan sebagai awal pembuatan tabel, tag TR digunakan untuk mendifinisikan berapa banyak baris pada tabel, dan tag TD digunakan untuk menampung sel data dari tabel tersebut.

<table>
  <tr>
    <td>Tabel sederhana Tanpa border</td>
  </tr>
</table>

Untuk membuat garis batas, dapat ditambahkan dengan atribut border seperti berikut :

<table border=1>
  <tr>
    <td>Tabel sederhana dengan menggunakan border.</td>
  </tr>
</table>

Lebar dari border dapat diatur dengan memberikan nilai pada atribut tersebut

<table border=6>
  <tr>
    <td>Tabel sederhana dengan menggunakan border=6.</td>
  </tr>
</table>


Tabel Dua Dimensi
Tabel biasanya tidak hanya terdiri dari dari 1 dimensi atau 1 kolom saja , tapi bisa 2, 3 atau sesuai dengan kebutuhan kita. Contoh berikut adalah pengembangan dari tabel diatas dengan dengan menambahkan 2 kolom lagi didalamnya.

<table border=5>
  <tr>
    <td>Tabel Kolom Pertama </td>
    <td>Tabel Kolom Kedua   </td>
    <td>Tabel Kolom ketiga  </td>
  </tr>
</table>
  
Untuk membuat tabel dua dimensi, dibutuhkan elemen TR sebanyak 2 kemudian kolom tabel disusaikan dengan data yang akan diisikan.

<table border=5>
  <tr>
    <td>Baris 1 Kolom 1 </td>
    <td>Baris 1 Kolom 2 </td>
    <td>Baris 1 Kolom 3 </td>
  </tr>
  <tr>
    <td>Baris 2 Kolom 1 </td>
    <td>Baris 2 Kolom 2 </td>
    <td>Baris 2 Kolom 3 </td>
  </tr>
</table>


Judul Tabel
Suatu tabel biasanya memiliki judul.  Judul pada tabel dibedakan menjadi tiga macam yaitu, judul tabel itu sendiri, judul kolom tabel, dan judul baris tabel.
Untuk membuat judul diluar tabel, tag yang digunakan adalah CAPTION, sedang untuk membuat judul kolom atau baris pada tabel menggunakan tag TH. Bagian yang merupakan judul tabel akan ditebalkan penulisannya.

<table border=5>
 <caption><b>Judul Tabel dengan Caption</b></caption>
  <tr>
    <td>Baris 1 Kolom 1 </td>
    <td>Baris 1 Kolom 2 </td>
    <td>Baris 1 Kolom 3 </td>
  </tr>
  <tr>
    <td>Baris 2 Kolom 1 </td>
    <td>Baris 2 Kolom 2 </td>
    <td>Baris 2 Kolom 3 </td>
  </tr>
</table>
<br>
<table border=5>
 <caption><b>Judul Tabel dengan Tabel Header</b></caption>
  <tr>
    <th>Baris 1 Kolom 1 </th>
    <th>Baris 1 Kolom 2 </th>
    <th>Baris 1 Kolom 3 </th>
  </tr>
  <tr>
    <th>Baris 2 Kolom 1 </th>
    <td>Baris 2 Kolom 2 </td>
    <td>Baris 2 Kolom 3 </td>
  </tr>
</table>



Sel Kosong
tabel yang memiliki judul kolom dan judul baris biasanya memiliki suatu sel kosong pada bagian kiri atasnya. Untuk membuatnya, cukup dengan mendefinisikan sel tersebut dengan elemen TD atau TH tanpa diisi dengan data apapun.

<table border=5>
 <caption><b>Jadwal  Dokter
 Jaga</b> </caption>
  <tr>
    <td></td>
    <th>Senin</th>
    <th>Selasa</th>
  </tr>
  <tr>
    <th>Pagi      </th>
    <td>Dr Santi  </td>
    <td>Dr Irawan </td>
  </tr>
  <tr>
    <th>Siang     </th>
    <td>Dr Andri  </td>
    <td>Dr Dian   </td>
  </tr>
  <tr>
    <th>Malam     </th>
    <td>Dr Tati   </td>
    <td>Dr Nana   </td>
  </tr>
</table>
<table border=5>
 <caption><b>Jadwal  Dokter
 Jaga</b> </caption>
  <tr>
    <td><br></td>
    <th>Senin</th>
    <th>Selasa</th>
  </tr>
  <tr>
    <th>Pagi      </th>
    <td>Dr Santi  </td>
    <td>Dr Irawan </td>
  </tr>
  <tr>
    <th>Siang     </th>
    <td>Dr Andri  </td>
    <td>Dr Dian   </td>
  </tr>
  <tr>
    <th>Malam     </th>
    <td>Dr Tati   </td>
    <td>Dr Nana   </td>
  </tr>
</table>

Pada kode yang pertama, sel yang dikosongkan tampak  tidak terlihat. Untuk memunculkan sel tersebut, diberikan perintah BR untuk memunculkan sel tersebut.


Perataan Tabel
Tabel dapat diratakan baik secara horizontal maupun secara vertikal. Seperti diketahui perataan horizontal mempunyai orientasi ke kiri, kanan dan tengah. Sedang perataan vertikal orientasinya ke atas, bawah dan tengah.

Atribut
Elemen
Value
ALIGN
CAPTION
top,bottom
TH, TR, TD
left, right, center

Atribut
Elemen
Value
VALIGN
TH, TR, TD
top, middle, bottom, baseline

Berikut adalah contoh perataan tabel dengan menggunakan perintah ALIGN dan VALIGN.

<table border=5>
 <caption><h4> Perataan Pada Tabel</h4>
 </caption>
  <tr>
    <td></td>
    <th><h3>Kiri  </h3></th>
    <th><h3>Tengah</h3></th>
    <th><h3>Kanan </h3></th>
  </tr>
  <tr>
    <th><h3>Atas  </h3></th>
<td align="left" valign="top"><img border="0" src="bola.GIF" width="15" height="15"></td>
<td align="center" valign="top"><img border="0" src="bola.GIF" width="15" height="15"></td>
<td align="right" valign="top"><img border="0" src="bola.GIF" width="15" height="15"></td>
  </tr>
  <tr>
    <th><h3>Tengah      </h3></th>
<td align="left" valign="middle"><img border="0" src="bola.GIF" width="15" height="15"></td>
<td align="center" valign="middle"><img border="0" src="bola.GIF" width="15" height="15"></td>
<td align="right" valign="middle"><img border="0" src="bola.GIF" width="15" height="15"></td>
  </tr>
  <tr>
    <th><h3>Bawah </h3></th>
<td align="left" valign="bottom"><img border="0" src="bola.GIF" width="15" height="15"></td>
<td align="center" valign="bottom"><img border="0" src="bola.GIF" width="15" height="15"></td>
<td align="right" valign="bottom"><img border="0" src="bola.GIF" width="15" height="15"></td>
  </tr>
</table>



Mengatur Lebar Tabel
Lebar suatu tabel diatur besarnya dengan menggunakan atribut WIDTH. Atribut WIDTH digunakan untuk mengubah lebar tabel maupun lebar kolom suatu tabel. Elemen-elemen yang dapat disisipi dengan atribut WIDTH adalah ;
Atribut
Elemen
Orientasi
Value
WIDTH
TABLE
Lebar tabel terhadap browser
“xx%” atau pixel
TH
Lebar kolom terhadap tabel
“xx%” atau pixel
TD
Lebar kolom terhadap tabel
“xx%” atau pixel

Berikut diberikan contoh penggunaan width pada tabel dan pada tabel data :

<table border=1 width="70%">
 <caption align="bottom"> <h5> tabel dengan width 70%</h5>
 </caption>
  <tr>
    <td width="50%">width 50%</td>
    <td width="50%">width 50%</td>
  </tr>
  <tr>
    <td>lebar sel 50% dari lebar tabel</td>
    <td>lebar sel 50% dari lebar tabel</td>
  </tr>
</table>
<table border=1 width="100%">
 <caption align="bottom"> <h5> tabel dengan width 100%</h5>
 </caption>
  <tr>
    <td width="30%">width 30%</td>
    <td width="70%">width 70%</td>
  </tr>
  <tr>
    <td>lebar sel 30% dari lebar tabel</td>
    <td>lebar sel 70% dari lebar tabel</td>
  </tr>
</table>


Pewarnaan Tabel
Pemberian warna dapat dilakukan pada tabel, sel maupun pada border dari suatu tabel. Warna dapat ditulis dengan menggunakan bilangan Hexadesimal RRGGBB atau dengan menyebutkan warnanya. Atribut BGCOLOR digunakan pada perintah TABLE, TD, TR. Sedang untuk mengubah warna border tabel, hanya dapat dilakukan pada internet explorer yang menyediakan beberapa macam atribut, yaitu

Atribut
fungsi
BORDERCOLOR
Warna border tabel
BORDERCOLORLIGHT
Warna border bagian atas dan kiri
BORDERCOLORDARK
Warna border bagian bawah dan kanan

Ketiga atribut diatas harus digunakan bersama atribut BORDER. Berikut ini adalah contoh pewarnaan yang terjadi pada suatu tabel.

<center>
<table border=1 width="40%" bordercolorlight="red" bordercolordark = "yellow">
 <caption><h5> warna pada tabel</h5>
 </caption>
  <tr bgcolor="yellow">
      <td align="center">warna kuning</td>
      <td align="center">warna kuning</td>
  </tr>
  <tr>
      <td align="center" bgcolor="red">warna merah</td>
      <td align="center" bgcolor="green">warna hijau</td>
 </tr>
</table>
</center>


Mengantur Spasi Tabel
Atribut yang digunakan untuk mengatur spasi dalam tabel yaitu CELLSPACING dan CELLPADDING. CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat diantara dua buah sel dalam sebuah tabel,  sedangkan CELLPADDING digunakan untuk menentukan jumlah spasi yang terdapat diantara border sel dan dengan isi yang ada didalam sel tersebut. Berikut adalah contoh tabel yang menggunakan perintah cellpadding dan celspacing.



<table border=5 cellpadding=10 cellspacing=15 align=”center”>
  <tr>
    <td>hallo</td>
    <td>hallo</td>
    <td>hallo</td>
  </tr>
  <tr>
    <td>hallo</td>
    <td>hallo</td>
    <td>hallo</td>
  </tr>
</table>


Menggabungkan Kolom dan Baris
Seperti tabe umumnya, kita dapat menggabungkan dua atau lebih kolom/baris menjadi satu buah kolom/baris. Atribut yang digunakan untuk menggabungkan kolom adalah COLSPAN, sedang atribut untuk menggabungkan baris adalah ROWSPAN. Kedua atribut ini bisa dikenakan pada sembarang sel dalam suatu tabel (TH atau TD) dan untuk menggunakannya cukup dengan menentukan berapa banyak kolom atau baris yang akan digabungkan. Berikut adalah contoh penggunaan atribut COLSPAN dan ROWSPAN pada tabel.

<html>
<body>
<table border=1 width="50%">
  <tr>
    <td  align="center">Data1</td>
    <td  colspan=2 align="center">Data 2</td>
  </tr>
  <tr>
    <td  align="center">Data 1</td>
    <td  align="center">Data2a</td>
    <td  align="center">Data2b</td>
  </tr>
</table>
<br>
Tabel dengan ROWSPAN<br>
<table border=1 width="50%">
  <tr>
    <td  rowspan=2 align="center">Data1</td>
    <td  align="center">Data 2</td>
    <td  align="center">Data 3</td>
    <td  align="center">Data 4</td>
  </tr>
  <tr>
    <td  align="center">Data 2</td>
    <td  align="center">Data 3</td>
    <td  align="center">Data 4</td>
  </tr>
</table>
<br>
Tabel Gabungan ROWSPAN dan COLSPAN<br>
<table border=1 width="50%">
  <tr>
    <th rowspan=2 colspan=2></th>
    <th colspan=2>COLSPAN</th>
  </tr>
  <tr>
    <th>Kolom 1</th>
    <th>Kolom 2</th>
  </tr>
  <tr>
    <th rowspan=2>ROWSPAN</th>
    <th>Baris 1</th>
    <td align="center">1,1</td>
    <td align="center">1,2</td>
  </tr>
  <tr>
    <th>Baris 1</th>
    <td align="center">1,1</td>
    <td align="center">1,2</td>
  </tr>
</table>
</body>
</html>

1 comments:

Alan Sendy said...

makasih

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

Post a Comment

 
Copyright 2011. w3-id.blogspot.com. | Template by o-om.com - zoomtemplate.com