Cara membuat table keren dengan css3 pada blog

Membuat table keren dengan css3 pada blog- table biasanya membentuk sebuah bidang kotak yang berisi input data. pada peggunaan table pada blog sudah banyak yang mengetahui membuat table dengan elemen html yang hanya standard dan tidak terlihat menarik beda dengan yang akan saya share kali ini adalah table yang saya temukan dari redteam yang diberi kustomisasi menggunakan css3 pada semua elemen table ditambah sebuah efek hover pada data input di table yang menambah daya tarik tersendiri

Fungsi table pada blog

mungkin sudah banyak yang tahu apa itu table. table adalah data-data atau input data table, misalkan untuk membuat data perbandingan, sebuah daftar, dll perlu sobat ketahui membuat sebuah table tidaklah semudah membuatnya pada program pengolah kata pada pc. maka dari itu poting ini bertujuan untuk sobat yang lagi membutuhkan cara membuat table

contoh penampakan tablenya

No	10 post paling banyak dibaca di depermana12	jumlah
1	cara memasang emoticon pada blog	3217
2	7 tip ampuh memepercepat loading blog	2146
3	cara membuat widget twitter timeline	1859
4	Cara meng-upload gambar di blogger	2146
5	auto read more dengan thumbnail	1994

cara penerapannya pada blog

langkah pertama yang harus dilakukan agar table yang tampil pada blog bisa seperti diatas adalah: 

• copy paste css3 ini diatas code [[></b:skin>

<style>
table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;  
}
.bordered {
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;        
}
.bordered tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;    
}  
   
.bordered td, .bordered th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;  
}
.bordered th {
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;      
    border-top: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.bordered td:first-child, .bordered th:first-child {
    border-left: none;
}
.bordered th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}
.bordered th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}
.bordered th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}
.bordered tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}
.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}
</style>

langkah kedua setelah memasang css adalah:

• copy paste script HTML berikut pada posting dalam mode html

<table class="bordered">

    <thead>

    <tr>

        <th>No</th><th>10 post paling banyak dibaca di depermana12</th><th>jumlah</th>

    </tr>

    </thead>

    

   <tr>

        <td>1</td><td>cara memasang emoticon pada blog</td><td>3217</td>

    </tr>        

    

    <tr>

        <td>2</td><td>7 tip ampuh memepercepat loading blog</td><td>2146</td>

    </tr>

    <tr><td>3</td><td>cara membuat widget twitter timeline</td><td>1859</td>

    </tr>

    

    <tr>

    <td>4</td><td>Cara meng-upload gambar di blogger</td><td>2146</td>

   </tr>

    <tr>

        <td>5</td> <td>auto read more dengan thumbnail</td><td>1994</td>

    </tr>

    

</table>