Belajar html Table ( Tabel ).

ke bawah


Table dalam html digunakan untuk mengatur urutan atau susunan klasifikasi data dalam satu format data yang terpadu, sehingga dengan mudah kita dapat melihat data secara akumulatif hanya dengan melihat satu halaman berkas saja.misalnya berupa buku kas, daftar nama, data penduduk dsb.


Tag dasar table

Untuk membuat table yang sederhana, tag pokok yang digunakan terdiri dari Tag <table>, tag <tr> dan tag <td>.

• tag <table>: berfungsi untuk membuat tabel yang selalu diikuti dengan tag <tr> dan tag <td>.
• tag <tr> (table rows) digunakan untuk membuat baris pada tabel.
• tag <td> (table data) berfungsi untuk menulis data sekaligus untuk membuat kolom data.
  
• Ruang yang dihasilkan oleh tr dan td itu disebut table cell. Table cell inilah yang digunakan untuk menyimpan data.
• Untuk berbagai keperluan, ketiga tag diatas dapat dilengkapi dengan atribut-atribut.

Susunan html sederhana untuk membuat tabel adalah sebagai berikut:
<table>

<tr>
<td> susunan dasar table
</td>

</tr>
</table>

Susunan html di atas hanya menghasilkan satu ruang cell saja.
Dan hasilnya seperti ini :

susunan dasar table

Contoh berikut ini adalah cara menulis html untuk membuat tabel dengan 3 baris dan 2 kolom.

<table border="1">
<tr>

<td> cell 1 </td>

<td> cell 2 </td>

</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
<tr>

<td> cell 5 </td>

<td> cell 6 </td>
</tr>
</table>

Dalam contoh ini dicantumkan atribut border: berguna untuk memberikan ketebalan garis, nilai satuan dapat digunakan pixel (px ) atau persen (%).

hasilnya :

cell 1	cell 2
cell 3	cell 4
cell 5	cell 6

Menentukan ukuran tabel
Untuk mengatur lebar tabel digunakan digunakan atribut width dan untuk mengatur tingginya digunakan atribut height, atau menggunakan atribut style dengan properti width dan height. Sedang nilai satuan dapat menggunakan satuan pixel (px) atau persen (%).

Misalnya kita akan mengatur contoh tabel diatas dengan lebar tabel:200px, lebar td (table data):50% dari lebar tabel dan tinggi td pada baris pertama (cell 1 dan 2): 40px. Cara penulisannya seperti ini:

<table border="1" style="width:200px;">
<tr>

<td style="width:50%; height:40px> cell 1 </td>

<td> cell 2 </td>

</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
<tr>

<td> cell 5 </td>

<td> cell 6 </td>

</tr>
</table>
maka hasilnya seperti ini:

cell 1	cell 2
cell 3	cell 4
cell 5	cell 6

Untuk mengatur lebar dan tinggi td, jika kita hanya mengatur pada cell 1 saja, maka secara otomatis tinggi td pada kolom berikutnya mengikuti tinggi td pada cell 1, dan lebar td pada baris berikutnya akan otomatis mengikuti lebar td pada cell diatasnya (cell 1).

Menggabungkan baris dan kolom

Baris-baris dan kolom-kolom dapat digabungkan sesuai kebutuhan.
Untuk menggabungkan 2 kolom atau lebih digunakan atribut collspan dan untuk menggabungkan 2 baris atau lebih digunakan atribut rowspan. Sedangkan nilai dari kedua atribut itu menyatakan berapa baris atau berapa kolom yang akan digabungkan.

Pada contoh berikut cell 1 dan cell 2 dalam baris pertama disatukan (colspan=2).
code html :

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

<tr>

<td colspan="2"> cell 1 dan 2 </td>
</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
</table>

cell 1 dan cell 2
Cell 3	cell 4

Contoh berikut adalah menyatukan cell 1 dan cell 2 pada kolom ke1 (colspan=2)

code html :

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

<tr>

<td width"50%" rowspan="2"> cell 1 dan 3
</td>

<td> cell 2

</td>
</tr>
<tr>
<td> cell 4

</td>
</tr>

</table>
hasilnya :

bidang 1 dan 3	sell 2
	cell 4

Gambar ini menyatukan cell 1 dan cell 3 yang terletak dalam kolom 1 (rowspan=2)

Contoh dibawah ini, dua kolom yaitu: cell 1 dan cell 2 digabungkan (colspan=2), dan dua baris pada kolom ke-1 yaitu: cell 3 dan cell 5 digabungkan (rowspan=2). Dan cara menyusun html-nya seperti ini.

<table border="1" style="width:220px;">
<tr>

<td colspan="2"> cell 1 dan cell 2 </td> </tr>

<tr>

<td rowspan="2"> cell 3 dan cell 5 </td>

<td> cell 4 </td>

</tr>
<tr>

<td> cell 6 </td>

</tr>
</table>
maka hasilnya seperti ini:

cell 1 dan cell 2
cell 3 dan cell 5	cell 4
	cell 6

colspan = 2 dan rowspan = 2

Menentukan jarak cell

Untuk mengatur jarak cell digunakan atribut cellpadding dan atribut cellspacing.

• cellpadding: atribut ini digunakan untuk mengatur jarak pada bagian dalam cell yaitu jarak antara cell dengan text data.
• cellspacing: digunakan untuk mengatur jarak antar cell yaitu jarak bagian luar cell.
  

<table border="1" style="width:160px;" cellpadding="14px" cellspacing="8px" >
<tr>

<td style="width:50%;"> cell 1 </td>

<td> cell 2 </td>

</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
</table>
Pada contoh ini jarak cell diatur dengan cellpadding=14px dan cellspacing=8px. Ukuran cell sengaja dibuat besar dan tidak seimbang, hal ini untuk memperjelas pemahaman penggunaan atribut cellpadding dan cellspacing saja.

maka hasilnya seperti ini:

cell 1	cell 2
cell 3	cell 4

Perhatikanlah :
jarak antara text dengan cell (cellpadding=14px)
jarak antara cell dengan cell (cellspacing=8px).

Membuat judul pada table
Cara untuk membuat tabel yang dilengkapi dengan kop dan judul cell, dalam menulis html-nya menggunakan tag <caption> yang diletakan setelah tag <table> untuk membuat kop dan tag <th> (table header) sebagai ganti dari tag <td> untuk membuat header cell.

Sebagai contoh kita akan membuat tabel dilengkapi dengan kop dan table header.

<table border="1" style="width:200px;">

<caption> tabel contoh </caption>
<tr>

<th> header 1 </th>

<th> header 2 </th>

</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
<tr>

<td> cell 5 </td>

<td> cell 6 </td>

</tr>
</table>

maka hasilnya seperti ini:

tabel contoh

header 1	header 2
cell 3	cell 4
cell 5	cell 6

Secara otomatis tag <caption> dan tag <th> akan membuat text berada di tengah dan huruf tebal.

Membuat background tabel
Pada tabel kita bisa memasang background, baik background dengan warna maupun dengan background gambar.

Untuk membuat background pada tabel, digunakan atribut style yang dipasang pada tag <table> (untuk keseluruhan) dan tag <td> untuk backgroud tiap cell.


Berikut ini cara pemasangannya :

<table border="1" style="background-image:url(..../image.jpg); width:200px;">


<caption> tabel contoh </caption>

<tr>

<th style="background-color:aqua;"> header 1 </th>

<th style="background-color:aqua;"> header 2 </th>

</tr>
<tr>

<td> cell 3 </td>

<td> cell 4 </td>

</tr>
<tr>

<td> cell 5 </td>

<td> cell 6 </td>

</tr>
</table>
Semoga bermanfaat.