Membuat Table Rounded Corner CSS3 di Blog

Membuat Table Rounded Corner CSS3 di Blog – mungkin karena sudah trend jadi sekarang sudah jarang lagi pada blog yang masih memakai table standard bawaan blog atau default blogspot. Banyak dari para blogger jika mereka membuat table sudah menggunakan sedikit sentuhan kode CSS pada template blog mereka sehingga table yang terlihatpun tampak lebih cantik dibanding dengan menggunakan table default blogspot.

Untuk membuat table menjadi sedikit lebih cantik begitu pula terlihat sexy maka hanya perlu memasukan sedikit kode CSS pada template blog saja. Table Rounded Corner CSS3 ini memiliki 2 type, yang pertama pada table saat hover maka akan menampilkan highlight rows dan pada table type yang kedua maka sudah otomatis pada rows secara paten atau permanen tanpa hover rows sudah terhighlight atau tampak berbeda warna antara baris atas dengan baris yang dibawahnya. Untuk memasangnya kedalam blog maka berikut adalah tutorial cara Membuat Table Rounded Corner CSS3 di Blog:

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).

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;
}

/*----------------------*/

.zebra td, .zebra th {
    padding: 10px;
    border-bottom: 1px solid #f2f2f2;  
}

.zebra tbody tr:nth-child(even) {
    background: #fbf8e9;
    -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;      
}

.zebra th {
    text-align: left;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    border-bottom: 1px solid #ccc;
    background-color: #eee;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);
    background-image:    -moz-linear-gradient(top, #f5f5f5, #eee);
    background-image:     -ms-linear-gradient(top, #f5f5f5, #eee);
    background-image:      -o-linear-gradient(top, #f5f5f5, #eee);
    background-image:         linear-gradient(top, #f5f5f5, #eee);
}

.zebra th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

.zebra th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

.zebra th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.zebra tfoot td {
    border-bottom: 0;
    border-top: 1px solid #fff;
    background-color: #f1f1f1;
}

.zebra tfoot td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.zebra tfoot td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

.zebra tfoot td:only-child{
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px
    border-radius: 0 0 6px 6px
}

Selanjutnya pada saat anda akan membuat table di posting blog, maka silahkan klik Entri Baru kemudian menggunakan kolom posting mode HTML lalu masukan kode diberikut ini kedalam halaman posting.

Table Type 1 kodenya:

<table class="bordered">
<thead>
<tr>
<th>Nomor</th>      
<th>Tutorial</th>
<th>Tanggal</th>
</tr>
</thead>
<tr>
<td>1</td>      
<td>Simple Gallery Photo di Blog</td>
<td>07/05/2013</td>
</tr>      
<tr>
<td>2</td>       
<td>Membuat Menu Drop Down Purple Style di Blog</td>
<td>03/05/2013</td>
</tr>
<tr>
<td>3</td>       
<td>Membuat Menu Drop Down Brown Style di Blog</td>
<td>02/05/2013</td>
</tr>  
<tr>
<td>4</td>
<td>Membuat Gallery Efek Polaroid Pada Blog</td>
<td>01/05/2013</td>
</tr>
<tr>
<td>5</td>
<td>Menu Horisontal Inverted Shiftdown</td>
<td>30/04/2013</td>
</tr>
</table>

Table type 2 kodenya:

<table class="zebra">
<thead>
<tr>
<th>Nomor</th>      
<th>Tutorial</th>
<th>Tanggal</th>
</tr>
</thead>
<tfoot>
<tr>
<td>&nbsp;</td>      
<td></td>
<td></td>
</tr>
</tfoot>  
<tr>
<td>1</td>      
<td>Simple Gallery Photo di Blog</td>
<td>07/05/2013</td>
</tr>      
<tr>
<td>2</td>       
<td>Membuat Menu Drop Down Purple Style di Blog</td>
<td>03/05/2013</td>
</tr>
<tr>
<td>3</td>       
<td>Membuat Menu Drop Down Brown Style di Blog</td>
<td>02/05/2013</td>
</tr>  
<tr>
<td>4</td>
<td>Membuat Gallery Efek Polaroid Pada Blog</td>
<td>01/05/2013</td>
</tr>
<tr>
<td>5</td>
<td>Menu Horisontal Inverted Shiftdown</td>
<td>30/04/2013</td>
</tr>
</table>

Dari kode diatas maka akan tampil seperti DEMO dibawah ini:

Table Type 1

Nomor	Tutorial	Tanggal
1	Simple Gallery Photo di Blog	07/05/2013
2	Membuat Menu Drop Down Purple Style di Blog	03/05/2013
3	Membuat Menu Drop Down Brown Style di Blog	02/05/2013
4	Membuat Gallery Efek Polaroid Pada Blog	01/05/2013
5	Menu Horisontal Inverted Shiftdown	30/04/2013

Table Type 2

Nomor	Tutorial	Tanggal
1	Simple Gallery Photo di Blog	07/05/2013
2	Membuat Menu Drop Down Purple Style di Blog	03/05/2013
3	Membuat Menu Drop Down Brown Style di Blog	02/05/2013
4	Membuat Gallery Efek Polaroid Pada Blog	01/05/2013
5	Menu Horisontal Inverted Shiftdown	30/04/2013