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