Membuat Tabel di Postingan 2

Membuat Tabel di Postingan 2 ~ Pada postingan terdahulu saya pernah share sebuah Blogger Tutorial mengenai Membuat Tabel di Postingan blog, dan pada saat saya publish artikelnya eh tabelnya tidak kelihatan, hanya isi tabel saja yang kelihatan/muncul dipostingan sehingga saya mengganti contohnya dengan sebuah gambar. Setelah saya bertanya pada salah satu sobat blogger saya si iskaruji dot com, ternyata ada beberapa template yang tidak bisa menampilkan tabel dengan kode script tabel biasa dan harus menambahkan sebuah kode CSS.

Teks 1	Teks 2	Teks 3
Teks 1	Teks 2	Teks 3
Teks 1	Teks 2	Teks 3

Jika ada diantara para sobat blogger yang jenis template blognya sama seperti jenis template blog saya yang tidak bisa menampilkan tabel dan ingin menampilkan tabel saat melakukan posting sebuah tabel, Silahkan kalian ikuti langkah-langkah berikut.

1. Login ke akun blogger kalian, bisa klik Disini, Pilih Rancangan >> Lalu klik Edit HTML

2. Jika sudah, cari kode ]]></b:skin>, untuk mempercepat pencarian gunakan Ctrl+F, kemudian copy kode CSS di bawah ini dan paste di bawah kode ]]></b:skin>

<style type='text/css'>
table, td, th
{
border:1px solid #ffffff;
}
th
{
background-color:#cc0000 ;
color:white;
}
td
{
text-align:center;
}
th
{
text-align:center;
}
</style>

border:1px solid #ffffff

1px adalah ukuran besar kecilnya border/garis pinggir tabel dan #ffffff adalah kode warnanya kalian bisa ubah sesuaikan dengan warna template kalian

background-color:#cc0000

Kode ini adalah kode warna untuk background tabelnya

3. Terakhir setelah rampung semua klik Simpan template

4. Untuk pemanggilan kode CSSnya, silahkan kalian copas kode dibawah ini ke dalam postingan, pastenya di posisi Edit Html bukan posisi Compose

<table style="width: 500px;"><tbody><tr>
<th style="text-align: center;">Teks 1</th>
<th style="text-align: center;">Teks 2</th>
<th style="text-align: center;">Teks 3</th>
</tr>
<tr>
<td style="text-align: center;">Teks 1</td>
<td style="text-align: center;">Teks 2</td>
<td style="text-align: center;">Teks 3</td>
</tr>
<tr>
<td style="text-align: center;">Teks 1</td>
<td style="text-align: center;">Teks 2</td>
<td style="text-align: center;">Teks 3</td>
</tr>
</tbody></table>

width: 500px adalah lebar tabel bisa kalian sesuaikan dengan keinginan kalian
Untuk menambah kolom  lihat saja teks 1 sampai 3, cukup tambahkan kode yang sama dibawahnya contoh

<td style="text-align: center;">Teks 4</td>

Untuk menambahkan baris juga cukup dengan menambahkan kode yang sama, contoh

<tr>
<td style="text-align: center;">Teks 1</td>
<td style="text-align: center;">Teks 2</td>
<td style="text-align: center;">Teks 3</td>
</tr>

Taruh kode diatas di bawah kode </tr>

Yang perlu diperhatikan yaitu kode <td style dan <th style perhatikan kodenya secara seksama.

Semoga cara membuat tabel dengan penambahan kode CSS di template ini bermanfaat.
Happy blogging