Css Style Table keren dalam blog

Css Style Table keren dalam blog - kali ini saya akan share sedikit tentang css style dari table yang ada di blog rz4share. Membuat tabel keren ini menggunakan beberapa source kode, yaitu CSS dan HTML. Dimana kode CSS akan disisipkan pada template blogger, sedangkan kode HTML yang akan disisipkan pada postingan Blog kita. Kode CSS dan HTML ini murni saya dapatkan dari halaman Google Support. So, tanpa panjang lebar mari kita simak cara membuat tabel mirip tabel yang dimiliki oleh Google.com.

Langkah-langkah :

1. Login ke Blogger > Template > Edit HTML
2. Jangan lupa centang "Expand Template Widget"
3. Cari kode ]]></b:skin> lalu sisipkan kode CSS berikut ini tepat di atasnya

<!-- Start Nice Table Rz4Share.blogspot.com--> 
table th {padding-top: 7px;text-align: left;}
.nice-table {border-collapse: collapse;border-spacing: 0;}
.nice-table tr:first-child th {border-top: 0 none;}
.nice-table th:first-child {border-left: 0 none;}
.nice-table tr:first-child th:last-child {border-right-color: #5C6785;}
.nice-table th {background-color: #5C6785;color: white;font-weight: bold;}
.nice-table th, .nice-table td {border: 1px solid #EBEBEB;padding: 3px 10px;}
.nice-table td {background-color: #E6E6E6; border-color: #E5E5E5 #CCCCCC #E5E5E5 #E5E5E5;color: #444444;}
.nice-table td:last-child { border-right-color: #E5E5E5;}
.nice-table tr:nth-of-type(2n) td { background-color: #FFFFFF; border-right-color: #E5E5E5;}
.nice-table.spaced-table td, .nice-table.spaced-table th {padding: 10px;}
.nice-table.wide {width: 95%;}
.nice-table.narrow {width: 75%;}
.nice-table.narrower {width: 50%;}
.nice-table.narrowest {width: 35%;}
<!-- End Nice Table Rz4Share.blogspot.com--> 

4. Jika sudah lalu save.

Langkah-langkah penempatan pada postingan :

 Catatan:

• Jika ingin menambah atau mengurangi jumlah kolom dan baris, silahkan mengedit dengan memperhatikan kode tag html atau
• Disetiap kolom akan ada kode pembuka dan penutup
• Disetiap baris akan ada kode dan penutup
• Dan untuk nama field judul menggunakan kode dan penutup

contoh :

<table class="nice-table" width="100%" ><tbody> 
<tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> 
<tr> <td>kolom 1 baris 1</td> <td>kolom 2 baris   1</td> <td>kolom 3 baris 1</td> </tr> 
<tr> <td>kolom 1 baris 2</td> <td>kolom 2 baris   2</td> <td>kolom 3 baris 2</td> </tr> 
<tr> <td>kolom 1 baris 3</td> <td>kolom 2 baris   3</td> <td>kolom 3 baris 3</td> </tr> 
<tr> <td>kolom 1 baris 4</td> <td>kolom 2 baris   4</td> <td>kolom 3 baris 4</td> </tr> 
</tbody> </table>

Semoga Bermanfaat