Cara Membuat Tabel Dengan Heading Di Blogger

Bingung cara membuat tabel di blogger lihat saja cara membuat tabel di blog. Setelah dua artikel tentang tabel kembali saya memainkan jari untuk membuat artikel tentang cara tabel dengan heading. Tabel dengan heading maksudnya tabel yang ada kepalanya. Apa mungkin ada kakinya? Tunggu lentikan jari saya selanjutnya. Untuk sekarang ini cukup tabel dengan kepala saja.

Tabel dengan heading sangat bermanfaat jika ingin membuat tabel komplit dimana bagian keterangan isi tabel mempunyai bentuk dan ukuran huruf yang berbeda. Sebenarnya heading bisa dibuat dengan memberi value berbeda pada tr yang diinginkan menjadi heading namun dengan cara dibawah ini kita bisa otomatis membuat heading.

Artikel lainnya yang mungkin menarik untuk anda
Bagaimana Cara Mendaftar di TokoBagus

Tiga Flatform Komentar Untuk Blogger

Spesial 5 Group Blogwalking Di Facebook 

 Kunci membuat heading pada tabel adalah dengan menggunakan properti "th". Contoh tabel dengan heading

tabel	tabel	tabel	tabel
tabel	tabel	tabel	tabel
tabel	tabel	tabel	tabel
tabel	tabel	tabel	tabel

Lihat perbedaan tabel dengan atau tanpa heading. Anda bisa mengisi keterangan isi tabel, misalnya saat membuat tabel haji pegawai. Kita bisa mengisi kolom heading dengan nama, lama bekerja, dan jumlah gaji. Code tabel diatas adalah :

<table border="1" bordercolor="#ffffff"

cellpadding="6" cellspacing="0" style="border-collapse: collapse; color:

#4f4f4f; text-align: center; width: 80%;"> <tbody>

<tr>

<th style="background-color: #81AEFF;">heading</th>

<th style="background-color: #81AEFF;">heading</th>

<th style="background-color: #81AEFF;">heading</th>

<th style="background-color: #81AEFF;">heading</th>

</tr>

<tr>

<td style="background-color: #b5d7f8;">tabel</td>

<td style="background-color: #d3e7fb;">tabel</td>

<td style="background-color: #b5d7f8;">tabel</td>

<td style="background-color: #d3e7fb;">tabel</td>

</tr>

<tr>

<td style="background-color: #b5d7f8;">tabel</td>

<td style="background-color: #d3e7fb;">tabel</td>

<td style="background-color: #b5d7f8;">tabel</td>

<td style="background-color: #d3e7fb;">tabel</td>

</tr>

<tr>

<td style="background-color: #b5d7f8;">tabel</td>

<td style="background-color: #d3e7fb;">tabel</td>

<td style="background-color: #b5d7f8;">tabel</td>

<td style="background-color: #d3e7fb;">tabel</td>

</tr>

</tbody></table>

Nah sekarang anda sudah tau cara membuat tabel dengan heading. Silahkan dicoba-coba dulu kalau lupa bisa copy paste code diatas, selamat berkreasi...

Cara Membuat Tabel Warna Warni Di BlogSpot

Jika anda sudah tau cara membuat tabel sederhana di Blogger maka selanjutnya silahkan belajar membuat tabel yang lebih cantik. Tabel bisa diberikan warna sesuai dengan keinginan. Kita bisa menggunakan warna latar dan huruf yang berbeda-beda. Menurut saya wara tabel lebih bagus kalau disesuiakan dengan warna template  blog kita agar lebih menarik dan tidak terlalu mencolok.

Siapa yang tidak mau blognya cantik dan rapi. Tabel adalah salah satu unsur yang berperan agar postingan tampak lebih rapi disaat anda ingin membuat artikel yang berisi list. Beberapa list bisa digabungkan menjadi satu dengan menggunakan tabel misalnya anda ingin membuat list harga produk yang anda jual di Tokobagus.

Tabel yang bagus adalah tabel yang mampu dibaca untuk itu perlu warna dan huruf yang tepat agar antara warna latar dan warna huruf tidak sama sehingga tulisan tidak terbaca. Berikut beberapa contoh tabel warna-warni untuk blog.

Tabel Dua Warna Horizontal

tabel	tabel	tabel
tabel	tabel	tabel
tabel	tabel	tabel
tabel	tabel	tabel

Code tabel di atas adalah yang dibawah ini :

<table border="1" bordercolor="#ffffff"
cellpadding="6" cellspacing="0" style="border-collapse: collapse; text-align: center; width: 80%;
color:#4f4f4f;">
<tbody>
<tr style="background-color: #b5d7f8;">
<td>tabel</td>
<td>tabel</td>
<td>tabel</td>
</tr>
<tr style="background-color: #d3e7fb;">
<td>tabel</td>
<td>tabel</td>
<td>tabel</td>
</tr>
<tr style="background-color: #b5d7f8;">
<td>tabel</td>
<td>tabel</td>
<td>tabel</td>
</tr>
<tr style="background-color: #d3e7fb;">
<td>tabel</td>
<td>tabel</td>
<td>tabel</td>
</tr>
</tbody></table>

Tabel diatas bisa anda hilangkan bordernya dengan cara memeberi nilai 0 pada border. Jika ingin mengganti warna huruf bisa mengganti nilai dari "color". Dengan tabel diatas maka baris akan lebih jelas terlihat ini cocok untuk tabel yang memiliki banyak kolom sehingga mata kita bisa menarik garis lurus kesamping karena warna latarnya sama.

Tabel Dua Warna Vertical

tabel	tabel	tabel	tabel
tabel	tabel	tabel	tabel
tabel	tabel	tabel	tabel

Code tabel diatas adalah sebagai berikut :

<table border="1" bordercolor="#ffffff"
cellpadding="6"
cellspacing="0" style="border-collapse: collapse; color: #4f4f4f; text-align: center; width: 80%;">
<tbody>
<tr>
<td style="background-color: #b5d7f8;">tabel</td>
<td style="background-color: #d3e7fb;">tabel</td>
<td style="background-color: #b5d7f8;">tabel</td>
<td style="background-color: #d3e7fb;">tabel</td>
</tr>
<tr>
<td style="background-color: #b5d7f8;">tabel</td>
<td style="background-color: #d3e7fb;">tabel</td>
<td style="background-color: #b5d7f8;">tabel</td>
<td style="background-color: #d3e7fb;">tabel</td>
</tr>
<tr>
<td style="background-color: #b5d7f8;">tabel</td>
<td style="background-color: #d3e7fb;">tabel</td>
<td style="background-color: #b5d7f8;">tabel</td>
<td style="background-color: #d3e7fb;">tabel</td>
</tr>
</tbody></table>

Silahkan berkreasi dengan warna dan bentuk tabel sesuai dengan keinginan anda. Anda bisa mencoba-coba merubaha beberapa elemen tabel diatas dan menambahkan properti style lainnya. Selamat mencoba...

Cara Membuat Tabel Di Blogger

Saya masih ingat dulu kalau membuat tabel di Blogger biasanya melorot ke bawah pas di save, tapi sekarang sudah tidak lagi. Kita bisa membuat table tanpa harus menambahkan code lain selain code tabel. Sudah beberapa kali membuat tabel kadang-kadang masih lupa juga, makanya saya membuat  postingan ini untuk contekan saat membuat tabel setelah sebelumnya membuat postingan tentang contest seo bank mandiri.

Tabel sangat berguna saat membuat list atau kolom-kolom data sehingga tampilan data kita akan lebih bagus dan mudah dibaca oleh pengunjung blog. Misalnya anda ingin membuat blog yang berisi list harga dan nama produk karena anda punya toko di Tokobagus dan ingin promosi di blog menggunakan tabel harga.

Cara membuat tabel sederhana di Blogger

Sekarang kita membuat tabel sederhana untuk memahami struktur tabel secara umum. Tabel sederhana bentuknya seperti ini:

A baris 1 kolom 1	C baris 1 kolom 2
B baris 2 kolom 1	D baris 2 kolom 2

Code tabel di atas adalah seperti yang dibawah ini:

<table border="2">
<tr>
<td>baris 1 kolom 1</td>
<td>baris 1 kolom 2</td>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
</table>

Nah untuk lebih memahami code diatas berikut penjelasannya:
tr = untuk membuat baris
td = untuk membuat kolom

Jika masih bingung dengan mana baris dan mana kolom coba perhatikan tabel diatas baris itu horisontal sedangkan kolom itu vertikal. Pada tabel diatas kotak A merupakan baris pertama kolom pertama sedangkan C adalah baris pertama kolom kedua.

Berkreasi dengan tabel di Blogger

Selain tabel sederhana kita juga bisa berkreasi sesuai dengan keinginan. Kita bisa mengatur warna latar, warna huruf, lebar tabel dan lain-lain. Contoh kreasinya seperti dibawah ini:

<table border="1" bordercolor="#ffffff" cellpadding="10" cellspacing="0" style="background-color: #e0ecf8; border-collapse: collapse; width: 80%;">
<tbody>
<tr>
<td style="text-align: center;>tabel</td>
<td style="text-align: center;">tabel</td>
<td style="text-align: center;">tabel</td>
</tr>
<tr>
<td style="text-align: center;">tabel</td>
<td style="text-align: center;">tabel</td>
<td style="text-align: center;">tabel</td>
</tr>
</tbody></table>

Hasilnya akan seperti dibawah ini:

tabel cell	tabel cell	tabel cell
tabel cell	tabel cell	tabel cell

Berikut penjelasan code diatas:
Cellpadding = Jarak antara tulisan dengan border atau dinding cell
Cellspacing =  Jarak antar cell atau jarak antar kolom satu dengan kolom lainnya
Boder-collapse =  Menjadikan boder hanya satu garis tidak seperti pada tabel paling atas

Cobalah kreasi anda sendiri dengan mengubah warna latar atau warna border. Anda bisa menyesuaikan warna dengan warna template anda sehingga tampilannya lebih menarik. Selain membuat code sendiri anda juga bisa mendapatkan code dengan tabel generator. Anda bisa membuatnya disini.