Cara Membuat Table Dan Fungsi-fungsinya

Tag, Elemen, dan Atribut Table

Ketika ingin menampilkan data dalam bentuk kolom atau baris maka diperlukan tabel. Sebelum adanya CSS, table digunakan untuk membuat layout website. Namun saat ini sudah jarang dipakai sebagai layout kaerna faktor file yang cenderung lebih besar sehingga memengaruhi waktu akses yang lebih lama.

Dalam membuat table, ada 3 elemen utama, yaitu TABLE, TR, dan TD. Tag <table> untuk membuat table, kemudian diikuti dengan tag <TR> untuk membuat baris pada tabel, lalu tag <TD> unuk membuat kolom pada table. kolom-kolom hasil dari TR dan TD ini, disebut dengan table CELL, yaitu sebagai lokasi dimana kita memasukan data-data yang akan ditampilkan.
  
1. <TABLE>
Digunakan untuk mendifinisikan pembuatan table dan memiliki atribut : 

	align	= Perataan : left, center, right
	valign	= Mengatur bentuk perataan secara vertikal
	bgcolor	= mengatur warna latar belakang dari table
	background	= menentukan gambar yang digunakan untuk background table
	color	= mengatur warna suatu sel dalam tabel
	border	= menentukan ukuran border tabel (dalam pixel)
	rowspan	= menggabungkan beberapa baris
	colspan	= menggabungkan beberapa kolom
	cellpadding	= jarak antara isi cell dengan batas cell (dalam pixel)
	cellspacing	= mengatur spasi/jarak antar cell (dalam pixel)
	width	= menentukan lebar tabel dalam pixel atau percent
	height	= menentukan tinggi tabel

2. <TR>
Digunakan untuk membuat baris baru pada tabel dan memiliki atribut :

	align	= Perataan : left, center, right
	valign	= Perataan : top, middle, bottom
	bgcolor	= mengatur warna latar belakang dari baris

3. <TD>
Digunakan untuk membuat kolom baru pada tabel dan memiliki atribut : 

	align	= Perataan : left, center, right
	valign	= Perataan : top, mddle, bottom
	bgcolor	= mengatur warna latar belakang kolom
	background	= menentukan gambar yang digunakan untuk background kolom
	rowspan	= menggabungkan beberapa baris
	colspan	= menggabungkan beberapa kolom
	nowarp	= untuk membuat isi dari kolom tetap berada pada satu baris
	width	= menentukan lebar tabel dalam pixel atau percent
	height	= menentukan tinggi cell dalam pixel

Contoh membuat tabel :

<table border="1">
 <tr>
  <td>Cell 1 - Baris 1 Kolom 1</td>
  <td>Cell 2 - Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Cell 3 - Baris 2 Kolom 1</td>
  <td>Cell 4 - Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Cell 5 - Baris 3 Kolom 1</td>
  <td>Cell 6 - Baris 3 Kolom 2</td>
 </tr> 
</table>

Hasilnya :

Cell 1 - Baris 1 Kolom 1	Cell 2 - Baris 1 Kolom 2
Cell 3 - Baris 2 Kolom 1	Cell 4 - Baris 2 Kolom 2
Cell 5 - Baris 3 Kolom 1	Cell 6 - Baris 3 Kolom 2

Colspan
Colspan digunakan untuk menentukan jumlah kolom yang akan ditarik atau dimerger dalam sel.

<table border="1" width="75%">
 <tr>
  <td colspan="2">Gabungan Kolom 1 & 2 pada Baris 1</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>

Hasilnya :

Gabungan Kolom 1 & 2 pada Baris 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Rowspan
Rowspan digunakan untuk menentukan jumlah kolom yang akan ditarik atau dimerger dalam sel.

<table border="1" width="75%">
 <tr>
  <td rowspan="2">Gabungan Baris 1&amp;2 pada Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
 </tr>
</table>

Hasilnya :

Gabungan Baris 1&2 pada Kolom 1	Baris 1 Kolom 2
	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2