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:
Judul Spoiler
.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:
Judul Spoiler
.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:
Judul Spoiler
.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:
Judul Spoiler
.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:
Judul Spoiler
.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 :
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>
0 comments:
Kode Smiley Untuk Komentar
Post a Comment