pasang iklan banner gratis
YouGep Reloads All Operator Pulsa

Membuat Tabel Variatif Keren Di Posting Blog Dengan CSS

Membuat Tabel Keren Dengan CSS Kode

Tabel keren, CSS, Blogging, Posting


Terkadang kita ingin menyuguhkan data dalam bentuk tabel, akan tetapi tabel yang kita suguhkan hanya berbentuk standar biasa tanpa ada variasi seperti kita buat di Microsoft Word, Microsoft Excel. Dalam dunia blogging kita menggunakan bahasa pemprograman yaitu CSS , dalam membuat bentuk variasi sebuah objek dalam hal ini tabel. Oke lansung saja perhatikan cara Membuat tabel keren di posting blog dengan CSS.

  1. Memasang kode CSS Tabel dalam Template Blogger
  • Pastikan anda sudah Masuk Blogger Dasbor terlebih dahulu, jika belum Log in Blogger terlebih dahulu
  • Pilih Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS >> Masukkan kode CSS di dalam kotak CSS
  • Jika melalui Edit HTML maka pilih Template >> Edit HTML >>  Letakkan Cursor di Tulisan Kotak Kode HTML >> Tekan Ctrl + F >> cari kode ]]>></b:skin> di kotak pencarian di pojok kanan atas >> Letakkan Kode CSS pilihan anda tepat diatas kode ]]>></b:skin> tadi
Berikut Kode CSS Tabel yang bisa anda pilih sesuai keinginan anda

1. Red Table Style .CSSTableGenerator1



Kode CSS:
.CSSTableGenerator 1{

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;

}.CSSTableGenerator1 table{

width:100%;

height:100%;

margin:0px;padding:0px;

}.CSSTableGenerator1 tr:last-child td:last-child {

-moz-border-radius-bottomright:18px;

-webkit-border-bottom-right-radius:18px;

border-bottom-right-radius:18px;

}

.CSSTableGenerator1 table tr:first-child td:first-child {

-moz-border-radius-topleft:18px;

-webkit-border-top-left-radius:18px;

border-top-left-radius:18px;

}

.CSSTableGenerator1 table tr:first-child td:last-child {

-moz-border-radius-topright:18px;

-webkit-border-top-right-radius:18px;

border-top-right-radius:18px;

}.CSSTableGenerator1 tr:last-child td:first-child{

-moz-border-radius-bottomleft:18px;

-webkit-border-bottom-left-radius:18px;

border-bottom-left-radius:18px;

}.CSSTableGenerator1 tr:hover td{

background-color:#ffaaaa;




}

.CSSTableGenerator1 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;

}.CSSTableGenerator1 tr:last-child td{

border-width:0px 1px 0px 0px;

}.CSSTableGenerator1 tr td:last-child{

border-width:0px 0px 1px 0px;

}.CSSTableGenerator1 tr:last-child td:last-child{

border-width:0px 0px 0px 0px;

}

.CSSTableGenerator1 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;

}

.CSSTableGenerator1 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;

}

.CSSTableGenerator1 tr:first-child td:first-child{

border-width:0px 0px 1px 0px;

}

.CSSTableGenerator1 tr:first-child td:last-child{

border-width:0px 0px 1px 1px;

}


2. Pink Table Style .CSSTableGenerator2



Kode CSS:
.CSSTableGenerator2 {

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;

}.CSSTableGenerator2 table{

width:100%;

height:100%;

margin:0px;padding:0px;

}.CSSTableGenerator2 tr:last-child td:last-child {

-moz-border-radius-bottomright:19px;

-webkit-border-bottom-right-radius:19px;

border-bottom-right-radius:19px;

}

.CSSTableGenerator2 table tr:first-child td:first-child {

-moz-border-radius-topleft:19px;

-webkit-border-top-left-radius:19px;

border-top-left-radius:19px;

}

.CSSTableGenerator2 table tr:first-child td:last-child {

-moz-border-radius-topright:19px;

-webkit-border-top-right-radius:19px;

border-top-right-radius:19px;

}.CSSTableGenerator2 tr:last-child td:first-child{

-moz-border-radius-bottomleft:19px;

-webkit-border-bottom-left-radius:19px;

border-bottom-left-radius:19px;

}.CSSTableGenerator2 tr:hover td{



}
.CSSTableGenerator2 tr:nth-child(odd){ background-color:#ffbfff; }

.CSSTableGenerator2 tr:nth-child(even) { background-color:#ffeaff; }
.CSSTableGenerator2 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;

}.CSSTableGenerator2 tr:last-child td{

border-width:0px 1px 0px 0px;

}.CSSTableGenerator2 tr td:last-child{

border-width:0px 0px 1px 0px;

}.CSSTableGenerator2 tr:last-child td:last-child{

border-width:0px 0px 0px 0px;

}

.CSSTableGenerator2 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;

}

.CSSTableGenerator2 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;

}

.CSSTableGenerator2 tr:first-child td:first-child{

border-width:0px 0px 1px 0px;

}

.CSSTableGenerator2 tr:first-child td:last-child{

border-width:0px 0px 1px 1px;

}


3. Blue Table Style .CSSTableGenerator3



Kode CSS:
.CSSTableGenerator3 {

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;

}.CSSTableGenerator3 table{

width:100%;

height:100%;

margin:0px;padding:0px;

}.CSSTableGenerator3 tr:last-child td:last-child {

-moz-border-radius-bottomright:15px;

-webkit-border-bottom-right-radius:15px;

border-bottom-right-radius:15px;

}

.CSSTableGenerator3 table tr:first-child td:first-child {

-moz-border-radius-topleft:15px;

-webkit-border-top-left-radius:15px;

border-top-left-radius:15px;

}

.CSSTableGenerator3 table tr:first-child td:last-child {

-moz-border-radius-topright:15px;

-webkit-border-top-right-radius:15px;

border-top-right-radius:15px;

}.CSSTableGenerator3 tr:last-child td:first-child{

-moz-border-radius-bottomleft:15px;

-webkit-border-bottom-left-radius:15px;

border-bottom-left-radius:15px;

}.CSSTableGenerator3 tr:hover td{



}
.CSSTableGenerator3 tr:nth-child(odd){ background-color:#aad4ff; }

.CSSTableGenerator3 tr:nth-child(even) { background-color:#ffffff; }
.CSSTableGenerator3 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;

}.CSSTableGenerator3 tr:last-child td{

border-width:0px 1px 0px 0px;

}.CSSTableGenerator3 tr td:last-child{

border-width:0px 0px 1px 0px;

}.CSSTableGenerator3 tr:last-child td:last-child{

border-width:0px 0px 0px 0px;

}

.CSSTableGenerator3 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;

}

.CSSTableGenerator3 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;

}

.CSSTableGenerator3 tr:first-child td:first-child{

border-width:0px 0px 1px 0px;

}

.CSSTableGenerator3 tr:first-child td:last-child{

border-width:0px 0px 1px 1px;

}


3.  Dark Black Table Style .CSSTableGenerator4



Kode CSS:
.CSSTableGenerator4 {

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;

}.CSSTableGenerator4 table{

width:100%;

height:100%;

margin:0px;padding:0px;

}.CSSTableGenerator4 tr:last-child td:last-child {

-moz-border-radius-bottomright:23px;

-webkit-border-bottom-right-radius:23px;

border-bottom-right-radius:23px;

}

.CSSTableGenerator4 table tr:first-child td:first-child {

-moz-border-radius-topleft:23px;

-webkit-border-top-left-radius:23px;

border-top-left-radius:23px;

}

.CSSTableGenerator4 table tr:first-child td:last-child {

-moz-border-radius-topright:23px;

-webkit-border-top-right-radius:23px;

border-top-right-radius:23px;

}.CSSTableGenerator4 tr:last-child td:first-child{

-moz-border-radius-bottomleft:23px;

-webkit-border-bottom-left-radius:23px;

border-bottom-left-radius:23px;

}.CSSTableGenerator4 tr:hover td{



}
.CSSTableGenerator4 tr:nth-child(odd){ background-color:#7f7f7f; }

.CSSTableGenerator4 tr:nth-child(even) { background-color:#b2b2b2; }
.CSSTableGenerator4 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;

}.CSSTableGenerator4 tr:last-child td{

border-width:0px 1px 0px 0px;

}.CSSTableGenerator4 tr td:last-child{

border-width:0px 0px 1px 0px;

}.CSSTableGenerator4 tr:last-child td:last-child{

border-width:0px 0px 0px 0px;

}

.CSSTableGenerator4 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;

}

.CSSTableGenerator4 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;

}

.CSSTableGenerator4 tr:first-child td:first-child{

border-width:0px 0px 1px 0px;

}

.CSSTableGenerator4 tr:first-child td:last-child{

border-width:0px 0px 1px 1px;

}


5.  Green Table Style .CSSTableGenerator5



Kode CSS:
.CSSTableGenerator5 {

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;

}.CSSTableGenerator5 table{

width:100%;

height:100%;

margin:0px;padding:0px;

}.CSSTableGenerator5 tr:last-child td:last-child {

-moz-border-radius-bottomright:9px;

-webkit-border-bottom-right-radius:9px;

border-bottom-right-radius:9px;

}

.CSSTableGenerator5 table tr:first-child td:first-child {

-moz-border-radius-topleft:9px;

-webkit-border-top-left-radius:9px;

border-top-left-radius:9px;

}

.CSSTableGenerator5 table tr:first-child td:last-child {

-moz-border-radius-topright:9px;

-webkit-border-top-right-radius:9px;

border-top-right-radius:9px;

}.CSSTableGenerator5 tr:last-child td:first-child{

-moz-border-radius-bottomleft:9px;

-webkit-border-bottom-left-radius:9px;

border-bottom-left-radius:9px;

}.CSSTableGenerator5 tr:hover td{

background-color:#ffffff;




}

.CSSTableGenerator5 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;

}.CSSTableGenerator5 tr:last-child td{

border-width:0px 1px 0px 0px;

}.CSSTableGenerator5 tr td:last-child{

border-width:0px 0px 1px 0px;

}.CSSTableGenerator5 tr:last-child td:last-child{

border-width:0px 0px 0px 0px;

}

.CSSTableGenerator5 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;

}

.CSSTableGenerator5 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;

}

.CSSTableGenerator5 tr:first-child td:first-child{

border-width:0px 0px 1px 0px;

}

.CSSTableGenerator5 tr:first-child td:last-child{

border-width:0px 0px 1px 1px;

}


6. Black and White Style .CSSTableGenerator6



Kode CSS:
.CSSTableGenerator6 {

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;

}.CSSTableGenerator6 table{

width:100%;

height:100%;

margin:0px;padding:0px;

}.CSSTableGenerator6 tr:last-child td:last-child {

-moz-border-radius-bottomright:10px;

-webkit-border-bottom-right-radius:10px;

border-bottom-right-radius:10px;

}

.CSSTableGenerator6 table tr:first-child td:first-child {

-moz-border-radius-topleft:10px;

-webkit-border-top-left-radius:10px;

border-top-left-radius:10px;

}

.CSSTableGenerator6 table tr:first-child td:last-child {

-moz-border-radius-topright:10px;

-webkit-border-top-right-radius:10px;

border-top-right-radius:10px;

}.CSSTableGenerator6 tr:last-child td:first-child{

-moz-border-radius-bottomleft:10px;

-webkit-border-bottom-left-radius:10px;

border-bottom-left-radius:10px;

}.CSSTableGenerator6 tr:hover td{



}
.CSSTableGenerator6 tr:nth-child(odd){ background-color:#e5e5e5; }

.CSSTableGenerator6 tr:nth-child(even) { background-color:#ffffff; }
.CSSTableGenerator6 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;

}.CSSTableGenerator6 tr:last-child td{

border-width:0px 1px 0px 0px;

}.CSSTableGenerator6 tr td:last-child{

border-width:0px 0px 1px 0px;

}.CSSTableGenerator6 tr:last-child td:last-child{

border-width:0px 0px 0px 0px;

}

.CSSTableGenerator6 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;

}

.CSSTableGenerator6 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;

}

.CSSTableGenerator6 tr:first-child td:first-child{

border-width:0px 0px 1px 0px;

}

.CSSTableGenerator6 tr:first-child td:last-child{

border-width:0px 0px 1px 1px;

}


7. Pink and White Table Style .CSSTableGenerator7



Kode CSS:
.CSSTableGenerator7 {

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;

}.CSSTableGenerator7 table{

width:100%;

height:100%;

margin:0px;padding:0px;

}.CSSTableGenerator7 tr:last-child td:last-child {

-moz-border-radius-bottomright:14px;

-webkit-border-bottom-right-radius:14px;

border-bottom-right-radius:14px;

}

.CSSTableGenerator7 table tr:first-child td:first-child {

-moz-border-radius-topleft:14px;

-webkit-border-top-left-radius:14px;

border-top-left-radius:14px;

}

.CSSTableGenerator7 table tr:first-child td:last-child {

-moz-border-radius-topright:14px;

-webkit-border-top-right-radius:14px;

border-top-right-radius:14px;

}.CSSTableGenerator7 tr:last-child td:first-child{

-moz-border-radius-bottomleft:14px;

-webkit-border-bottom-left-radius:14px;

border-bottom-left-radius:14px;

}.CSSTableGenerator7 tr:hover td{

background-color:#ffaaaa;




}

.CSSTableGenerator7 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;

}.CSSTableGenerator7 tr:last-child td{

border-width:0px 1px 0px 0px;

}.CSSTableGenerator7 tr td:last-child{

border-width:0px 0px 1px 0px;

}.CSSTableGenerator7 tr:last-child td:last-child{

border-width:0px 0px 0px 0px;

}

.CSSTableGenerator7 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;

}

.CSSTableGenerator7 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;

}

.CSSTableGenerator7 tr:first-child td:first-child{

border-width:0px 0px 1px 0px;

}

.CSSTableGenerator7 tr:first-child td:last-child{

border-width:0px 0px 1px 1px;

}


8. Grey Table Style .CSSTableGenerator8



Kode CSS:
.CSSTableGenerator 8{

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;

}.CSSTableGenerator8 table{

width:100%;

height:100%;

margin:0px;padding:0px;

}.CSSTableGenerator8 tr:last-child td:last-child {

-moz-border-radius-bottomright:4px;

-webkit-border-bottom-right-radius:4px;

border-bottom-right-radius:4px;

}

.CSSTableGenerator8 table tr:first-child td:first-child {

-moz-border-radius-topleft:4px;

-webkit-border-top-left-radius:4px;

border-top-left-radius:4px;

}

.CSSTableGenerator8 table tr:first-child td:last-child {

-moz-border-radius-topright:4px;

-webkit-border-top-right-radius:4px;

border-top-right-radius:4px;

}.CSSTableGenerator8 tr:last-child td:first-child{

-moz-border-radius-bottomleft:4px;

-webkit-border-bottom-left-radius:4px;

border-bottom-left-radius:4px;

}.CSSTableGenerator8 tr:hover td{

background-color:#ffffff;




}

.CSSTableGenerator8 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;

}.CSSTableGenerator8 tr:last-child td{

border-width:0px 1px 0px 0px;

}.CSSTableGenerator8 tr td:last-child{

border-width:0px 0px 1px 0px;

}.CSSTableGenerator8 tr:last-child td:last-child{

border-width:0px 0px 0px 0px;

}

.CSSTableGenerator8 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;

}

.CSSTableGenerator8 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;

}

.CSSTableGenerator8 tr:first-child td:first-child{

border-width:0px 0px 1px 0px;

}

.CSSTableGenerator8 tr:first-child td:last-child{

border-width:0px 0px 1px 1px;

}


9. Yellow Table Style .CSSTableGenerator9



Kode CSS:
.CSSTableGenerator 9{

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;

}.CSSTableGenerator9 table{

width:100%;

height:100%;

margin:0px;padding:0px;

}.CSSTableGenerator9 tr:last-child td:last-child {

-moz-border-radius-bottomright:0px;

-webkit-border-bottom-right-radius:0px;

border-bottom-right-radius:0px;

}

.CSSTableGenerator9 table tr:first-child td:first-child {

-moz-border-radius-topleft:0px;

-webkit-border-top-left-radius:0px;

border-top-left-radius:0px;

}

.CSSTableGenerator9 table tr:first-child td:last-child {

-moz-border-radius-topright:0px;

-webkit-border-top-right-radius:0px;

border-top-right-radius:0px;

}.CSSTableGenerator9 tr:last-child td:first-child{

-moz-border-radius-bottomleft:0px;

-webkit-border-bottom-left-radius:0px;

border-bottom-left-radius:0px;

}.CSSTableGenerator9 tr:hover td{

background-color:#ffffff;




}

.CSSTableGenerator9 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;

}.CSSTableGenerator9 tr:last-child td{

border-width:0px 1px 0px 0px;

}.CSSTableGenerator9 tr td:last-child{

border-width:0px 0px 1px 0px;

}.CSSTableGenerator9 tr:last-child td:last-child{

border-width:0px 0px 0px 0px;

}

.CSSTableGenerator9 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;

}

.CSSTableGenerator9 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;

}

.CSSTableGenerator9 tr:first-child td:first-child{

border-width:0px 0px 1px 0px;

}

.CSSTableGenerator9 tr:first-child td:last-child{

border-width:0px 0px 1px 1px;

}


10. Orange Table Style .CSSTableGenerator10



Kode CSS:
.CSSTableGenerator10 {

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;

}.CSSTableGenerator10 table{

width:100%;

height:100%;

margin:0px;padding:0px;

}.CSSTableGenerator10 tr:last-child td:last-child {

-moz-border-radius-bottomright:0px;

-webkit-border-bottom-right-radius:0px;

border-bottom-right-radius:0px;

}

.CSSTableGenerator10 table tr:first-child td:first-child {

-moz-border-radius-topleft:0px;

-webkit-border-top-left-radius:0px;

border-top-left-radius:0px;

}

.CSSTableGenerator10 table tr:first-child td:last-child {

-moz-border-radius-topright:0px;

-webkit-border-top-right-radius:0px;

border-top-right-radius:0px;

}.CSSTableGenerator10 tr:last-child td:first-child{

-moz-border-radius-bottomleft:0px;

-webkit-border-bottom-left-radius:0px;

border-bottom-left-radius:0px;

}.CSSTableGenerator10 tr:hover td{



}
.CSSTableGenerator10 tr:nth-child(odd){ background-color:#ffaa56; }

.CSSTableGenerator10 tr:nth-child(even) { background-color:#ffffff; }
.CSSTableGenerator10 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;

}.CSSTableGenerator10 tr:last-child td{

border-width:0px 1px 0px 0px;

}.CSSTableGenerator10 tr td:last-child{

border-width:0px 0px 1px 0px;

}.CSSTableGenerator10 tr:last-child td:last-child{

border-width:0px 0px 0px 0px;

}

.CSSTableGenerator10 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;

}

.CSSTableGenerator10 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;

}

.CSSTableGenerator10 tr:first-child td:first-child{

border-width:0px 0px 1px 0px;

}

.CSSTableGenerator10 tr:first-child td:last-child{

border-width:0px 0px 1px 1px;

}



2. Membuat tabel dalam penulisan Posting blog

Setelah salah satu Kode CSS terpasang kemudian tinggal bagaimana caranya membuat tabel yang kita inginkan di dalam Postingan Blog .
Silahkan buat post baru  pilih HTML mode, kemudian tulis kode berikut ini di tempat yang ingin anda buat tabel :

<div class="CSSTableGenerator3" >
<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>

Jadinya seperti ini :


Keterangan :
  • Pada tulisan yang berwarna merah anda ganti dengan pilihan kode CSS gaya tabel yang anda pasangkan tadi dalam HTML 
  • Ganti title dengan judul kolom anda dan Row dengan isi kolom anda
  • Untuk menambah kolom dan Baris silahkan kunjungi saja Tata cara penulisan Kode HTML pembuatan tabel dalam posting
  • Jika ingin semua Style Warna Tabel muncul dalam blog anda, salin satu persatu semua Kode CSS diatas dan letakkan tapat di atas kode   ]]>></b:skin> dan selalu sertakan kode penulisan diatas kemudian ganti yang berwarna merah dengan Kode Style Warna Tabel yang anda inginkan


Sekian artikel tentang Membuat Tabel keren di posting dengan menggunakan CSS, semoga dapat berguna untuk para pembaca semua
Terima Kasih...

3 Responses to "Membuat Tabel Variatif Keren Di Posting Blog Dengan CSS"

  1. akhirnya ketemu cara belajar css table

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Terimakasih atas postingan yang kakak bagikan sangat bagus untuk Saya yang pemula, tutorial yang kakak bagikan sangat menarik Dan mempermudahkan Saya untuk membuat css table dengan rapi. Terus bagikan blog bermanfaat lainnya ya kak, sukses untuk kedepannya. Perkenalkan nama Saya : Shofi Rachmawati ,NIM : 1922500133, Dan kunjungi juga link kampus Saya : https://www.atmaluhur.ac.id

    ReplyDelete