Cara Membuat Postingan Tabel Dengan Kode Html (PART 2)

Tujuan utama tabel adalah menyajikan informasi data pada bidang datar. Dalam lingkup internet, unsur yg membangun sebuah tabel adalah tags html. Tidak hanya itu, kemampuan tags html tabel juga difungsikan untuk mendesain layout tambahan, sebab html memiliki kemampuan tata letak. Pengaplikasiannyapun entah itu dalam membangun website atau blog, bahkan saat ini html tabel juga di gunakan sebagai skin pada situs friendster versi mobile sebagai tata letak yang di bubuhi dengan kode css atau JavaScript. jadi singkatnya semua itu menggunakan jenis tags html yang sama.

Sebelumnya saya juga pernah menulis artikel tentang cara membuat postingan tabel dengan html yang memungkinkan kita untuk memahami dasar-dasar dari tiap-tiap tags html dalam membangun sebuah tabel. Dan di sini adalah kelanjutan dari pokok pembahasan pada artikel kemarin.

Memang pada awalnya akan terasa sulit dengan tags yang begiu rumit, tetapi setelah Anda mengikuti tutorial ini, Anda akan melihat bagaimana mereka tidak seburuk yang sedang Anda pikirkan saat ini, he...he....


Sebagai dasar, yg harus diketahui adalah tag <table> yang di lanjutkan dengan tag <tr> dan <td>. Meskipun ada bermacam-macam tag lain dalam html tabel, tapi ini adalah dasar-dasar utama (sangat penting) untuk membuat sebuah tabel dengan html.

• <table> adalah tag untuk mengawali sebuah tabel
• <tr> adalah elemen baris tabel
• <td>adalah elemen sel atau kolom dlm tabel
  

DASAR TAGS TABEL

Berawal dari tabel berikut sbg dasar.

baris 1 kolom 1	baris 1 kolom 2
baris 2 kolom 2	baris 2 kolom 3

Kode html :

<table border="1">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<tr>
<td>baris 2 kolom 2</td>
<td>baris 2 kolom 3</td>
</tr>
</table>

Atribut border tabel dapat di atur ketebalannya, ini terkait dengan cellspadding, cellspacing dan width.

baris 1 kolom 1	baris 1 kolom 2
baris 2 kolom 1	baris 2 kolom 2

Kode html :

<table border="1"cellpadding="5"cellspacing="5"width="100%">
<tr>
<td width="20%">baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
<tr>
<td width="20%">baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>

Selain pada table, atribut seperti cellpadding |cellspacing | width dapat juga di tambahkan pada tag tr dan tr dan Anda menetapkan setiap lebar, tebal dalam kolom tabel.

Width dapat di tntukan dengan pixel (px) atau persentase (%), menentukan nilai width dgn (px) akan lebih tepat, sedangkan (%) tergantung lebar halaman. Contoh, jika lebar halaman 1000px maka untuk membuat lebar tabel (width) 1/2 dari itu adalah 50%, demikian dan seterusnya.

ELEMEN HEADHER DALAM TABEL
Memasukan kolom headher pada tabel akan menampilkan isi headher sedikit berbeda dengan isi di bawah baris kolom headher tersebut. Tag th adalah kuncinya, bagaimana cara memformatnya ? Perhatikan cara penempatan tag th berikut ini :

kolom headher 1	kolom headher 2
baris 2 kolom 1	baris 2 kolom 2

kode html :

<table border="1"cellpadding="5"cellspacing="5"width="100">
<tr>
<th>kolom headher 1</th>
<th>kolom headher 2</th>
</tr>
<tr>
<td width="20%">baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
<tr>
</table>

COLSPAN KOLOM

Membuat kolom span pada tabel anda dapat memakai atribut span.

kolom headher
baris 2 kolom 1	baris 2 kolom 2

Kode html :

<table border="1"cellpadding="5"cellspacing="5"width="100%">
<tr>
<th colspan="2">kolom headher</th>
</tr>
<tr>
<td width="20%">baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>

ROWSPAN

Dengan atribut rowspan, memungkinkan kolom span berada di antara beberapa baris tabel.

kolom headher		kolom baris 1
	kolom baris 2

Kode html :

<table border="1"cellpadding="5"cellspacing="5"width="100%">
<tr>
<th rowspan="2">kolom headher
<th>
<td>kolom baris 1</td>
</tr>
<tr>
<td>kolom baris 2</td>
</tr>
</table>

KOLOM SPASI (CELLSPACING)

Atribut cellpadding dan cellspacing memungkinkan kita menyesuaikan spasi pada tabel. Cellspacing mendefinisikan lebar batas, cellpadding mewakili jarak antara kolom-kolom tabel dan konten di dalamnya.

baris 1 kolom 1	baris 1 kolom 2
baris 2 kolom 1	baris 2 kolom 2
baris 3 kolom 1	baris 3 kolom 2

Kode html :

<table border="1"cellspacing="10">
<tr>
<th>baris 1 kolom 1</th>
<th>baris 1 kolom 2</th>
</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>

CONTOH LAIN

Intinya adalah, rowspan span untuk beberapa baris sedangkan colspan untuk beberapa kolom.

kolom 1	kolom 2	kolom 3
baris 1 sel 1	baris 1 sel 2	baris 1 sel 3
	row 2 sel 2	row 2 sel 3
baris 3 sel 1

Kode html :

<table border="1">
<tr>
<th>kolom 1</th>
<th>kolom 2</th>
<th>kolom 3</th>
</tr>
<tr><td rowspan="2">baris 1 sel 1</td>
<td>baris 1 sel 2</td><td>baris 1 sel 3</td></tr>
<tr><td>row 2 sel 2</td><td>row 2 sel 3</td></tr>
<tr><td colspan="3">baris 3 sel 1</td></tr>
</table>

PEWARNAAN

Penerapan warna dapat di lakukan dengan kode CSS, bukan saja warna, tapi anda juga dapat menerapkan CSS lain seperti lebar tabel, tingi tabel, tatalelak tabel, dimensi kolom, dan mungkin kreasi lain yang sedang anda pikirkan saat ini.

Judul Tabel

HEADHER TABEL	sel tabel 1
	sel tabel 2

Kode html :

<table border="1"cellpadding="5"cellspacing="5"width="100%"><tr><th style="color:#ff0000;background-color:#00ffff;"rowspan="2">HEADHER TABEL</th><td>sel tabel 1</td></tr><tr>Judul Tabel<td>sel tabel 2</td></tr></table>

Nah, gimana ? Cukup simple kan ?