5 style table keren untuk blogger

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!!

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>

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;

}

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;

}

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;

}

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;

}

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>

Andoelsean

5 style table keren untuk blogger

Unknown

2 Comment

Contact Us

Media Sosial

Andoelsean

Popular

Tags

Andoelsean

5 style table keren untuk blogger

SHARE ARTIKEL

Artikel Terkait

Unknown

2 Comment

Contact Us

Media Sosial

Andoelsean

Popular

Tags