Headline

Buat sobat blogger yang menjumpai komentar kasar dan mengatasnamakan OzieCyber, silahkan baca dan laporkan disini.
Unduh Adobe Flash player

close

~Affiliates~

 

Bantu saya vote +1 pada tombol google plus di bawah!!

×

flang counter

free counters

Custom Tabel

Nah berikut ini tips mempercantik tabel di blog, mungkin sobat ada yang menggunakan tabel untuk membuat suatu artikel dipostingan. Pasti sobat juga pengen dong membuat style table tersebut terlihat menarik dan gak monoton. Nah kali ini saya akan berbagi tips sederhana membuat tabel sedikit menarik dan terlihat tidak membosankan. Karena dengan membuat postingan tampil cantik dan menarik pasti akan membuat pengunjung blog akan merasa betah dan berlama-lama, apalagi kalau artikel yang disajikan pun juga menarik, berkualitas dan bermanfaat. Oke sobat langsung saja silahkan dilihat dibaca dan dipraktekan tipsnya dibawah ini.

Dibawah ini adalah contoh default tabel yang belum di custom
Column 1Column 2Column 3
Line 1 Column 1Line 1 Column 2Line 1Column 3
Line 2 Column 1Line 2 Column 2Line 2 Column 3
Kodenya seperti ini
 
<table border="2" style="margin: 0 auto;"><tbody>
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
<tr><td>Line 1 Column 1</td><td>Line 1 Column 2</td><td>Line 1Column 3</td></tr>
<tr><td>Line 2 Column 1</td><td>Line 2 Column 2</td><td>Line 2 Column 3</td></tr>
</tbody></table>


* Dibawah ini adalah tabel yang sedikit di custom
Column 1Column 2Column 3
Line 1 Column 1Line 1 Column 2Line 1Column 3
Line 2 Column 1Line 2 Column 2Line 2 Column 3
Three Column in One line
Kodenya seperti dibawah ini
 
 
<table border="2" style="background: #f00;  -webkit-box-shadow: 5px 5px 8px #000;-moz-box-shadow: 5px 5px 8px #000; box-shadow: 5px 5px 8px #000; color: #fff; font-size: 20px; margin: 0 auto;"><tbody>
<tr><th style="background: #000; color: #fff; font-size: 30px;">Column 1</th><th style="background: #000; color: white; font-size: 30px;">Column 2</th><th style="background: #000; color: white; font-size: 30px;">Column 3</th></tr>
<tr><td>Line 1 Column 1</td><td>Line 1 Column 2</td><td>Line 1Column 3</td></tr>
<tr><td>Line 2 Column 1</td><td>Line 2 Column 2</td><td>Line 2 Column 3</td></tr>
<tr style="background: #000; color: white; font-size: 20px; text-align: center;"><td colspan="3">Three Column in One line</td></tr>
</tbody></table>

* Contoh dengan background gambar
AboutKode HTML
Ini adalah contoh sederhana dengan menggunakan background gambar, dan untuk lebih jelas perhatikan kodenya disamping.<table border="2" style="-moz-box-shadow: 5px 5px 8px #000; -webkit-box-shadow: 5px 5px 8px #000; background: #f00 url(http://2.bp.blogspot.com/-HeAcC3CqXgA/T080Mw9D4-I/AAAAAAAAAtQ/igYP59WOZ7U/s1600/tempik.gif) repeat; border: 10px groove; box-shadow: 5px 5px 8px #000; color: black; font-size: 14px; margin: 0 auto; text-align: justify;"><tbody>
<tr><th style="background: #000; border: 18px groove; color: white; font-size: 30px; text-align: center;">About</th><th style="background: #000; border: 18px groove; color: white; font-size: 30px; text-align: center;">Kode HTML</th></tr>
<tr><td style="border: 4px groove;">Here U content</td><td style="border: 4px groove;">Here U content</td></tr>
<tr style="background: #000; color: white; font-size: 20px; text-align: center;"><td colspan="3">Bagaimana menarik bukan</td></tr>
</tbody></table>
Bagaimana menarik bukan
  1. Untuk kode yang berwarna biru (margin:0 auto) adalah pengaturan letak dari posisi tabel content, bisa diganti dengan, float:left atau float right.
  2. Sedangkan kode yang berwarna merah adalah judul dan isi dari tabel.

                  Oke sobat sekian dulu tips/cara membuat tabel di blog dan meng-custom tabel.

Related Post :

Comments
1 Comments


1 komentar:

Widodo said...

mantab tutorialnya izin nyoba sob

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q:

Berikan Tanggapan mengenai Artikel Di Atas :

Berkomentar Lah Dengan Sopan :

=> Hahahaha ...xD
=> Blog Ini bebas Mau Berkata Apa Asal Sopan ...Azzzz
=> #Peace ALL

Terima Kasih Sudah Berkomentar .. !!

-----
pin 284A465C Gunakan Browser Google Chrome Versi Terbaru, Agar Tampilan Blog Ini Maksimal.