Terbaru »

[Blogging] Membuat Tabel Yang Bagus Dan Menarik

Penulis : di 15:09


Hai sob...bagaimana kabarnya hari ini...Kali ini saya akan mencoba memberikan tutorial bagaimana membuat sebuah tabel yang terlihat lebih bagus. Tabel dalam postingan blog biasanya digunakan untuk menunjukkan daftar tertentu. Dengan tampilan tabel yang menarik akan membuat pengunjung blog lebih betah memelototi artikel kita.hehe.
Pertama kita buat dulu style CSSnya dari tabel tersebut seperti dibawah ini :
#tabelku { width: 600px;}
th {font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #222533;border-right: 1px solid #c1c9da;border-bottom: 1px solid #c1c9da;border-top: 1px solid #c1c9da;letter-spacing: 2px;text-transform: uppercase;text-align: center;padding: 6px 6px 6px 6px;background: #c4d6eb;}
td {font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;border-right: 1px solid #c1c9da;
border-bottom: 1px solid #c1c9da;border-left: 1px solid #c1c9da;padding: 6px 6px 6px 6px;}
tr.alt {background: #e0edfa;color: #222533;}
tr.alts {background:#FFF;color: #222533;}

Copy semua text CSS diatas ]]></b:skin> pada template html sobat.
Untuk yang berwarna merah menunjukkan lebar dari tabel tersebut silahkan ganti sesuai keinginan sobat.

Untuk penulisannya di posting sobat caranya sebagai berikut :
<table cellspacing="0" id="tabelku"><tbody>
<tr> <th scope="col">MENU1</th> <th scope="col">MENU 2</th> </tr>
<tr class="alts"><td>Keterangan 1</td><td>Keterangan 2</td></tr>
<tr class="alt"><td>keterangan 1</td><td>Keterangan 2 </td></tr>
</tbody></table>
Menu merupakan nama dari kolom tabel paling atas dan Keterangan merupakan kolom tabel dibawahnya
<tr class='alts'> dan <tr class='alt'> untuk membedakan antar kolom keterangan
jika ingin menambahkan kolom lagi dibawahnya tambahkan
<tr class="alts"><td> </td><td> </td></tr> dan
<tr class="alt"><td> </td><td> </td></tr> secara bergantian agar tampilan tabel sobat lebih menarik.

Untuk contoh tabelnya bisa dilihat dibawah ini :
MENU1 MENU 2
Keterangan1Keterangan 2
keterangan 1Keterangan 2

Semoga bisa membantu sobat yang lagi mencari cara membuat tabel dengan tampilan yang menarik
Share ke temanmu : :

3 komentar:

Fs-Galery said...

Terimakasih Mas.. bagus artikelnya..

oh ya, mohon dukungannya ya Gagasan Wirausaha untuk TKI

Candra Windra said...

Makasih sob... segera meluncur... ^_^

Namikaze Minato said...

gan... cara mengatur tingginya gimana??? punya ane jadi kayak gini

please tolong baless comment saya..

http://prntscr.com/2jg9kj

Post a Comment

Terima kasih sudah berkunjung
Komentar yang berkualitas saya harapkan dari para pengunjung situs ini
(Karena banyaknya komentar yang masuk spam, sebaiknya gunakan nama untuk memberikan komentar)

 
Copyright © 2012. CingheDotCom - All Rights Reserved - About Me | Contact Us | Kebijakan Privasi