Download Now
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">£</span><span class="txt-l">6</span></td>
<td><span class="txt-top">£</span><span class="txt-l">7</span></td>
<td class="default"><span class="txt-top">£</span><span class="txt-l">15</span></td>
<td><span class="txt-top">£</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">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>No software to install — sign up online in moments</td>
<td><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Import customer & supplier details from Excel, Outlook and .csv</td>
<td></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Accept card payments in QuickBooks Online</td>
<td></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</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">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Strong encryption protects your business data</td>
<td><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Automatic data backups</td>
<td><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</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.
