Cara Membuat Tabel Rata Tengah, Kanan, Kiri di Postingan Blogspot

Salam jumpa lagi rekan sekalian, beberapa waktu lalu saya membagi cara membuat table instan dengan web tables generator, hasilnya cukup memuaskan bagi saya. Tetapi setelah diterapkan di postingan, secara default (bawaan), ternyata table aligenment settingnya adalah rata kiri.

Nah, lalu bagaimana kalau kita punya keinginan supaya tabel itu bisa rata tengah atau kanan di dalam postingan rekan sekalian. Jawabannya cukup simpel  yaitu dengan menambahkan kode script HTML  di atas tag <table>  melalui kanvas HTML (Bukan Compose).

1. Cara Membuat Rata Tengah Table

Tambahkan kode <div align="center"> tepat diatas tag <table> dan kode </div> sesudah tag </table>

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:4px 4px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:4px 4px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-vs9h{font-weight:bold;background-color:#036400;color:#ffffff}
.tg .tg-cd3k{font-weight:bold;background-color:#036400;color:#ffffff;text-align:center;vertical-align:top}
.tg .tg-3fm1{font-weight:bold;background-color:#036400;color:#ffffff;text-align:right;vertical-align:top}
.tg .tg-9hbo{font-weight:bold;vertical-align:top}
.tg .tg-amwm{font-weight:bold;text-align:center;vertical-align:top}
.tg .tg-l2oz{font-weight:bold;text-align:right;vertical-align:top}
</style>
<div align="center">
<table class="tg" style="undefined;table-layout: fixed; width: 303px">
<colgroup>
<col style="width: 94px">
<col style="width: 108px">
<col style="width: 101px">
</colgroup>
  <tr>
    <th class="tg-vs9h"></th>
    <th class="tg-cd3k">Rata Tengah</th>
    <th class="tg-3fm1"></th>
  </tr>
  <tr>
    <td class="tg-9hbo">1</td>
    <td class="tg-amwm">2</td>
    <td class="tg-l2oz">3</td>
  </tr>
  <tr>
    <td class="tg-9hbo">4</td>
    <td class="tg-amwm">5</td>
    <td class="tg-l2oz">6</td>
  </tr>
</table>
</div>

Maka hasil dari table tersebut seperti di bawah ini


Rata Tengah
1 2 3
4 5 6

2. Cara Membuat Rata Kanan Table

Tambahkan kode <div align="right"> tepat diatas tag <table> dan kode </div> sesudah tag </table>

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:4px 4px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:4px 4px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-vs9h{font-weight:bold;background-color:#036400;color:#ffffff}
.tg .tg-cd3k{font-weight:bold;background-color:#036400;color:#ffffff;text-align:center;vertical-align:top}
.tg .tg-3fm1{font-weight:bold;background-color:#036400;color:#ffffff;text-align:right;vertical-align:top}
.tg .tg-9hbo{font-weight:bold;vertical-align:top}
.tg .tg-amwm{font-weight:bold;text-align:center;vertical-align:top}
.tg .tg-l2oz{font-weight:bold;text-align:right;vertical-align:top}
</style>
<div align="right">
<table class="tg" style="undefined;table-layout: fixed; width: 303px">
<colgroup>
<col style="width: 94px">
<col style="width: 108px">
<col style="width: 101px">
</colgroup>
  <tr>
    <th class="tg-vs9h"></th>
    <th class="tg-cd3k"></th>
    <th class="tg-3fm1">Rata Kanan</th>
  </tr>
  <tr>
    <td class="tg-9hbo">1</td>
    <td class="tg-amwm">2</td>
    <td class="tg-l2oz">3</td>
  </tr>
  <tr>
    <td class="tg-9hbo">4</td>
    <td class="tg-amwm">5</td>
    <td class="tg-l2oz">6</td>
  </tr>
</table>
</div>

Maka hasil dari table tersebut seperti di bawah ini
Rata Kanan
1 2 3
4 5 6


3. Cara Membuat Rata Kiri Table


Untuk membuat rata kiri, sudah saya utarakan pada awal tadi, bahwa rata kiri adalah sudah menjadi aturan default untuk table. Jadi tidak usah ditambahkan kode apa-apa. Tulis atau Copy saja apa adanya, secara Otomatis sudah Rata Kiri.

Demikian pengalaman yang saya dapat, semoga dapat membantu rekan sekalian yang membutuhkan.

Berlangganan update artikel terbaru via email:

0 Response to "Cara Membuat Tabel Rata Tengah, Kanan, Kiri di Postingan Blogspot"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel