Senin, 25 April 2016

Cara mengatur teks rata kanan dan kiri pada tabel HTML.

Sebelum membaca artikel ini bagi yang baru mempelajari cara membuat tabel dengan HTML sebaiknya anda membaca lebih dulu mengenai cara membuat dan posting tabel dengan kode HTML agar nantinya bisa lebi jelas dalam mempelajari Cara mengatur teks rata kanan dan kiri pada tabel HTML.
Dalam menulis teks pada tabel pasti kita menginginkan teks tersebut pada posisi rata tengah,
rata kiri atau rata kanan. Bahkan kita juga perlu untuk mengatur jarak dari tepi border dengan teks.
Nah lalu bagaimana agar keinginan kita terpenuhi ? Jangan khawatir semua ada solusinya dan itu tidak sesulit yang kita bayangkan.
Untuk mengatur agar teks yang ditulis dalam tabel sesuai dengan keinginan kita, perlu kode-kode tertentu antara lain :
  • align  : untuk mengatur perataan teks secara horisontal (mendatar)
  • align = "left"        : untuk mengatur teks rata kiri.
  • align = "center"  : untuk mengatur teks rata tengah.
  • lign= "right"        : untuk mengatur teks rata kanan.
  • valign  : untuk mengatur perataan teks secara vertikal (tegak).
  • valign ="top"          : untuk mengatur teks pada posisi atas.
  • valign ="middle"   : untuk mengatur teks pada posisi tengah.
  • valign = "bottom" : untuk mengatur teks pada posisi bawah.

Cara mengatur teks rata kanan dan kiri pada tabel HTML.

Contoh kode HTML untuk membuat tabel yang didalamnya terdapat teks yang rata kiri, tengah dan kanan serta teks pada posisi atas, tengah dan bawah bisa anda lihat  seperti di bawah.

Kodenya :

<table border="2" width="100%">
<tr height="50px">
<td align="left">RATA KIRI</td>
<td>TANPA PERATAAN</td>
</tr>
<tr height="50px">
<td align="center">RATA TENGAH</td>
<td>TANPA PERATAAN</td>
</tr>
<tr height="50px">
<td align="right">RATA KANAN</td>
<td>TANPA PERATAAN</td>
</tr>
<tr height="100px">
<td align="left" valign="top">RATA KIRI dan RATA ATAS</td>
<td>TANPA PERATAAN</td>
</tr>
<tr height="100px">
<td align="left" valign="middle">RATA KIRI dan RATA TENGAH (vertikal)</td>
<td>TANPA PERATAAN</td>
</tr>
<tr height="100px">
<td align="left" valign="bottom">RATA KIRI dan RATA BAWAH</td>
<td>TANPA PERATAAN</td>
</tr>
</table>
Hasilnya :

RATA KIRI TANPA PERATAAN
RATA TENGAH TANPA PERATAAN
RATA KANAN TANPA PERATAAN
RATA KIRI posisi ATAS TANPA PERATAAN
RATA KIRI posisi TENGAH (vertikal) TANPA PERATAAN
RATA KIRI posisi BAWAH TANPA PERATAAN

2 komentar: