[Blogging] Membuat Tabel Yang Bagus Dan Menarik

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
Keterangan1	Keterangan 2
keterangan 1	Keterangan 2

Semoga bisa membantu sobat yang lagi mencari cara membuat tabel dengan tampilan yang menarik

SILAHKAN TINGGALIN KOMENTAR YANG BUKAN SPAM ^_^

NAMA ANDA - 01.09

MASUKKAN TOMBOL TWEET DISINI