5 style table keren untuk blogger

Label

Anda ingin membuat table lebih keren untuk posting di blog ,Lihatlah 5 style table dibawah ini,mungkin anda berminat untuk menggunakanya?caranya sangat mudah sob dinggal pilih tema yang kamu suka dan copy CSS'nya pasang di tempelate anda dan gunakan HTML'nya untuk membuat table di postingan. .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!!

Css table keren untuk blogger

5 style table keren
  • Masuk ke dasbord blogger>>tempelate>>edit HTML
  • Cari kode ]]></b:skin> pada tempelate anda
  • Pilih salah satu style table di bawah ini
  • Copy CSS'nya dan letakan tepat diatas ]]></b:skin>
css table for blogger
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;

}
Css table keren untuk blogger
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;

}
Css table keren untuk blogger
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;

}
Css table keren untuk blogger
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;

}
Css table keren untuk blogger
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;

}
cara menggunakan di postingan
Masuk ke Post Editor > pilih mode HTML 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>
KETERANGAN:
Untuk menambah atau mengurangi jumlah Kolom dan Baris pada tabel, sebagai berikut :
  • Jika ingin menambah kolom pada table tambahkan kode <td>Title 4</td> setelah kode <td>Title 3</td>
  • Dan Untuk mengurangi kolom hapus saja kode berjudul "Title" tersebut <td>Title </td>
  • Untuk Menambah baris atau row baru, tambahkan kode berikut;
  • <tr><td >Row 4</td><td>Row 4</td><td>Row 4</td></tr>
     

Disclaimer : Gambar,Link download atau video pada artikel di website ini terkadang berasal dari berbagai sumber media lain. Hak cipta sepenuhnya dipegang oleh sumber tersebut.

2 Comment

NO SPAM :
Komentar memasukan link aktif tidak akan di tampilkan atau terhapus secara otomatis.
EmoticonEmoticon

Contact Us

Name

Email *

Message *