Cara Membuat Tabel Pada Blog Berbasis WordPress

8 April 2012 67 Komentar

Kesempatan ini saya mau sharing Cara Membuat Tabel Pada Blog Berbasis WordPress.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 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>
<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 …

No Nama Tempat & Tanggal Lahir Alamat
1 Muhamad Rusdi Bandung, 23 Januari 2002 Cianjur Selatan
2 Agung Gumelar Cianjur, 12 Desember 2003 Bandung Barat
3 Nanda Dewi Saputra Jakarta, 10 Juli 2000 Jakarta Utara
4 Muhammad Aziz Kurniawan Bogor, 11 Nopember 2001 Bogor
5 Prabowo Susilo Yudhoyono Sukabumi, 08 Oktober 2004 Sukabumi

Selamat mencoba dan semoga bermanfaat …

Baca Artikel Lain :

About these ads

Disimpan dalam Tutorial Dikaitkatakan dengan , , , , , , ,

Perihal onesetia82
Blog sederhana ini berisi tentang berbagai informasi yang hubungannya dengan Software dan Aplikasi Komputer, Tips dan Tricks, Tutorial, serta Info menarik lainnya. Ma'af jika dalam pembenahan bahasa dan susunan kata pada setiap artikel kurang layak dibaca, karena hanya Sekedar Menuruti Kata Hati . . . Selengkapnya ==>

67 Tanggapan untuk Cara Membuat Tabel Pada Blog Berbasis WordPress

← Komentar terdahulu

  1. Ping-balik: Bacaan Menarik « SUPRIYANTO Blog

  2. Hendra mengatakan:
    19 Oktober 2012 pada 14:03

    trimakasih banyak atas ilmunya

    Balas
  3. dzhoelkifli mengatakan:
    31 Oktober 2012 pada 20:54

    makasi atas ilmunya

    Balas

  4. Ping-balik: TUTORIAL | MULTIMEDIA DESIGN

← Komentar terdahulu

Beri Komentar Seikhlasnya Saja ==>

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out / Ubah )

Twitter picture

You are commenting using your Twitter account. ( Log Out / Ubah )

Facebook photo

You are commenting using your Facebook account. ( Log Out / Ubah )

Batal

Connecting to %s

%d bloggers like this: