Cara Membuat Tabel pada HTML

Tabel adalah sarana untuk menampilkan informasi yang terstruktur dalam sebuah field/kolom dan recorr/baris. Pada tabel terdapat sekumpulan informasi yang memiliki kategori sama sehingga dapat dikelompokkan dalam sebuah field/kolom. Masing-masing informasi tersebut disusun satu per satu dalam beberapa baris. Jadi dalam sebuah tabel terdapat dua untus utama yaitu field atau kolom dan record atau baris.

Untuk membuat tabel pada HTML dipakai tag <table>...</table>. Didalam tag <table>...</table>disisipi tag<tr>...</tr> untuk membuat baris dan didalam tag <tr>...</tr> disisipi tag <td>...</td> untuk membuat kolom. Khusus untuk baris paling atas yang biasanya berisi nama kolom bisa digunakan tag <th>...</th>.

Berikut ini contoh script HTML sederhana untuk membuat tabel dengan 2 kolom 3 baris:

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

Dan berikut tampilan script pada browser :

Nama Kolom 1	Nama Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Tag <table> dan atributnya

Dalam tag <table> terdapat beberapa atribut yang digunakan untuk mengatur beberapa parameter tabel, seperti border untuk mengatur tampilan border, width untuk mengatur lebar tabel dan bgcolor untuk mewarnai background tabel.

Contoh cara menggunakan atribut pada tag <table> :

  <table border=1 width=100% bgcolor=yellow >

Tag <tr> dan atributnya

Tag <tr> merupakan singkatan dari table row. Dalam tag <tr> juga terdapat atribut yang dipakai misalnya height untuk mengatur tinggi baris, align untuk mengatur posisi text dan juga bgcolor yang berbeda dari atribut tabelnya.

Contoh cara menggunakan atribut pada tag <tr> :

  <tr height="50px" align="center" bgcolor=green >

Tag <th>, <td> dan atributnya

Tag <td> merupakan singkatan dari table data sedangka <th> merupakan singkatan dari table heading. Tag <th> biasa dipakai untuk menyatakan nama kolom yang biasanya terletak padada posisi paling atas tabel. Atribut pada tag <td> dan <th> ini digunakan untuk mengatur beberapa parameter seperti width untuk mengatur lebar kolom, align untuk mengatur posisi text dalam satu cell dan bgcolor untuk background warna tersendiri terpisah dari background tabel dan baris.

Contoh cara menggunakan atribut pada tag <td> dan <th> :

  <tr width="100px" align="right" bgcolor=blue >

Tag <caption> pada tabel

Tag <caption> ini dipakai untuk menampilkan title dari sebuah tabel. Tag <caption>...</caption> harus diletakkan langsung setelah tag <table>.

Contoh rangkuman script tabel diatas beserta caption-nya:

 <!DOCTYPE html>  
 <html>  
 <head>  
 <title>Belajar membuat tabel pada HTML</title>  
 <body>  
  <table border=1 width=100% bgcolor=yellow >   
  <caption>Tabel Latihan HTML</caption>  
  <tr align="right" height="50px" bgcolor=green>   
  <th width="300px" bgcolor=blue>Nama Kolom 1 backgroung biru</th>   
  <th>Nama Kolom 2 dengan background mengikuti atribut tr</th>   
  </tr>   
  <tr>   
  <td>Baris 1 Kolom 1</td>   
  <td>Baris 1 Kolom 2</td>   
  </tr>   
  <tr>   
  <td>Baris 2 Kolom 1</td>   
  <td>Baris 2 Kolom 2</td>   
  </tr><tr>   
  <td>Baris 3 Kolom 1</td>   
  <td>Baris 3 Kolom 2</td>   
  </tr>   
  </table>   
 </body>  
 </html>

Dan berikut tampilan script diatas pada browser: