Cara Membuat Table Rounded Corner di Blog

Kode Iklan Di Sini
Cara Membuat Table Rounded Corner di Blog
Cara Membuat Table Rounded Corner di Blog,Anaktimor17 Blog - Sobat blogger, mungkin Anda masih menggunkan tabel default milik blogger yah?? Nah dalam tips ini saya akan berbagi tips membuat table rounded corner yang terlihat sexy
......hulalala......dengan sedikit sentuhan CSS...tabel ini akan terlihat elegant...
Nah untuk Anda yg mau mencobanya silahkan ikuti tipsnya di bawah ini:

Bagi sobat yang ingin menggunakan nya, silahkan simpan kode ini di atas ]]></b:skin> atau </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;
}

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

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

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.

 Type 1 
<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>

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

type 2
<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>

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
Selamat Mencoba,semoga berhasil :)

You Might Also Like:

Disqus Comments