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.

Comments

Popular posts from this blog

Cara Mudah Membuat Jadwal Piket /Jadwal Dinas 3 Shift

100+ Nama Baptis Katolik Berdasarkan Pesta Nama orang Kudus dari Buku Puji Syukur

Lirik, Arti dan Makna Lagu Imagination - Shawn Mendes