Ketekape

Tabel di dalam blog dapat memudahkan untuk membaca sebuah data. Biasanya tabel digunakan untuk menampilkan data spesifikasi, data nilai, dan data-data lainnya. Sehingga tabel memegang peranan yang tidak bisa dianggap enteng. Untuk itu berikut saya bagikan lngakah-langkah untuk membuat tabel keren di postingan blog :

Langkah

Pertama masuk ke dashboard blog anda masing-masing,
Setelah itu pada menu dashboard pilih menu template, lalu pilih menu edit html,
Setelah itu cari kode ]]></b:skin> dengan caraCtrl+F,
Setelah itu copy script di bawah ini lalu paste tepat di atas ]]></b:skin> ,

Style 1

Demo

 /* CSS Post Table */
body
{
   font-family: sans-serif;
    
}
.pricing_table_wdg {  
 border:1px solid #c4cbcc;
 border-radius:4px;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 float:left;
 margin-top: 25px;
}
.pricing_table_wdg ul { 
 list-style:none; 
 float:left; 
 width:147px; 
 margin:0; 
 border:1px solid #f2f3f3;
 padding:5px;
 text-align:center;
 background-color:#FFF;
}
.pricing_table_wdg ul:hover { 
 -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -o-transform: scale(1.1);
   -moz-box-shadow:3px 5px 7px rgba(0,0,0,.7);
   -webkit-box-shadow: 3px 5px 7px rgba(0,0,0,.7);
   box-shadow:3px 5px 7px rgba(0,0,0,.7);
 cursor:pointer;
 background:#d8e9f9;
}
.pricing_table_wdg ul li {  
 border-bottom:1px dashed #cfd2d2;
 padding:10px 0;
}
.pricing_table_wdg ul li:first-child { 
 color:#FFFFFF;
 font-size:18px;
 font-weight:bold;
 background:#2e818f;
}
.pricing_table_wdg ul li:nth-child(2) { 
 background:#fbfbfb;
}
.pricing_table_wdg ul li:nth-child(3) { 
 font-size:12px;
 font-weight:bold;
}
.pricing_table_wdg ul li:nth-child(n+4) { 
 font-size:14px;
}
.pricing_table_wdg ul li:last-child a { 
 color:#F0F0F0;
 text-decoration:none;
 font-weight:bold;
 display:block;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 border:1px solid #c4cbcc;
 padding:10px;
 margin:5px 0;
 background: #0061bb; /* Old browsers */
 background: -moz-linear-gradient(top, #0061bb 0%, #164e82 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0061bb), color-stop(100%,#164e82)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #0061bb 0%,#164e82 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #0061bb 0%,#164e82 100%); /* Opera11.10+ */
 background: -ms-linear-gradient(top, #0061bb 0%,#164e82 100%); /* IE10+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0061bb', endColorstr='#164e82',GradientType=0 ); /* IE6-9 */
 background: linear-gradient(top, #0061bb 0%,#164e82 100%); /* W3C */
}

5. Setelah itu simpan template,

6. Lalu setelah itu pada menu dashboard blog masuk ke menu pos, untuk menerapkan tabel di postingan, masuk ke salah-satu pos yang ingin diberi tabel,

7. Lalu copy script di bawah ini untuk menjalankan tabel pada postingan, paste script tersebut pada postingan yang ingin di beri tabel,

 


<section class="container">
<h2>CSS3 Pricing Table - Demo</h2>
<div class="pricing_table_wdg">
  <ul>
   <li>Standard</li>
   <li>$20</li>
   <li>Perfect for those getting started with our app.</li>
   <li>15 Projects</li>
   <li>5GB Storage</li>
   <li>Unlimited Users</li>
   <li>No Time Tracking</li>
   <li>Enchaned Security</li>
   <li></li>
   <li><a href="" class="buy_now">Buy Now</a></li>
  </ul>
  <ul>
   <li>Premium</li>
   <li>$60</li>
   <li>Perfect for those getting started with our app.</li>
   <li>15 Projects</li>
   <li>5GB Storage</li>
   <li>Unlimited Users</li>
   <li>No Time Tracking</li>
   <li>Enchaned Security</li>
   <li></li>
   <li><a href="" class="buy_now">Buy Now</a></li>
  </ul>  
  <ul>
   <li>Professional</li>
   <li>$80</li>
   <li>Perfect for those getting started with our app.</li>
   <li>15 Projects</li>
   <li>5GB Storage</li>
   <li>Unlimited Users</li>
   <li>No Time Tracking</li>
   <li>Enchaned Security</li>
   <li></li>
   <li><a href="" class="buy_now">Buy Now</a></li>
  </ul>
  <ul>
   <li>Plus</li>
   <li>$100</li>
   <li>Perfect for those getting started with our app.</li>
   <li>15 Projects</li>
   <li>5GB Storage</li>
   <li>Unlimited Users</li>
   <li>No Time Tracking</li>
   <li>Enchaned Security</li>
   <li></li>
   <li><a href="" class="buy_now">Buy Now</a></li>
  </ul>
  <ul>
   <li>Maximum</li>
   <li>$120</li>
   <li>Perfect for those getting started with our app.</li>
   <li>15 Projects</li>
   <li>5GB Storage</li>
   <li>Unlimited Users</li>
   <li>No Time Tracking</li>
   <li>Enchaned Security</li>
   <li></li>
   <li><a href="" class="buy_now">Buy Now</a></li>
  </ul>
</div>
  </section>

Jangan lupa mengubah jenis pos dari compose menjadi html saat melakukan paste script tersebut!

8. Publikasikan.

Style 2

Demo

 
<div class="table-wrapper">
<table class="fl-table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>2</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>3</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>4</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>5</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>6</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>7</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>8</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>9</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td></tr>
<tr>
<td>10</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tbody>
</table>
</div>

 /* CSS Post Table */
*{box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;}
body{
font-family: Helvetica;
-webkit-font-smoothing: antialiased;
background: rgba( 71, 147, 227, 1);}
h2{
text-align: center;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
color: white;
padding: 30px 0;}
/* Table Styles */
.table-wrapper{
margin: 10px 70px 70px;
box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );}
.fl-table {
border-radius: 5px;
font-size: 12px;
font-weight: normal;
border: none;
border-collapse: collapse;
width: 100%;
max-width: 100%;
white-space: nowrap;
background-color: white;}
.fl-table td, .fl-table th {
text-align: center;
padding: 8px;}
.fl-table td {
border-right: 1px solid #f8f8f8;
font-size: 12px;}
.fl-table thead th {
color: #ffffff;
background: #4FC3A1;}
.fl-table thead th:nth-child(odd) {
color: #ffffff;
background: #324960;}
.fl-table tr:nth-child(even) {
background: #F8F8F8;}
/* Responsive */
@media (max-width: 767px) {
.fl-table {
display: block;
width: 100%;}
.table-wrapper:before{
content: "Scroll horizontally >";
display: block;
text-align: right;
font-size: 11px;
color: white;
padding: 0 0 10px;}
.fl-table thead, .fl-table tbody, .fl-table thead th {
display: block;}
.fl-table thead th:last-child{
border-bottom: none;}
.fl-table thead {
float: left;}
.fl-table tbody {
width: auto;
position: relative;
overflow-x: auto;}
.fl-table td, .fl-table th {
padding: 20px .625em .625em .625em;
height: 60px;
vertical-align: middle;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
width: 120px;
font-size: 13px;
text-overflow: ellipsis;}
.fl-table thead th {
text-align: left;
border-bottom: 1px solid #f7f7f9;}
.fl-table tbody tr {
display: table-cell;}
.fl-table tbody tr:nth-child(odd) {
background: none;}
.fl-table tr:nth-child(even) {
background: transparent;}
.fl-table tr td:nth-child(odd) {
background: #F8F8F8;
border-right: 1px solid #E6E4E4;}
.fl-table tr td:nth-child(even) {
border-right: 1px solid #E6E4E4;}
.fl-table tbody td {
display: block;
text-align: center;}}

Style 3

Demo

 

<article>
    <h2>How they compare</h2>
   
    <table class="vitamins">
        <thead>
            <tr>
                <th>Vitamin</th>
                <th>Classification</th>
                <th>Sources</th>
                <th>Adequate Intake (AI)</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="4">
                    <p><strong>mcg</strong> stands for micrograms. <strong>IU</strong> stands for International Units</p>
               
                </td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>A</td>
                <td>fat-soluble</td>
                <td>Dark-colored fruit</td>
                <td>3,000 IU/day</td>
            </tr>
            <tr>
                <td>B</td>
                <td>water-soluble</td>
                <td>Lean meats</td>
                <td>1 mcg/day</td>
            </tr>
            <tr>
                <td>B 1</td>
                <td>water-soluble</td>
                <td>Lean meats</td>
                <td>2.2 mcg/day</td>
            </tr>
            <tr>
                <td>B 6</td>
                <td>water-soluble</td>
                <td>Nuts</td>
                <td>1.7 mg/day</td>
            </tr>
            <tr>
                <td>B 12</td>
                <td>water-soluble</td>
                <td>Meat</td>
                <td>2.4 mcg/day</td>
            </tr>
            <tr>
                <td>C</td>
                <td>water-soluble</td>
                <td>Broccoli</td>
                <td>90 mg/day</td>
            </tr>
            <tr>
                <td>D</td>
                <td>fat-soluble</td>
                <td>Fish</td>
                <td>600 IU/day</td>
            </tr>
            <tr>
                <td>E</td>
                <td>fat-soluble</td>
                <td>Avocado</td>
                <td>33 IU/day</td>
            </tr>
            <tr>
                <td>K</td>
                <td>fat-soluble</td>
                <td>Cabbage</td>
                <td>120 mcg/day</td>
            </tr>
        </tbody>
    </table>
</article>

 /* CSS Post Table */
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Oxygen);

/* Page layout */

body {
    background-color: #fff;
    margin: 0;
    padding: 0;
    font-family: 'Oxygen', sans-serif;
    color: #444;
    font-size: 15px;
    line-height: 18px;
    font-weight: 300;
}

header {
    margin: 0;
    background: #000;
    height: 65px;
    padding: 1px;
}

article {
    margin: 40px 30px;
}

h1 {
    font-family: 'Open Sans Condensed', sans-serif;
    letter-spacing: 1px;
    font-size: 2.3em;
    line-height: 44px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 900;
    margin: 0;
    padding: 10px 0 0 30px;
    letter-spacing: 2px;
}

h2 { margin: 20px 0 10px 0;
    font-weight: 900;
}

p {
    margin: 20px 0 5px 0;
}


/* Table Layout */

table.vitamins {
    margin: 20px 0 0 0;
    border-collapse: collapse;
    border-spacing: 0;
    background: #212121;
    color: #fff;
}

table.vitamins th, table.vitamins td {
    text-align: center;
}

table.vitamins thead {
    line-height: 12px;
    background: #2e63e7;
    text-transform: uppercase;
}

table.vitamins thead th {
    color: #fff;
    padding: 10px;
    letter-spacing: 1px;
    vertical-align: bottom;
}

table.vitamins thead th:nth-child(1) {
    width: 20%;
    text-align: left;
    padding-left: 20px;
}

table.vitamins thead th:nth-child(2) {
    width: 30%;
}

table.vitamins thead th:nth-child(3) {
    width: 35%;
}

table.vitamins thead th:nth-child(4) {
    width: 15%;
}

table.vitamins tbody {
    font-size: 1em;
    line-height: 15px;
}

table.vitamins tbody tr {
    border-top: 2px solid rgba(109, 176, 231, 0.8);
    transition: background 0.6s, color 0.6s;
}

table.vitamins tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.2);
}

table.vitamins tbody tr:hover {
    color: #000;
    background: rgba(255, 255, 255, 0.7);
    font-weight: 900;
}

table.vitamins tbody td {
    padding: 12px;
}

table.vitamins tbody tr:hover td:first-child {
    background: rgba(0,0,0,0);
}

table.vitamins tbody td:first-child {
    text-align: left;
    padding-left: 20px;
    font-weight: 700;
    background: rgba(109, 176, 231, 0.35);
    transition: backgrounf 0.6s;
}

table.vitamins tfoot {
    font-size: 0.8em;
}

table.vitamins tfoot tr {
    border-top: 2px solid #2e63e7;
}

table.vitamins tfoot td {
    color: rgba(255,255,215,0.6);
    text-align: left;
    line-height: 15px;
    padding: 15px 20px;
}


/* Mobile Layout */

@media screen and (max-width: 400px) {
    h1 {
        font-size: 34px;
        line-height: 36px;
        padding-left: 15px;
    }

    article {
        margin: 10px 15px;
    }

    table.vitamins {
        font-size: 0.8em;
    }
}

Style 4

Demo

 
<!-- DIRTY Responsive pricing table HTML -->

<article>

<ul>
  <li class="bg-purple">
    <button>Self-Employed</button>
  </li>
  <li class="bg-blue">
    <button>Simple Start</button>
  </li>
  <li class="bg-blue active">
    <button>Essentials</button>
  </li>
  <li class="bg-blue">
    <button>Plus</button>
  </li>
</ul>  

<table>
  <thead>
    <tr>
      <th class="hide"></th>
      <th class="bg-purple">Self-Employed</th>
      <th class="bg-blue">Simple Start</th>
      <th class="bg-blue default">Essentials</th>
      <th class="bg-blue">Plus</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monthly price</td>
      <td><span class="txt-top">&pound;</span><span class="txt-l">6</span></td>
      <td><span class="txt-top">&pound;</span><span class="txt-l">7</span></td>
      <td class="default"><span class="txt-top">&pound;</span><span class="txt-l">15</span></td>
      <td><span class="txt-top">&pound;</span><span class="txt-l">25</span></td>
    </tr>
    <tr>
      <td colspan="5" class="sep">Get started easily</td>
    </tr>
    <tr>
      <td>Includes free updates and new features as they become available</td>
      <td><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>No software to install — sign up online in moments</td>
      <td><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>Import customer & supplier details from Excel, Outlook and .csv</td>
      <td></td>
      <td><span class="tick">&#10004;</span></td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>Accept card payments in QuickBooks Online</td>
      <td></td>
      <td><span class="tick">&#10004;</span></td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td colspan="5" class="sep">Stay protected and get support</td>
    </tr>
    <tr>
      <td>Free telephone and online support</td>
      <td></td>
      <td><span class="tick">&#10004;</span></td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>Strong encryption protects your business data</td>
      <td><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
    <tr>
      <td>Automatic data backups</td>
      <td><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
      <td class="default"><span class="tick">&#10004;</span></td>
      <td><span class="tick">&#10004;</span></td>
    </tr>
  </tbody>
</table>
  
</article>

 /* CSS Post Table */
/* DIRTY Responsive pricing table CSS */

/* 
- make mobile switch sticky
*/
* {
  box-sizing:border-box;
  padding:0;
  margin:0;
   outline: 0;
}
body { 
  font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size:14px;
  padding:14px;
}
article {
  width:100%;
  max-width:1000px;
  margin:0 auto;
  height:1000px;
  position:relative;
}
ul {
  display:flex;
  top:0px;
  z-index:10;
  padding-bottom:14px;
}
li {
  list-style:none;
  flex:1;
}
li:last-child {
  border-right:1px solid #DDD;
}
button {
  width:100%;
  border: 1px solid #DDD;
  border-right:0;
  border-top:0;
  padding: 10px;
  background:#FFF;
  font-size:14px;
  font-weight:bold;
  height:60px;
  color:#999
}
li.active button {
  background:#F5F5F5;
  color:#000;
}
table { border-collapse:collapse; table-layout:fixed; width:100%; }
th { background:#F5F5F5; display:none; }
td, th {
  height:53px
}
td,th { border:1px solid #DDD; padding:10px; empty-cells:show; }
td,th {
  text-align:left;
}
td+td, th+th {
  text-align:center;
  display:none;
}
td.default {
  display:table-cell;
}
.bg-purple {
  border-top:3px solid #A32362;
}
.bg-blue {
  border-top:3px solid #0097CF;
}
.sep {
  background:#F5F5F5;
  font-weight:bold;
}
.txt-l { font-size:28px; font-weight:bold; }
.txt-top { position:relative; top:-9px; left:-2px; }
.tick { font-size:18px; color:#2CA01C; }
.hide {
  border:0;
  background:none;
}

@media (min-width: 640px) {
  ul {
    display:none;
  }
  td,th {
    display:table-cell !important;
  }
  td,th {
    width: 330px;
  
  }
  td+td, th+th {
    width: auto;
  }
}

 /* JavaScript Post Table */
// DIRTY Responsive pricing table JS

$( "ul" ).on( "click", "li", function() {
  var pos = $(this).index()+2;
  $("tr").find('td:not(:eq(0))').hide();
  $('td:nth-child('+pos+')').css('display','table-cell');
  $("tr").find('th:not(:eq(0))').hide();
  $('li').removeClass('active');
  $(this).addClass('active');
});

// Initialize the media query
  var mediaQuery = window.matchMedia('(min-width: 640px)');
  
  // Add a listen event
  mediaQuery.addListener(doSomething);
  
  // Function to do something with the media query
  function doSomething(mediaQuery) {    
    if (mediaQuery.matches) {
      $('.sep').attr('colspan',5);
    } else {
      $('.sep').attr('colspan',2);
    }
  }
  
  // On load
  doSomething(mediaQuery);

Please Wait Link Download...

Demikian artikel saya tentang cara membuat tabel keren di postingan blog, semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar anda, terima kasih.

Ketekape

Labels

Technology

Cara Membuat Tabel Di Postingan Blog ( Koleksi Table )

Langkah

Style 1

Style 2

Style 3

Style 4

MKRdezign

Contact Form