Cara Membuat Tabel di Blog

 Tutorial blogspot, Tutorial wordpress
Cara Membuat Tabel di Blogby Jonoon.Cara Membuat Tabel di BlogTabel memiliki peran penting dalam hal perekaman atau pencatatan data-data. Disni akan saya berikan bagaimana cara membuat tabel di blog menggunakan script HTML, cara ini dapat dilakukan untuk pengguna wordpress maupun blogger. Layaaknya Microsoft word dan excel, kita juga dapat membuat tabel di dalam postingan web secara manual yaitu menggunakan fungsi elemen table HTML. Berbeda […]

cara membuat tabel di blog Tabel memiliki peran penting dalam hal perekaman atau pencatatan data-data. Disni akan saya berikan bagaimana cara membuat tabel di blog menggunakan script HTML, cara ini dapat dilakukan untuk pengguna wordpress maupun blogger.

Layaaknya Microsoft word dan excel, kita juga dapat membuat tabel di dalam postingan web secara manual yaitu menggunakan fungsi elemen table HTML. Berbeda kasus untuk pengguna wordpress self hosting, terdapat banyak plugin yang dapat digunakan untuk membuat tabel di dalam postingan. Akan tetapi secara hirarki penggunaan plugin itu akan memberatka time load, sehingga penggunaannya tidak efektif. Jadi apa salahnya jika penggunana blogspot/blogger, wordpress maupun wordpress self hosting membuat tabel secara manual.

Terdapat 3 elemen utama dalam pembuatan elemen table HTML, diantaranya adalah

  • <table>
    Element ini digunakan untuk menggabungkan anatar <tr> dan <td> sehingga menghasilkan sebuah tabel matriks.
  • <tr>
    Element ini digunakan untuk membuat sebuah baris di dalam tabel. Untuk peletakan script-nya, element <tr> berada didalam element <table>.
  • <td>
    Element ini digunakan untuk membuat sebuah colom di dalam tabel. Untuk peletakan script-nya, element  <td> berada didalam element  <tr>.

Sehingga element  <td> dan <tr> berada di dalam element  <table> maka dihasilkanlah sebuah tabel yang terdiri dari baris dan kolom.

Cara membuat tabel di blog menggunakan HTML

Disini saya tidak akan menjelaskan panjang lebar mengenai cara pembuatan table secara rinci. Langsung saja ke contoh, karena dengan contoh anda akan lebih mengeerti bagaimana penerapannya di dalam script/kode HTML.

Perlu diketahui bahwa tabel itu terdiri dari baris dan kolom, maka untuk membuat sebuah tabel di perlukan penggabungan antara baris dan kolom sehingga menghasilkan sebuah tabel matriks.

1. Membuat baris/row
Sebuah tabel terdiri  dari kumpulan beberapa baris atau rows. Baris atau row merupakan elemen tabel  yang tersusun kebawah. Lihat contoh baris berikut,

Data atau Isi

Penerapannya di dalam HTML akan seperti ini.

<table width="100%" border="0.5" bgcolor="#000000">
<tbody>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Data atau Isi</span></td>
</tr>
</tbody>
</table>

2. Membuat kolom/colom
Dikatakan tabel sudah pasti memiliki kolom. Kolom merupakan elemen tabel yang tersusun ke samping. Untuk lebih jelasnya lihat contoh berikut,

Data atau Isi Data atau Isi Data atau Isi Data atau Isi

Penerapannya di dalam HTML akan seperti ini.

<table width="100%" border="0.5" bgcolor="#000000">
<tbody>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Data atau Isi</span></td>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Data atau Isi</span></td>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Data atau Isi</span></td>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Data atau Isi</span></td>
</tr>
</tbody>
</table>

3. Penggabungan antara baris dan kolom
Untuk menghasilkan sebuah tabel yang terdiri dari beberapa kolom dan baris maka script yang telah saya jelaskan diatas digabung menjadi satu, hasilnya akan seperti ini.

No Nama Tempat & Tanggal Lahir Alamat
1 Hendro Rudiansyah Pematangsiantar, 31 Juli 1990 Yogyakarta, Sleman
2 Ferdy Pebrianto Medan, 07 February 1989 Yogyakarta, Sleman
3 M. Nurul Qadri Pematangsiantar, 22 Agustus 1990 Jakarta Selatan
4 Angger Dwi Elriyanta Bantul, 20 Juni 1989 Sewon Bantul

Penerapannya di dalam HTML akan seperti ini.

<table width="100%" border="1" bgcolor="#000000">
<tbody>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#A5FF8A" width="auto"><span style="color: #000000;">No</span></td>
<td style="text-align: center;" align="center" valign="top" bgcolor="#A5FF8A" width="auto"><span style="color: #000000;">Nama</span></td>
<td style="text-align: center;" align="center" valign="top" bgcolor="#A5FF8A" width="auto"><span style="color: #000000;">Tempat &amp; Tanggal Lahir</span></td>
<td style="text-align: center;" align="center" valign="top" bgcolor="#A5FF8A" width="auto"><span style="color: #000000;">Alamat</span></td>
</tr>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto">1</td>
<td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Hendro Rudiansyah</td>
<td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Pematangsiantar, 31 Juli 1990</td>
<td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Yogyakarta, Sleman</td>
</tr>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">2</td>
<td style="text-align: left;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">Ferdy Pebrianto</td>
<td style="text-align: left;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">Medan, 07 February 1989</td>
<td style="text-align: left;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">Yogyakarta, Sleman</td>
</tr>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto">3</td>
<td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">M. Nurul Qadri</td>
<td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Pematangsiantar, 22 Agustus 1990</td>
<td style="text-align: left;" align="center" valign="top" bgcolor="#ffffff" width="auto">Jakarta Selatan</td>
</tr>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">4</td>
<td style="text-align: left;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">Angger Dwi Elriyanta</td>
<td style="text-align: left;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">Bantul, 20 Juni 1989</td>
<td style="text-align: left;" align="center" valign="top" bgcolor="#CCDDFF" width="auto">Sewon Bantul</td>
</tr>
</tbody>
</table>

Sekian dulu cara membuat tabel di blog menggunakan script HTML, silahkan anda berkreasi sendiri dengan warna sehingga memperoleh tampilan yang lebih menarik.

Author: 

Saya adalah pemilik Kaplik.Com, Tujuan saya menulis adalah untuk berbagi pengetahuan maupun pengalaman kepada semua pembaca. Buat yang ingin tanya-tanya bisa langsung Contact ke Google +1, atau bisa melalui facebook. Thanks...

12 Responses

  1. Direktori Penerjemah Indonesia10/10/2012 at 23:42Reply

    Ijin nyoba dulu tutor bagusnya, mas…thanks dah sharing.
    Salam kenal dari Direktori Penerjemah Indonesia

  2. Hardy Albana29/01/2013 at 17:31Reply

    ttor yang bagus dan berbobot Gan,,,,

Leave a Reply