HTML untuk Membuat Tabel

Oleh Ade Sanusi

11.19.2008

Bagikan :

Tweet

Untuk membuat Tabel di Blog atau Web, kita memerlukan kode <table> sebagai pembuka dan kode </table> sebagai penutup. didalam kode Table tersebut terdapat dua bagian yaitu <tr></tr> (Table Rows) untuk membuat banyaknya baris kemudian di dalam Table Rows ada kode <td></td> (Table Data) Untuk tempat pengisian data dan menentukan banyaknya kolom pada masing-masing baris (Table Rows).
Contoh Kode Table:

<TABLE>
<TR> <TD>Raha Mutisya</TD>      <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD>     <TD>3829</TD> </TR>
<TR> <TD>Hallie Curry</TD>      <TD>8372</TD> </TR>
<TR> <TD>Shari Silberglitt</TD> <TD>4827</TD> </TR>
</TABLE>
     

Hasil:

Raha Mutisya		1493
Shalom Buraka		3829
Hallie Curry		8372
Shari Silberglitt		4827

Penjelasan: Untuk Membuat Tabel, Pertama Buta Baris dengan menggunakan tag <tr> kemudian isi dengan banyaknya kolom tag<td>dan tutup kode sesuai dengan kode asing masing

<tr><td> kolom ke 1 Baris Pertama </td><td> Kolom ke 2 baris pertama </td><td>Kolom Berikutnya</td></tr>

Itu artinya pada Baris Pertama diisi dengan 3 kolom dan untuk menambahkannya cukup menggunakan tag <td> isi </td>

Parameter Pendukung Table:

Untuk mempercanti Table, ada banyak parameter mulai dari Background, Border, Jarak antar Sel dan lainnya: berikut penjelasannya:

Border: Untuk memberikan Garis Tepi pada tabel. coba lihat dan bandingkan dengan tabel pertama. Penulisannya di dalam tag <table> yaitu <table border="5"> dimana angka lima merupakan besarnya garis tepi dalam pixel.

CellSpacing: Untuk Menentukan jarak Antara garis (border Table dengan garis atau border text (terlihat jarak antar garis terlihat berjauhan) Penulisan kodenya diletakan pada tag <table> yaitu <table cellspacing="10"> dimana angka 10 merupakan besarnya jarak antar sel.

CellPadding: Untuk Menentukan jarak text dengan Garis dalam ( telihat garis dalam dan luar berdekatan dan ada jarak teks dengan garis dalam). Pnulisannya :<table cellpadding="10"> dengan jarak 10 pixel.

Terkadang dalam Membuat tabel, kita menggabungkan beberapa kolom atau baris menjadi satu. untuk itu digunakan kode ColsSpan dan RowSpan

Kode:
<table border="2">
<tr>
<th bgcolor="#99ccff" rowspan="3">Production</th>
<td bgcolor="#ccccff" colspan="2">Name and Code</td>
</tr>
<tr>
<td>Shalom Buraka</td> <td>3829</td>
</tr>
<tr>
<td>Brandy Davis</td> <td>0283</td>
</tr>
<tr>
<th bgcolor="#cccccc" rowspan="2">Sales</th>
<td>Claire Horne</td> <td>4827</td>
</tr>
<tr>
<td>Bruce Eckel</td> <td>7246</td>
</tr>
<tr>
<td>Office</td><td>Danny Zeman</td> <td>5689</td>
</tr>
<tr>
<td colspan="3"><a href="http://dunia-blogger.blogspot.com/">http://dunia-blogger.blogspot.com</a></td>
</tr>
</table>

Production	Name and Code
	Shalom Buraka	3829
	Brandy Davis	0283
Sales	Claire Horne	4827
	Bruce Eckel	7246
Office	Danny Zeman	5689
http://dunia-blogger.blogspot.com

Penjelasan:

• Diberikan Warna pada kode di atas, menunjukan banyaknya baris disini ada baris silahkan cek pada tabel.
  
• Tag <th> (tabel header) penggati tag <td> biasanya untuk menebalkan bagian Umum Suatu Tabel misalnya, No, Keterangan, Jumlah dan lainnya.
  
• Contoh untuk Rowspan adalah bagian"Production dan Sales" sedangkan untuk Colspan adalah bagian "Name and Code" dan "http://dunia-blogger.blogspot.com" untuk memahaminya silahkan perhatikan pada kodenya :)
  

Lebih Lanjut: http://www.htmlcodetutorial.com/tables/ silahkan pelajari lebih banyak di sana.

Tag : HTML dan Java Script, Tutorial