Desain Tabel dengan Css

Membuat tabel pada postingan di blog saat ini bukan hal yang sulit lagi. Setelah sebelumnya saya pernah memberikan tips yang berjudul  Membuat Tabel pada Postingan, kali ini saya akan meng-update ilmu anda tentang membuat tabel pada blog. Tips kali ini akan memberikan bagaimana caranya mendesain tabel dengan style yang sangat menarik. Adapun tips ini adalah sebagian tips yang saya pelajari dari blognya teman kita Kang Dadang.

Dengan menambahkan css tabel pada template atau pada postingan akan membuat tampilan tabel menjadi lebih menarik dan cantik pada segi tampilan warna, bentuk dan teks-nya, tampilan standar tabel hanya menampilkan bentuk baris dan kolom serta ditambah pembatas seperti garis, pada dasarnya css tabel tetap mengacu pada tampilan tabel standar, tapi dengan penambahan css tabel akan memberi tampilan yang berbeda dan lebih bagus tentunya.

DEMO

Dengan menambahkan css tabel akan menghasilkan tampilan tabel yang seperti dalam demo, untuk membentuk tampilan seperti dalam demo, kalian bisa menambahkan kode css tabel dibawah ini dan letakan diatas kode ]]</b:skin>
=================================================================
Css Tabel
=================================================================

table[border="1"] {
border-collapse:collapse;
font:normal 12px Verdana,Arial,Sans-Serif;
color:#FFFFFF;
}
table[border="1"] tr {
background:#A8F542;
}
table[border="1"] th, table[border="1"] td {
vertical-align:top;
padding:5px 10px;
border:2px solid #fff;
}
table[border="1"] tr:nth-child(even) {
background:#F57EFC;
}
table[border="1"] th {
background:#717FF8;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
color:#fff;
font-weight:bold;
}

Atau bisa juga css tabel tersebut disatukan penempatannya dengan kode tabel stabdart pada postingan (dalam bentuk Edit HTML) dengan menambahkan kode :

<style type="text/css">
...css tabel
</style>
...kode tabel standart

Berikut kode tabel standart yang diletakkan pada postingan:
=================================================================
Kode Tabel Standart
=================================================================

<table border="1" style="width: 400px;"><tbody>
<tr><th>Kepala 1</th><th>Kepala 2</th><th>Kepala 3</th></tr>
<tr><td>Baris1 - Kolom1</td><td>Baris1 - kolom2</td><td>Baris1 - Kolom3</td></tr>
<tr><td>Baris2 - Kolom1</td><td>Baris2 - kolom2</td><td>Baris2 - Kolom3</td></tr>
<tr><td>Baris3 - Kolom1</td><td>Baris3 - kolom2</td><td>Baris3 - Kolom3</td></tr>
<tr><td>Baris4 - Kolom1</td><td>Baris4 - kolom2</td><td>Baris4 - Kolom3</td></tr>
</tbody> </table>

Untuk lebih jelas mengenai cara pembuatan tabel, kalian bisa membaca caranya pada post "Cara Membuat Tabel pada Postingan".Semoga bermanfaat, mohon maaf jika ada kesalahan. (Jkt/2012)