10 Tabel Style Keren di Blogger (pure CSS)

Hriza muh on 23.11.12 8 komentar

Get This

proBlogiz

Apakah Anda sedang mencari bentuk tampilan tabel yang keren dan cantik? Disini Anda bisa temukan kumpulan10 Tabel Styleyang Keren dan Cantik tanpa menggunakan image/gambar atau 100% pure CSS. Desain Blog kali ini akan memberikan tutorial cara membuattabellebih menarik sehingga tidak perlu lagi menggunakan tabel standard yang kurang menarik dipandang.

Bentuktabeldengan kostum CSS ini akan memberikan kesan tampilan profesional,sehingga sangat tepat digunakanuntuk 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 contohtabelkostum 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 LIVE10 Tabel Style Keren ini dengan menggunakan CSS Generator kami :KlikDEMO LIVECara penggunaan :Copy salah satu kode CSS tabel dibawah dan pastekan di antara dan Copy kode HTML dan paste dibawahnyaKemudian klik tombol Preview

Cara Memasang Kode CSS Tabel Keren di Template BloggerMasuk Blogger.com > pilih Template > Edit HTMLTekan Control + F > cari kode]]>Letakkan salah satu kode CSS pilihan Anda diatas tag]]>Save TemplateCara Membuat Tabel Keren di PostinganMasuk ke Post Editor > pilih HTML ModeCopy kode HTML dibawah ini, dan letakkan dimana Anda akan membuat tabelnya.

Title 1Title 2Title 3Row 1Row 1Row 1Row 2Row 2Row 2Row 2Row 2Row 2Row 3Row 3Row 3

Untuk menambah atau mengurangi jumlah Kolom dan Baris pada tabel, sebagai berikut : Menambah kolom / column,tambahkan kode ini setelah kodeTitle 3Title 4 Untuk mengurangi kolom dihapus saja kode berjudul "Title" tersebutTitle Menambah baris/row baru, tambahkan kode berikut :

Row 4Row 4Row 4 Untuk mengurangi baris dihapus saja kode

10 Tabel Style Keren di Blogger1. Blue 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: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

Code CSS :.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

Code CSS :.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

Code CSS :.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; } Your browser does not support iframes.

7. Green Table Style

Code CSS : .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

Code CSS: .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

Code CSS: .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; }