Cara Membuat Tabel di WordPress

1
17
Cara Membuat Tabel di WordPress

Tabel adalah sekumpulan data yang berisi sejumlah informasi-informasi yang terdaftar dan tersusun di dalamnya secara rapi. Tabel biasa digunakan untuk menampung suatu data berbentuk teks. Banyak kebutuhan yang mengharuskan kita membuat tabel. Ketika kita ingin menyimpan suatu data di MySQL misal, kita membutuhkan tabel untuk menyimpannya, di microsoft office sendiri jelas fitur tabel ini telah tersedia di dalamnya, tabel dapat dibuat di manapun, terlebih membuat tabel secara manual dengan menggunakan tangan, lalu bagaimana cara membuat tabel di WordPress? simak penjelasannya di bawah ini

Di WordPress secara default sampai saat ini belum ada fitur untuk membuat tabel, tapi meskipun belum tersedia, kita bisa membuatnya dan mengkreasikannya secara manual. Dikarenakan pembuatannya yang masih menggunakan cara manual, maka kita musti berurusan dengan code-code, dalam hal ini kode-kode HTML dan CSS yang terlibat di dalamnya. Bagi yang tidak mau ribet dan tidak mengerti kode-kode HTML dan CSS, sobat bisa langsung copy paste kode di bawah ini untuk kemudian sobat gunakan di blog sobat. Berikut langkah-langkah cara membuat tabel di WordPress:

Baca juga:  Merubah Format Tanggal di WordPress

Langkah 1:
Copy kode di bawah ini untuk diletakkan di file style.css

/* Tabel 
--------- */
.testing-wrapper{border:1px solid #e7e7e7;margin-bottom:1.5em;overflow:hidden}
.testing-title{background-color:#f6f6f6;border-bottom:1px solid #e7e7e7;margin:0;padding:10px}
.testing-wrapper .testing-list{list-style:none;margin:0;padding:0}
.testing-list li{background:#e7e7e7;border-bottom:1px solid #e7e7e7;position:relative;list-style:none;padding:10px}
.testing-list li:nth-child(even){background-color:#fafafa}
.testing-list li:last-child{border-bottom:1px solid #e7e7e7}
.testing-summary-title{margin-bottom:5px}
.testing-star{position:absolute;right:10px;top:10px;font-size:1em}
.testing-desc{float:left;width:75%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:2%}
.testing-total-wrapper{-moz-box-sizing:border-box;float:right;padding-right:10px;position:relative;width:21.8%;margin:0}
.kiri{font-weight:700}
.testing-total-box{border:1px solid #e7e7e7;border-top:0;border-bottom:0;border-left:0;border-right:0;display:block;font-size:40px;font-weight:700;text-align:center;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:35px 0 20px}

Langkah 2:
Copy kode di bawah ini untuk kemudian diletakkan di halaman posting yang Anda kehendaki




<div id="testing" class="testing-wrapper ">



<ul class="testing-list">


<li><span class="kiri">Author </span>


<div class="testing-star">Ufothemes</div>


</li>





<li><span class="kiri">Price </span>


<div class="testing-star">$0</div>


</li>





<li><span class="kiri">Responsive </span>


<div class="testing-star">Yes</div>


</li>





<li><span class="kiri">Status </span>


<div class="testing-star">Free</div>


</li>





<li><span class="kiri">Visit Demo</span>


<div class="testing-star"><a class="flat" href="http://demo.ufothemes.com/interstellar/" target="_blank" rel="nofollow noopener">Demo</a></div>


</li>





<li><span class="kiri">Get Hosting</span>


<div class="testing-star"><a class="flat" href="https://www.centerklik.com/bluehost" target="_blank" rel="nofollow noopener">Get Hosting</a></div>


</li>





<li><span class="kiri">Links Download</span>


<div class="testing-star"><a class="flat" href="http://ufothemes.com/themes/interstellar/" target="_blank" rel="nofollow noopener">Download Theme</a></div>


</li>



</ul>


</div>


<span style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" data-mce-type="bookmark" class="mce_SELRES_start"></span>

Hanya dengan dua langkah di atas sobat sudah berhasil membuat tabel dan tinggal menyesuaikannya saja. Mungkin di luar sana ada plugin khusus untuk membuat tabel, namun adakalanya plugin yang kita gunakan tersebut tidak sesuai dengan yang kita inginkan, adakalanya membuat tabel dengan cara manual menggunakan kode ini lebih kamu sukai. So, tutorial tentang cara membuat tabel di WordPress ini tak ada salahnya untuk kamu coba!

Baca juga:  Membuat Menu Yang Berbeda Untuk Setiap User di Yii2

Demikianlah cara membuat tabel di WordPress,
Semoga bermanfaat!

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here