Membuat tabel Menggunakan Bahasa HTML

TABLE


  Untuk membuat tabel di blog, Perintah yang akan kita pakai adalah  
<table>
 ..... 

</table>.
Di dalam tabel tersebut, kita bisa menyisipkan beberapa, Misalnya:
 


 
     
  • bgcolor : untuk mengatur warna background/warna latar
    belakang tabel. Contoh : bgcolor="#ff0000"
  •    
  • align : untuk mengatur tata letak tulisan yang ada pada
    tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan.
    Contoh:

      align="left"
  •    
  • cellpadding : untuk mengatur jarak antara tepi sel dengan
    isi sel di dalam sebuah tabel. Contoh:
    cellpadding="10px"
  •    
  • border : untuk mengatur tingkat ketebalan garis tepi pada
    tabel. Contoh :
    border="5px"
  •  
  • cellspacing : untuk mengatur jarak antara sel. Contoh :
    cellspacing="10px"
  •    
  • height : untuk mengatur tinggi tabel. Contoh :
    height="100px"
  •    
  • width : untuk mengatur lebar tabel. Contoh :
    width="200px"
  •  

 

  Sebuah elemen TABLE, juga berisi beberapa elemen yaitu CAPTION, elemen TH (Table Heading), elemen TR (Table Row), serta elemen TD (Tabel Data).
 

 

Caption


Elemen CAPTION berfungsi untuk membuat judul dari sebuah tabel. elemen  ini mempunyai atribut align dengan nilai top (yaitu judul  di simpan di sebelah atas tabel), juga bottom (yaitu judul berada di sebelah bawah dari tabel).

  Misalnya :
 
 


  <caption align="top">


  .................


  </caption>
 

 


  atau

 


  <caption align="bottom">


  .................


  </caption>
 

 

 

TH (Table Header)

Elemen TH(Table Heading) berfungsi sebagai header sel pada sebuah kolom tabel. Atribut yang bisa di pakai antara lain:
 
     
  • align : untuk mengatur tata letak tulisan yang ada pada
    tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan.
    Contoh:

      align="left"
    ,
      align="center"
    ,
      align="right"
  •    
  • valign : untuk mengatur posisi vertikal.
     Contoh:
    valign="top",
    valign="middle",
    valign="bottom"
  •    
  • bgcolor : ntuk mengatur warna background/warna latar
    belakang tabel. Contoh: bgcolor="#00ff00"
  •    
  • colspan : untuk mengatur kolom. Contoh :
    colspan="2"
  •    
  • rowspan : untuk mengatur row atau baris. Contoh:
    rowspan="3"
  •  

 

TR (Table Row)


Elemen TR (Table Row) yaitu untuk membuat baris(row), elemen ini di tempatkan di dalam elemen tabel. Atribut yang bisa di pakai di dalam TR antara lain :
 
  • align : untuk mengatur tata letak tulisan yang ada pada
    tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan.
    Contoh:

      align="left"
    ,
      align="center"
    ,
      align="right"
  •    
  • valign : untuk mengatur posisi vertikal.
     Contoh:
    valign="top",
    valign="middle",
    valign="bottom"
  •    
  • bgcolor : untuk mengatur warna background/warna latar
    belakang tabel. Contoh: bgcolor="#00ff00"
  •  

TD (Table Data)


Elemen TD(Table Data) adalah elemen untuk mengisi data dalam tabel atau bisa juga dikatakan kolom. atribut yang bisa di pakai antara lain :
     
  • align : untuk mengatur tata letak tulisan yang ada pada
    tabel, mau rata kiri, tengah, rata kanan, atau rata kiri-kanan.
    Contoh:

      align="left"
    ,
      align="center"
    ,
      align="right"
  •    
  • valign : untuk mengatur posisi vertikal.
     Contoh:
    valign="top",
    valign="middle",
    valign="bottom"
  •    
  • bgcolor : untuk mengatur warna background/warna latar
    belakang tabel. Contoh: bgcolor="#00ff00"
  •    
  • colspan : untuk mengatur kolom. Contoh:
    colspan="6"
  •    
  • rowspan : untuk mengatur row atau baris. Contoh:
    rowspan="4"
 ========================================================================

  Masih bingung? kalau begitu saya beri beberapa contoh agar sedikit lebih jelas :

  Untuk membuat sebuah tabel tunggal, kodenya seperti ini :
 


 
  <table width="200" border="1">

<tr>

<td>



 www.situsTKJ.co.cc




</td>

</tr>

<table>




Hasilnya seperti ini :





www.situsTKJ.co.cc


========================================================================




Terlihat bahwa tulisan yang ada di dalam tabel, tampak  rata kiri, apabila kita ingin agar tulisan berada persis di tengah tabel, maka cukup tambahkan saja tag align="center" pada kolomnya. Misal seperti ini :


 

 
  <table width="200" border="1">

<tr>

<td align="center">



 www.situsTKJ.co.cc




</td>

</tr>

</table>




Hasilnya seperti ini :





www.situsTKJ.co.cc


========================================================================



Contoh-contoh tersebut menggunakan tebal border 1, coba kita bandingkan apabila kita menggunakan tebal border yang lebih besar, misalnya 5. Kodenya seperti ini :


 

 
  <table width="200" border="5">

<tr>

<td align="center">



 www.situsTKJ.co.cc




</td>

</tr>

</table>




Hasilnya seperti ini :





www.situsTKJ.co.cc



========================================================================




 Jika kita ingin kolomnya bertambah, tinggal tambahkan kode kolomnya. contoh dua kolom, kodenya seperti ini :
 

 
  <table width="300" border="5">

<tr>

<td align="center">


 Klik



</td>

<td align="center">


 www.situsTKJ.co.cc



</td>


</tr>

</table>




Hasilnya  seperti ini :





Klik


www.situsTKJ.co.cc



========================================================================



Kalau ingin dua baris, kodenya seperti ini :

 
  <table width="300" border="5">


<tr>

<td align="center">



 Klik




</td>


<td align="center">



 www.situsTKJ.co.cc




</td>



</tr>



 
<tr>

<td align="center">



 Klik




</td>


<td align="center">



 www.situsTKJ.co.cc




</td>

</tr>

</table>





 hasilnya seperti ini :






Klik

www.situsTKJ.co.cc

Klik

www.situsTKJ.co.cc



========================================================================


Jika tabelnya akan diberi warna, tinggal tambahkan tag bgcolor="kode warna"
contoh :


  <table width="300" border="1" bgcolor="#ff0000">

<tr  bgcolor="#0000ff">

<td align="center">



 Klik




</td>


<td align="center">



 www.situsTKJ.co.cc




</td>



<tr bgcolor="#ff5500">



<tr>

<td align="center">



 Klik




</td>


<td align="center">



 www.situsTKJ.co.cc




</td>

</tr>

</table>




 hasilnya seperti ini :







Klik

www.situsTKJ.co.cc

Klik

www.situsTKJ.co.cc


========================================================================






Sekarang saya beri contoh dengan  mengunakan fungsi caption serta TH (table header). Misalkan saya ingin membuat sebuah tabel data dari nama-nama teknisi. Data-data yang ingin di buatkan tabel, misalkan seperti ini :


                                           
Tabel Karyawan
Data Teknisi
No.Nama
1.Anto
2.Antok
3.Antoro



 

Kode yang di pakai bisa seperti ini :

 
<table align="left" border="2" bgcolor="cyan"
cellpadding="5" cellspacing="0" >

<caption align="top"><b>Tabel Karyawan</b></caption>

<tr bgcolor="fuchsia">

<th colspan="2">Data Teknisi</th>

</tr>

<tr bgcolor="green">

<th>No.</th>

<th>Nama</th>

</tr>

<tr bgcolor="yellow">

<td>1.</td>

<td>Anto</td>

</tr>

<tr bgcolor="red">

<td>2.</td>

<td>Antok</td>

</tr>

<tr bgcolor="blue">

<td>3.</td>

<td>Antoro</td>

</tr>

</table>



  Hasilnya seperti ini :

 
 
Tabel Karyawan
Data Teknisi
No. Nama
1. Anto
2. Antok
3. Antoro

 

   


 

 

 

  ========================================================================
 
Selain untuk memuat tulisan, sebuah tabel pun banyak di gunakan untuk memuat gambar agar terlihat lebih cantik. Contoh :
 
 
 
<table width="300" border="1" cellpadding="20">

    <tr>

<td align="center">

  <a href="http://www.situsTKJ.co.cc/"
target="new"><img 
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>

  </td>

  <td align="center">

  <a href="http://www.situsTKJ.co.cc/"><img
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>

  </td>

  </tr>

  <tr>

  <td align="center">

  <a href="http://www.situsTKJ.co.cc/"><img
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>

  </td>

  <td align="center">

  <a href="http://www.situsTKJ.co.cc/?id=Rohman"
target="new"><img 
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>

  </td>

  </tr>

  </table>

 
     

   Hasilnya seperti ini :

 










 =======================================================================


Jika anda beranggapan bahwa border tabel menggangu pemandangan dan membuat tabel kita menjadi tidak cantik, maka kita bisa mensiasatinya dengan cara menghilangkan garisnya yaitu nilai bordernya kita buat 0.
contoh :

<table width="300"  border="0" cellpadding="20">

    <tr>

<td align="center">

  <a href="http://www.situsTKJ.co.cc/"
target="new"><img 
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>

  </td>

  <td align="center">

  <a href="http://www.situsTKJ.co.cc/"><img
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>

  </td>

  </tr>

  <tr>

  <td align="center">

  <a href="http://www.situsTKJ.co.cc/"><img
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>

  </td>

  <td align="center">

  <a href="http://www.situsTKJ.co.cc/"
target="new"><img 
src="http://i435.photobucket.com/albums/qq77/Daywalkerboy/ArepTuru.jpg" height="58" /></a>

  </td>

  </tr>

  </table>
  

     

   Hasilnya seperti ini :










Bagaimana hasilnya yang terakhir ini, cantik bukan?




Catatan kecil saja. Karena kode diatas merupakan kode HTML, maka padasaat posting harus pada posisi Edit HTML jangan pada posisi Compose. Apabila ingin di simpan di sidebar, pilih yang untuk HTML/javaScript.



 ======================================================================


Sekarang Kita Akan Membuat Tabel Menggunakan Baris Yang Digabung
Contoh :

 



<TABLE border="5" width="200" height="150">

   <TR>

       <TD>SATU>/TD>

       <TD rowspan="2">DUA</TD>

   </TR>



   <TR>

        <TD>TIGA</TD>

   </TR>

</TABLE>


Maka Akan Tampil
                                 
SATUDUA
TIGA



 =======================================================================




Selanjutnya Kita Akan Membuat Tabel Menggunakan Kolom Yang Digabung
Contoh :

 



<TABLE border="5" width="200" height="150">

   <TR>

       <TD>SATU</TD>

       <TD>DUA</TD>

   </TR>



   <TR>

        <TD colspan="2">TIGA</TD>

   </TR>

</TABLE>



Maka Akan Tampil


                                 
SATUDUA
TIGA


 ========================================================================




Dan Yang Terakhir Kita Akan Membuat Kolaborasi Antara Kedua MergeCell Tersebut.

Contoh :

 


<TABLE BORDER="5" WIDTH="200" HEIGHT="150">

   <TR>

        <TD>SATU</TD>

        <TD>DUA</TD>

        <TD rowspan="2">TIGA</TD>

   </TR>



   <TR>

        <TD colspan="2">EMPAT</TD>

   </TR>

</TABLE>




Maka Akan Tampil :


                                           
SATUDUATIGA
EMPAT


 =======================================================================




Rasanya cukup deh untuk hari ini,!



Selamat berusaha !

Artikel Menarik Lainnya :

Ditulis oleh Ant Adm - Senin, Februari 22, 2010

2 komentar untuk "Membuat tabel Menggunakan Bahasa HTML"

Bukan member jg bs komen, Pilih Aja Name/Url.
Urgent Comment Inbox aja ke Facebook.