Cara Membuat Table Rounded Corner di Blog
......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> </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 |
Post a Comment
- Top comments
- Newest first