Cara Menciptakan Tabel Rata Tengah, Kanan, Kiri Di Postingan Blogspot

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

Nah, kemudian bagaimana jikalau kita punya cita-cita supaya tabel itu sanggup rata tengah atau kanan di dalam postingan rekan sekalian. Jawabannya cukup simpel  yaitu dengan menambahkan instruksi script HTML  di atas tag <table>  melalui kanvas HTML (Bukan Compose).

1. Cara Membuat Rata Tengah Table

Tambahkan instruksi <div align="center"> sempurna diatas tag <table> dan kode </div> setelah 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 ibarat 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 ibarat di bawah ini

		Rata Kanan
1	2	3
4	5	6

3. Cara Membuat Rata Kiri Table

Untuk menciptakan rata kiri, sudah aku utarakan pada awal tadi, bahwa rata kiri yakni sudah menjadi hukum default untuk table. Makara tidak usah ditambahkan instruksi apa-apa. Tulis atau Copy saja apa adanya, secara Otomatis sudah Rata Kiri.

Demikian pengalaman yang aku dapat, supaya sanggup membantu rekan sekalian yang membutuhkan.
Sumber https://www.myavitalia.com/

Baca juga: