Tips dan Trik Blogger

HTML untuk Membuat Tabel

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.

16 Komentar untuk "HTML untuk Membuat Tabel"

wah, mas keren, tadinya ku cuman tahu kode dasarnya aja. tapi sekarang udah tambah tahu thx yap. eh, lam knal juga

sip sip bisa untuk buat tabel juga yap ternyata om

aaarrgghhh!!! anni3 kapok posting tabel nih Kak...

mas..knpa klo buat tabel jaraknya antara judul tabel dan tabelnya sendiri jaraknya jadi jauh..

koq jarak judul posting dan tabelnya jauh banget ya, gmana nich solusinya

kode nya sama hasilnya koq beda ya???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

ty ya tipnya... saya akan coba moga2 bisa...

iya, jauh,,,,banget malah....pushiiiiing??????

wah jadi nambah ilmu nih. tnks ya
lam knl!!!

KerEn - sUmpaH iNi yang gw caRi2

Makasi ea bro ataz kode2 ny....

nice info..
udah semua blog aku kunjungi nnti di blog ini aku bisa ngerti buat tabel dalam blog..

thanks be4

Top..bngt ne blog
cocok bwt para blogger pemula yg ingin blajar

sama dengan yang lainnya,, sangat membantu,, saya kopi-pastel skripnya, edit sedikit sesuai keinginan, dan ....
jreng..... jadi deh,, makasih banyak, masih perlu banyak belajar mengenai blogging.

Terima Kasih telah Mengunjungi Blog ini dan Silahkan tinggalkan Komentar Anda...

Back To Top