1 Cara Membuat Tabel Pada Blog Berbasis WordPress


Kesempatan ini saya mau sharing Cara Membuat Tabel Pada Blog BerbasisWordPress.com. Untuk WordPress.org atau yang sudah Self Hosting, dalam membuat tabel bisa memanfaatkan plugin wp-table. Untuk WordPress.com memang banyak yang yang kita tempuh dalam membuat tabel, diantaranya kita bisa melakukan cara membuat konsep materi pada Microsoft Word. Setelah itu materi tersebut kita copy dan paste pada Tulisan Posting WordPress. Disini saya tidak akan membahas secara rinci langkah tersebut, dalam membuat tabel untuk blog berbasis WordPress yang akan saya terangkan yaitu dengan tehnik penerapan script HTML. Bagaimana penasaran … ? Silahkan simak saja sampai selesai artikel ini … :)
Pada dasarnya dalam membuat tabel, memakai script seperti :
<table width="100%" border="1" bgcolor="#000000">
<tbody>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
</tr>
</tbody>
</table>
|
*) Setiap script yang berwarna merah, silahkan rubah sesuai kebutuhan. Dan ingat script tersebut meski anda tempatkan pada mode HTML bukan Visual.
Dari script diatas, tabel yang dihasilkan seperti di bawah ini :
Tulisan Anda
Untuk satu kolom tabel, memiliki script seperti ini :
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
|
Jadi jika anda ingin menambah jumlah kolom tabel kesamping, maka yang diperbanyak adalah script tersebut diatas. Contoh :
Tulisan AndaTulisan AndaTulisan AndaTulisan Anda
Maka scriptnya adalah kira-kira seperti ini :
<table width="100%" border="1" bgcolor="#000000">
<tbody>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
</tr>
</tbody>
</table>
|
Selanjutnya, jika anda ingin menambahkan kolom tabel ke bawah, tempatkan script diatas dengan diapit script seperti ini :
<tr>Script Table</tr>
Contoh :
Tulisan Anda
Tulisan Anda
Tulisan Anda
Tulisan Anda
Maka scriptnya adalah kira-kira seperti ini :
<table width="100%" border="1" bgcolor="#000000">
<tbody>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
</tr>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
</tr>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
</tr>
<tr>
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff" width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
</tr>
</tbody>
</table>
|
Agar terlihat lebih menarik, anda bisa memodifikasi tabel dengan diberi warna background. Perhatikan script di bawah ini :
<td style="text-align: center;" align="center" valign="top" bgcolor="#ffffff"width="auto"><span style="color: #000000;">Tulisan Anda</span></td>
|
bgcolor="#ffffff" = Untuk warna Background
style="color: #000000;" = Untuk warna Huruf
Sedangkan, untuk kode masing-masing warna bisa anda lihat disini …
NoNamaTempat & Tanggal LahirAlamat
1Muhamad RusdiBandung, 23 Januari 2002Cianjur Selatan
2Agung GumelarCianjur, 12 Desember 2003Bandung Barat
3Nanda Dewi SaputraJakarta, 10 Juli 2000Jakarta Utara
4Muhammad Aziz KurniawanBogor, 11 Nopember 2001Bogor
5Prabowo Susilo YudhoyonoSukabumi, 08 Oktober 2004Sukabumi
Selamat mencoba dan semoga bermanfaat …
Credit By : Rahman De Cheaterz


RB Related Post:

1 komentar:

GstarCAD mengatakan...

Thanks for share

Poskan Komentar

Saya Mohon Maaf Kalau Komentar Anda Tidak Saya Balas Karena Ada Urusan Di Dunia Nyata
Silahkan Liat Gambar Komentar Di Bawah ini

™Selamat Datang Sobat!Kunjungan Anda Sangat Berarti Bagi Saya. Dan Jangan Lupa Juga Kunjungin Balik Ya Blog Saya.™
 
--= [ Copyright © 2012 Rahman Chandra Modified By Rahman Blog Powered By Blogger ] =--