Minggu, 22 Juni 2014

Cara Membuat Tabel Keren Dengan CSS dalam Postingan

Cara Membuat Tabel Keren Dengan CSS dalam Postingan

Apakah saat ini anda ingin membuat sebuah tabel dalam postingan ??. Kalau jawabannya Ya, mungkin anda akan mencari bentuk tampilan tabel yang berbeda dari yang sering diposting blogger lainnya.

Nah berikut saya ingin membagikan 10 macam tabel yang cantik, elegan dan terlihat profesional dibandingkan yang lain. Bukannya merendahkan yang lain, karena pada prinsipnya adalah sama menggunakan kode HTML juga namun ditambah dengan kode CSS sebagai pelengkap make-up dari tabel kita kali ini.

Cara memasang kode CSS ikuti langkah dibawah ini :

  • Masuk Blogger.com > pilih Template > Edit HTML
  • Tekan Control + F > cari kode ]]></b:skin>
  • Letakkan salah satu kode CSS pilihan Anda diatas tag ]]></b:skin>
  • Save Template


Blue Table Rounded Style


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


Red Table Rounded Style


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


Dark Table Rounded Style


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


Magenta Table Rounded Style


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


Orange Table Normal Style


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


Yellow Table Normal Style


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


Green Table Rounded Style


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


Grey Table Normal Style


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


Black White Table Rounded Style


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


Red White Table Rounded Style


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

Cara pemakaian :

Ketika akan membuat posting baru, pergunakan halaman HTML sebagai editor postingan anda (bukan Compose), mengetik seperti biasa kemudian kalau ingin membuat tabel copy-paste kode HTML dibawah ini.


<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 3</td><td>Row 3</td><td>Row 3</td></tr><tr><td >Row 4</td><td>Row 4</td><td>Row 4</td></tr>
</table></div>

Sumber
http://smaga-tik.blogspot.com/2013/07/cara-membuat-tabel-keren-dengan-css.html?showComment=1403493973227#c1231479145481005146
Diposting oleh di Tidak ada komentar:

Kamis, 19 Juni 2014

Database Administrator

Database Administrator

Ditulis pada 
Seorang database administrator (DBA) adalah Orang yang mempunyai kekuasaan sebagai pusat pengontrolan terhadap seluruh sistem baik data maupun program yang mengakses data disebut sebagai database administrator. Suatu organisasi pada umumnya menugaskan seorang administrator database (database administrator=DBA) untuk mengatur database dan aktivitas lainnnya yang berkaitan. Administrator database memiliki enam tanggung jawab utama yaitu: (1) desain database, (2) implementasi dan operasional database, (3) koordinasi dengan pengguna, (4) backup dan recovery, (5) memantau capaian, dan (6) keamanan sistem. DBA sering disebut juga database koordinator database programmer, dan terkait erat dengan database analyst, database modeler, programmer analyst, dan systems manager. Suatu perusahaan mungkin mengharuskan seorang DBA memiliki sertifikasi atau gelar untuk  sistem database (misalnya, Microsoft Certified Database Administrator).
Tugas-tugas seorang administrator database bervariasi, tergantung pada job description-nya, perusahaan, peraturan Teknologi Informasi (TI), fitur-fitur teknis, dan juga kemampuan dari DBMS yang diberikan. Semua itu termasuk pemulihan setelah bencana (backups and testing of backups), analisis kinerja dan tuning, pemeliharaan data dictionary, dan desain database.
Peran DBA meliputi:
  1. Pemasangan perangkat lunak baru - Ini adalah tugas DBA untuk menginstal versi baru dari perangkat lunak DBMS, aplikasi perangkat lunak, dan perangkat lunak lain yang berhubungan dengan administrasi DBMS. Penting bahwa DBA atau anggota staf IS menguji software baru sebelum pindah ke sebuah lingkungan produksi.
  2. Konfigurasi hardware dan software dengan sistem administrator – Dalam banyak kasus, perangkat lunak sistem hanya dapat diakses oleh administrator sistem. Dalam kasus ini, DBA bekerja sama dengan administrator sistem untuk melakukan instalasi perangkat lunak, dan untuk mengkonfigurasi hardware dan software agar berfungsi secara optimal dengan DBMS.
  3. Pengamanan administrasi - Salah satu tugas utama DBA adalah untuk memantau dan mengelola keamanan DBMS. Hal ini melibatkan penambahan dan menghapus pengguna, pemberian quota, audit, dan memeriksa masalah keamanan.
  4. Analisis data – DBA menganalisis data yang tersimpan dalam database dan membuat rekomendasi yang berkaitan dengan kinerja dan efisiensi penyimpanan data. Ini termasuk penggunaan indeks efektif, memungkinkan “Paralel Query” eksekusi, atau fitur khusus DBMS lainnya.
  5. Database design (awal) - DBA dapat terlibat di awal tahap desain database, hal ini bertujuan menghilangkan berbagai masalah yang mungkin terjadi. DBA tahu bahwa DBMS dan sistem, dapat menunjukkan potensi masalah, dan dapat membantu pengembangan kinerja tim dengan pertimbangan khusus.
  6. Data pemodelan dan optimasi – pemodelan data befungsi untuk mengoptimalkan sistem tata letak untuk mengambil yang paling keuntungan dari I / O subsystem.
  7. Bertanggung jawab atas administrasi perusahaan yang berhubungan dengan database dan analisis, desain, dan penciptaan database baru.
  • Data modeling, database optimasi, pemahaman dan pelaksanaan skema, dan kemampuan untuk menafsirkan dan menulis kompleks Structured Query Language (SQL) queries.
  • sistem untuk secara proaktif memonitor kinerja optimal dan kapasitas kendala.
  • Menetapkan standar dan praktik terbaik untuk SQL.
  • Berinteraksi dengan dan pelatih pengembang di SQL scripting.
bidang study yang relevan untuk menjadi DBA adalah ICT (information and communication technologi) atau pelatihan langsung dari vendor seperti ORACLE, Microsoft, SQL Server, MySQL, dll. Tentunya penguasaan terhadap SQL (Structured Query Language) mutlak diperlukan. DBA harus memiliki keahlian menterjemahkan requirement proses bisnis ke obyek-obyek dalam database seperti tabel, query\view dan stored procedure disamping keahliannya dalam optimasi database seperti tuning, indexing, clustering, backup data, maintain high availability dan sebagainya.
Keahlian yang Diperlukan DBA:
  1. Menguasai ERD, SQL dan desain database secara mendalam
  2. Menguasai berbagai teknik optimalisasi/tuning, backup dan maintain database
  3. Menguasai secara mendalam salah satu atau lebih RDBMS beserta tools yang ada.
  4. Memahami tentang salah satu platform/bahasa pemprograman untuk mengakses database
  5. Menguasai teknologi server, storage, operating system yang berkaitan dengan implementasi database

Perbandingan profesi DBA dengan di Negara lain (sebutkan negaranya)
Perbedaan Gaji rata-rata untuk DBA , “di Australia, negara bagian victoria”  adalah AUD(Dolar Australia) 71.596 didasarkan pada sekitar tiga tahun pengalaman IT yang relevan. Sedangkan jika di Indonesia ? Prospek pekerjaan ini baik, dan lapangan kerja tetap stabil selama lima tahun terakhir. Gaji DBA biasanya kisaran gajinya 5.000.000 – 15.000.000 dengan pengalaman kerja 4 – 7 tahun.
Diposting oleh di Tidak ada komentar:

Rabu, 04 Juni 2014

Date Format pada SQL Server

Date Format pada SQL Server

15.08  ,   1 comment

Pada SQL Server format datetime yang tersimpan di database adalah “MM/DD/YYYY”. Terkadang kita tidak membutuhkan format tanggal sepert  MM/DD/YYYY, tetapi ketika melakukan query SELECT hasilnya akan berformat  “Mon DD YYYY 1 HH:MIAM (or PM)”.  Nah, disini saya akan membagikan beberapa format yang mungkin berguna sesuai kebutuhan. Dengan menggunakan CONVERT function, kita akan mengubah tipe data yang tadinya DATETIME menjadi VARCHAR dan hasil yang ditampilkan berupa STRING bukan DATETIME lagi.

Date FormatSQL StatementOutput
MM/DD/YYSELECT CONVERT(VARCHAR(8), GETDATE(), 1) AS [MM/DD/YY]05/03/12
MM/DD/YYYYSELECT CONVERT(VARCHAR(10), GETDATE(), 101) AS [MM/DD/YYYY] 05/03/2012
DD/MM/YYSELECT CONVERT(VARCHAR(8), GETDATE(), 3) AS [DD/MM/YY]03/05/2012
DD/MM/YYYYSELECT CONVERT(VARCHAR(10), GETDATE(), 103) AS [DD/MM/YYYY]03/05/2012
DD Mon YYSELECT CONVERT(VARCHAR(9), GETDATE(), 6) AS [DD MON YY]03 Jun 12
DD Mon YYYYSELECT CONVERT(VARCHAR(11), GETDATE(), 106) AS [DD MON YYYY] 03 Jun 2012
Mon DD, YYSELECT CONVERT(VARCHAR(10), GETDATE(), 7) AS [Mon DD, YY]Jun 03, 12
Mon DD, YYYYSELECT CONVERT(VARCHAR(12), GETDATE(), 107) AS [Mon DD, YYYY]Jun 03, 2012
HH:MM:SSSELECT CONVERT(VARCHAR(8), GETDATE(), 108)05:42:36
Mon DD YYYY HH:MI:SS:MMMAM (or PM) SELECT CONVERT(VARCHAR(26), GETDATE(), 109)Jun 03 2012 12:35:31:198PM
YY/MM/DDSELECT CONVERT(VARCHAR(8), GETDATE(), 11) AS [YY/MM/DD]12/05/03
YYYY/MM/DDSELECT CONVERT(VARCHAR(10), GETDATE(), 111) AS [YYYY/MM/DD]2012/05/03
YYYYMMDDSELECT CONVERT(VARCHAR(8), GETDATE(), 112) AS [YYYYMMDD]20120503
DD Mon YYYY HH:MM:SS:MMM(24h)SELECT CONVERT(VARCHAR(24), GETDATE(), 113)03 Apr 2012 00:43:59:179
Format tanggal yang banyak digunakan biasanya ya itu, hhe..Semoga bermanfaat bagi pembaca
Diposting oleh di Tidak ada komentar:
Langganan: Komentar (Atom)