proBlogiz
Apakah Anda sedang mencari bentuk tampilan tabel yang keren dan cantik? Disini Anda bisa temukan kumpulan 10 Tabel Style yang Keren dan Cantik tanpa menggunakan image/gambar atau 100% pure CSS. Desain Blog kali ini akan memberikan tutorial cara membuat tabel lebih menarik sehingga tidak perlu lagi menggunakan tabel standard yang kurang menarik dipandang.
Bentuk tabel dengan kostum CSS ini akan memberikan kesan tampilan profesional,sehingga sangat tepat digunakan untuk menampilkan daftar, membuat list, atau laporan statistik di setiap postingan Anda di Blog. Penambahan efek shadow, border radius, gradient color atau two color background benar-benar membuat table ini sangat menarik dipandang. Keren!!
Dibawah ini saya tampilkan 10 contoh tabel kostum cantik dengan bermacam warna dan style serta kode CSS yang mudah dan valid, berikut pula kode HTML untuk pemasangannya di setiap postingan.
Anda juga bisa melihat DEMO LIVE 10 Tabel Style Keren ini dengan menggunakan CSS Generator kami :
Klik DEMO LIVE
Cara penggunaan :
Copy salah satu kode CSS tabel dibawah dan pastekan di antara <style> dan </style>
Copy kode HTML dan paste dibawahnya
Kemudian klik tombol Preview
Cara Memasang Kode CSS Tabel Keren di Template Blogger
Masuk Blogger.com > pilih Template > Edit HTML
Tekan Control + F > cari kode ]]></b:skin>
Letakkan salah satu kode CSS pilihan Anda diatas tag ]]></b:skin>
Save Template
Cara Membuat Tabel Keren di Postingan
Masuk ke Post Editor > pilih HTML Mode
Copy kode HTML dibawah ini, dan letakkan dimana Anda akan membuat tabelnya.
<div class="CSSTableGenerator" >
<table ><tr> <td>Title 1</td><td >Title 2</td><td>Title 3</td></tr>
<tr><td >Row 1</td><td>Row 1</td><td>Row 1</td></tr><tr><td >Row 2</td><td>Row 2</td><td>Row 2</td></tr><tr><td >Row 2</td><td>Row 2</td><td>Row 2</td></tr><tr><td >Row 3</td><td>Row 3</td><td>Row 3</td></tr>
</table></div>
Untuk menambah atau mengurangi jumlah Kolom dan Baris pada tabel, sebagai berikut :
- Menambah kolom / column, tambahkan kode ini setelah kode <td>Title 3</td>
<td>Title 4</td>
- Untuk mengurangi kolom dihapus saja kode berjudul "Title" tersebut <td>Title </td>
- Menambah baris/row baru, tambahkan kode berikut :
<tr><td >Row 4</td><td>Row 4</td><td>Row 4</td></tr>
- Untuk mengurangi baris dihapus saja kode
10 Tabel Style Keren di Blogger
1. Blue Table Style
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #ffffff;
-moz-border-radius-bottomleft:15px;
-webkit-border-bottom-left-radius:15px;
border-bottom-left-radius:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-bottom-right-radius:15px;
border-bottom-right-radius:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-right-radius:15px;
border-top-right-radius:15px;
-moz-border-radius-topleft:15px;
-webkit-border-top-left-radius:15px;
border-top-left-radius:15px;
}.CSSTableGenerator table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:15px;
-webkit-border-bottom-right-radius:15px;
border-bottom-right-radius:15px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:15px;
-webkit-border-top-left-radius:15px;
border-top-left-radius:15px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:15px;
-webkit-border-top-right-radius:15px;
border-top-right-radius:15px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:15px;
-webkit-border-bottom-left-radius:15px;
border-bottom-left-radius:15px;
}.CSSTableGenerator tr:hover td{
}
.CSSTableGenerator tr:nth-child(odd){ background-color:#aad4ff; }
.CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }
.CSSTableGenerator td{
vertical-align:middle;
border:1px solid #ffffff;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Georgia;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f"); background: -o-linear-gradient(top,#005fbf,003f7f);
background-color:#005fbf;
border:0px solid #ffffff;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Georgia;
font-weight:bold;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f) );
background:-moz-linear-gradient( center top, #005fbf 5%, #003f7f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f"); background: -o-linear-gradient(top,#005fbf,003f7f);
background-color:#005fbf;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
2. Red Table Style
Code CSS :
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #ffffff;
-moz-border-radius-bottomleft:18px;
-webkit-border-bottom-left-radius:18px;
border-bottom-left-radius:18px;
-moz-border-radius-bottomright:18px;
-webkit-border-bottom-right-radius:18px;
border-bottom-right-radius:18px;
-moz-border-radius-topright:18px;
-webkit-border-top-right-radius:18px;
border-top-right-radius:18px;
-moz-border-radius-topleft:18px;
-webkit-border-top-left-radius:18px;
border-top-left-radius:18px;
}.CSSTableGenerator table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:18px;
-webkit-border-bottom-right-radius:18px;
border-bottom-right-radius:18px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:18px;
-webkit-border-top-left-radius:18px;
border-top-left-radius:18px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:18px;
-webkit-border-top-right-radius:18px;
border-top-right-radius:18px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:18px;
-webkit-border-bottom-left-radius:18px;
border-bottom-left-radius:18px;
}.CSSTableGenerator tr:hover td{
background-color:#ffaaaa;
}
.CSSTableGenerator td{
vertical-align:middle;
background:-o-linear-gradient(bottom, #ffffff 5%, #ffaaaa 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffaaaa) );
background:-moz-linear-gradient( center top, #ffffff 5%, #ffaaaa 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#ffaaaa"); background: -o-linear-gradient(top,#ffffff,ffaaaa);
background-color:#ffffff;
border:1px solid #ffffff;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #ff5656 5%, #7f0000 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #7f0000) );
background:-moz-linear-gradient( center top, #ff5656 5%, #7f0000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#7f0000"); background: -o-linear-gradient(top,#ff5656,7f0000);
background-color:#ff5656;
border:0px solid #ffffff;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Georgia;
font-weight:bold;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #ff5656 5%, #7f0000 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #7f0000) );
background:-moz-linear-gradient( center top, #ff5656 5%, #7f0000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#7f0000"); background: -o-linear-gradient(top,#ff5656,7f0000);
background-color:#ff5656;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
3.Dark Table Style
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #666666;
-moz-border-radius-bottomleft:23px;
-webkit-border-bottom-left-radius:23px;
border-bottom-left-radius:23px;
-moz-border-radius-bottomright:23px;
-webkit-border-bottom-right-radius:23px;
border-bottom-right-radius:23px;
-moz-border-radius-topright:23px;
-webkit-border-top-right-radius:23px;
border-top-right-radius:23px;
-moz-border-radius-topleft:23px;
-webkit-border-top-left-radius:23px;
border-top-left-radius:23px;
}.CSSTableGenerator table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:23px;
-webkit-border-bottom-right-radius:23px;
border-bottom-right-radius:23px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:23px;
-webkit-border-top-left-radius:23px;
border-top-left-radius:23px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:23px;
-webkit-border-top-right-radius:23px;
border-top-right-radius:23px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:23px;
-webkit-border-bottom-left-radius:23px;
border-bottom-left-radius:23px;
}.CSSTableGenerator tr:hover td{
}
.CSSTableGenerator tr:nth-child(odd){ background-color:#7f7f7f; }
.CSSTableGenerator tr:nth-child(even) { background-color:#b2b2b2; }
.CSSTableGenerator td{
vertical-align:middle;
border:1px solid #666666;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Georgia;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #1c1616 5%, #4c4c4c 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1c1616), color-stop(1, #4c4c4c) );
background:-moz-linear-gradient( center top, #1c1616 5%, #4c4c4c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#1c1616", endColorstr="#4c4c4c"); background: -o-linear-gradient(top,#1c1616,4c4c4c);
background-color:#1c1616;
border:0px solid #666666;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Times New Roman;
font-weight:bold;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #1c1616 5%, #4c4c4c 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1c1616), color-stop(1, #4c4c4c) );
background:-moz-linear-gradient( center top, #1c1616 5%, #4c4c4c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#1c1616", endColorstr="#4c4c4c"); background: -o-linear-gradient(top,#1c1616,4c4c4c);
background-color:#1c1616;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}4. Pink Table Style
Code CSS :
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #ffffff;
-moz-border-radius-bottomleft:19px;
-webkit-border-bottom-left-radius:19px;
border-bottom-left-radius:19px;
-moz-border-radius-bottomright:19px;
-webkit-border-bottom-right-radius:19px;
border-bottom-right-radius:19px;
-moz-border-radius-topright:19px;
-webkit-border-top-right-radius:19px;
border-top-right-radius:19px;
-moz-border-radius-topleft:19px;
-webkit-border-top-left-radius:19px;
border-top-left-radius:19px;
}.CSSTableGenerator table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:19px;
-webkit-border-bottom-right-radius:19px;
border-bottom-right-radius:19px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:19px;
-webkit-border-top-left-radius:19px;
border-top-left-radius:19px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:19px;
-webkit-border-top-right-radius:19px;
border-top-right-radius:19px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:19px;
-webkit-border-bottom-left-radius:19px;
border-bottom-left-radius:19px;
}.CSSTableGenerator tr:hover td{
}
.CSSTableGenerator tr:nth-child(odd){ background-color:#ffbfff; }
.CSSTableGenerator tr:nth-child(even) { background-color:#ffeaff; }
.CSSTableGenerator td{
vertical-align:middle;
border:1px solid #ffffff;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Comic Sans MS;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #ed00ed 5%, #ed00ed 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ed00ed), color-stop(1, #ed00ed) );
background:-moz-linear-gradient( center top, #ed00ed 5%, #ed00ed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed00ed", endColorstr="#ed00ed"); background: -o-linear-gradient(top,#ed00ed,ed00ed);
background-color:#ed00ed;
border:0px solid #ffffff;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Comic Sans MS;
font-weight:bold;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #ed00ed 5%, #ed00ed 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ed00ed), color-stop(1, #ed00ed) );
background:-moz-linear-gradient( center top, #ed00ed 5%, #ed00ed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed00ed", endColorstr="#ed00ed"); background: -o-linear-gradient(top,#ed00ed,ed00ed);
background-color:#ed00ed;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}5. Orange Table Style
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #ff7f00;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}.CSSTableGenerator table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
}
.CSSTableGenerator tr:nth-child(odd){ background-color:#ffaa56; }
.CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }
.CSSTableGenerator td{
vertical-align:middle;
border:1px solid #ff7f00;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Arial;
font-weight:bold;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) );
background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00"); background: -o-linear-gradient(top,#ff7f00,bf5f00);
background-color:#ff7f00;
border:0px solid #ff7f00;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) );
background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00"); background: -o-linear-gradient(top,#ff7f00,bf5f00);
background-color:#ff7f00;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
6.Yellow Table Style
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #bfbf00;
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}.CSSTableGenerator table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:0px;
-webkit-border-bottom-right-radius:0px;
border-bottom-right-radius:0px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:0px;
-webkit-border-top-left-radius:0px;
border-top-left-radius:0px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:0px;
-webkit-border-top-right-radius:0px;
border-top-right-radius:0px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:0px;
-webkit-border-bottom-left-radius:0px;
border-bottom-left-radius:0px;
}.CSSTableGenerator tr:hover td{
background-color:#ffffff;
}
.CSSTableGenerator td{
vertical-align:middle;
background-color:#ffffaa;
border:1px solid #bfbf00;
border-width:0px 1px 1px 0px;
text-align:left;
padding:8px;
font-size:10px;
font-family:Verdana;
font-weight:bold;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #ffff00 5%, #e8e800 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffff00), color-stop(1, #e8e800) );
background:-moz-linear-gradient( center top, #ffff00 5%, #e8e800 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffff00", endColorstr="#e8e800"); background: -o-linear-gradient(top,#ffff00,e8e800);
background-color:#ffff00;
border:0px solid #bfbf00;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Verdana;
font-weight:bold;
color:#000000;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #ffff00 5%, #e8e800 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffff00), color-stop(1, #e8e800) );
background:-moz-linear-gradient( center top, #ffff00 5%, #e8e800 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffff00", endColorstr="#e8e800"); background: -o-linear-gradient(top,#ffff00,e8e800);
background-color:#ffff00;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
7. Green Table Style
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #3f7f00;
-moz-border-radius-bottomleft:9px;
-webkit-border-bottom-left-radius:9px;
border-bottom-left-radius:9px;
-moz-border-radius-bottomright:9px;
-webkit-border-bottom-right-radius:9px;
border-bottom-right-radius:9px;
-moz-border-radius-topright:9px;
-webkit-border-top-right-radius:9px;
border-top-right-radius:9px;
-moz-border-radius-topleft:9px;
-webkit-border-top-left-radius:9px;
border-top-left-radius:9px;
}.CSSTableGenerator table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:9px;
-webkit-border-bottom-right-radius:9px;
border-bottom-right-radius:9px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:9px;
-webkit-border-top-left-radius:9px;
border-top-left-radius:9px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:9px;
-webkit-border-top-right-radius:9px;
border-top-right-radius:9px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:9px;
-webkit-border-bottom-left-radius:9px;
border-bottom-left-radius:9px;
}.CSSTableGenerator tr:hover td{
background-color:#ffffff;
}
.CSSTableGenerator td{
vertical-align:middle;
background:-o-linear-gradient(bottom, #b6f27b 5%, #ffffff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b6f27b), color-stop(1, #ffffff) );
background:-moz-linear-gradient( center top, #b6f27b 5%, #ffffff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#b6f27b", endColorstr="#ffffff"); background: -o-linear-gradient(top,#b6f27b,ffffff);
background-color:#b6f27b;
border:1px solid #3f7f00;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #5fbf00 5%, #3f7f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #3f7f00) );
background:-moz-linear-gradient( center top, #5fbf00 5%, #3f7f00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00", endColorstr="#3f7f00"); background: -o-linear-gradient(top,#5fbf00,3f7f00);
background-color:#5fbf00;
border:0px solid #3f7f00;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Georgia;
font-weight:bold;
color:#561d1d;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #5fbf00 5%, #3f7f00 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5fbf00), color-stop(1, #3f7f00) );
background:-moz-linear-gradient( center top, #5fbf00 5%, #3f7f00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#5fbf00", endColorstr="#3f7f00"); background: -o-linear-gradient(top,#5fbf00,3f7f00);
background-color:#5fbf00;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
8. Grey Table Style
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #cccccc;
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
-moz-border-radius-topleft:4px;
-webkit-border-top-left-radius:4px;
border-top-left-radius:4px;
}.CSSTableGenerator table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:4px;
-webkit-border-top-left-radius:4px;
border-top-left-radius:4px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
}.CSSTableGenerator tr:hover td{
background-color:#ffffff;
}
.CSSTableGenerator td{
vertical-align:middle;
background:-o-linear-gradient(bottom, #e5e5e5 5%, #ffffff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e5e5e5), color-stop(1, #ffffff) );
background:-moz-linear-gradient( center top, #e5e5e5 5%, #ffffff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#e5e5e5", endColorstr="#ffffff"); background: -o-linear-gradient(top,#e5e5e5,ffffff);
background-color:#e5e5e5;
border:1px solid #cccccc;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Arial;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2"); background: -o-linear-gradient(top,#cccccc,b2b2b2);
background-color:#cccccc;
border:0px solid #cccccc;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Arial;
font-weight:bold;
color:#000000;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2"); background: -o-linear-gradient(top,#cccccc,b2b2b2);
background-color:#cccccc;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}9. Black White Table Style
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
border-top-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
border-top-left-radius:10px;
}.CSSTableGenerator table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
border-top-left-radius:10px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
border-top-right-radius:10px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
}.CSSTableGenerator tr:hover td{
}
.CSSTableGenerator tr:nth-child(odd){ background-color:#e5e5e5; }
.CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }
.CSSTableGenerator td{
vertical-align:middle;
border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Impact;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #4c4c4c 5%, #000000 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c4c4c), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #4c4c4c 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c", endColorstr="#000000"); background: -o-linear-gradient(top,#4c4c4c,000000);
background-color:#4c4c4c;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Impact;
font-weight:normal;
color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #4c4c4c 5%, #000000 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c4c4c), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #4c4c4c 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c", endColorstr="#000000"); background: -o-linear-gradient(top,#4c4c4c,000000);
background-color:#4c4c4c;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
10. Red White Table Style
Code CSS:
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #bf0000;
-moz-border-radius-bottomleft:14px;
-webkit-border-bottom-left-radius:14px;
border-bottom-left-radius:14px;
-moz-border-radius-bottomright:14px;
-webkit-border-bottom-right-radius:14px;
border-bottom-right-radius:14px;
-moz-border-radius-topright:14px;
-webkit-border-top-right-radius:14px;
border-top-right-radius:14px;
-moz-border-radius-topleft:14px;
-webkit-border-top-left-radius:14px;
border-top-left-radius:14px;
}.CSSTableGenerator table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:14px;
-webkit-border-bottom-right-radius:14px;
border-bottom-right-radius:14px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:14px;
-webkit-border-top-left-radius:14px;
border-top-left-radius:14px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:14px;
-webkit-border-top-right-radius:14px;
border-top-right-radius:14px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:14px;
-webkit-border-bottom-left-radius:14px;
border-bottom-left-radius:14px;
}.CSSTableGenerator tr:hover td{
background-color:#ffaaaa;
}
.CSSTableGenerator td{
vertical-align:middle;
background-color:#ffffff;
border:1px solid #bf0000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
font-size:10px;
font-family:Georgia;
font-weight:normal;
color:#000000;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #ff5656 5%, #ff5656 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #ff5656) );
background:-moz-linear-gradient( center top, #ff5656 5%, #ff5656 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#ff5656"); background: -o-linear-gradient(top,#ff5656,ff5656);
background-color:#ff5656;
border:0px solid #bf0000;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:14px;
font-family:Georgia;
font-weight:bold;
color:#000000;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #ff5656 5%, #ff5656 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #ff5656) );
background:-moz-linear-gradient( center top, #ff5656 5%, #ff5656 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#ff5656"); background: -o-linear-gradient(top,#ff5656,ff5656);
background-color:#ff5656;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
Anda suka artikel 10 Tabel Style Keren ini? Please feel free to share it or klik Like
resources :
13 komentar
test
REPLYwah keren...coba ah
REPLYthnx mas
sama2 bro
REPLYselalu yang ada roundednya IE gak support :D
REPLYiya mas :) kan udah dikasih warning Browser Support:)
REPLYtapi ada pilihan lain yang ga rounded, seperti Yellow Table Style, Orange Table Style (border radius :0;)
Anda juga bisa merubah nilai border radius-nya jadi nol
good luck!
tambahan juga mas kalau IE memang ga sempurna tampilan table costum seperti ini, selain ga support webkit border radius juga color gradient
REPLYmau tanya gan...
REPLYlaw kode css nya di tarok dmna ya?
mohon pencerahannya.
terimaksih
kereeeennnnn
REPLYmantap sob
ane coba yang grey aja deh :D
http://teens-sharing.blogspot.com/
Nice Gan, sharing elmunya. Ternyata model css ini bisa juga di aplikasikan langsung gak pake ribet di website (non cms). Tinggal copas aja, dan jreng langsung jalan. Gak percaya ini contoh http://goo.gl/snYTH3 yang Ane langsung terapkan. Copas codingnya and paste di situs kita. Mantab lah Gan...
REPLYgan gimana cara mengecilkan kolom di Title 1/tabel sebelah kiri, misalnya saya mau buat tabel nomor. trim salam kenal dari kami.
REPLYPerfect sob!
REPLYKeren Tutorialnya Bosku
REPLYSemoga Sukses Dan Bahagia Selalu
Keren banget gan.... auto dipraktekin :) Ntapss.... By; amaterasublog
REPLYSilahkan Berkomentar
ConvertKomentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan