1. Deprecated valign
2. CSS Shift
3. Unexpected Behavior on Tableless
4. Using display:table and display:table-cell

Deprecated valign

Apabila anda pengguna HTML tentu tidak asing dengan atribut valign yang biasa kita taruh di dalam tag <table>. Berikut ini contoh penggunaan atribut tsb:


<table cellpading="0" cellspacing="0">
  <tr>
    <td valign="top">valign: top</td>
    <td valign="middle">valign: middle</td>
    <td valign="bottom">valign: bottom</td>
  </tr>
</table>


Pada tahun 2000, W3C merekomendasikan penggunaan XHTML untuk menggantikan HTML.
Pergantian ini menyebabkan beberapa tag dan atribut HTML sudah tidak direkomendasikan lagi untuk dipakai, salah satunya adalah atribut valign. Apabila tetap menggunakannya, skrip kode anda akan mendapatkan hasil tidak valid apabila di-parsing menggunakan sistem validasi W3C.

CSS Shift

Pada CSS terdapat properti vertical-align yang memiliki kesamaan fungsi dengan atribut valign. Berikut ini contoh penggunaannya:


<table cellpading="0" cellspacing="0">
  <tr>
    <td style="vertical-align:top;">vertical-align: top</td>
    <td style="vertical-align:middle;">vertical-align: middle</td>
    <td style="vertical-align:bottom;">vertical-align: bottom</td>
  </tr>
</table>


Unexpected Behavior on Tableless

Dalam beberapa kasus, penggunaan properti vertical-align diluar tag <table> sering tidak sesuai yang diharapkan. Berikut ini contoh penggunaan vertical-align di dalam tag div:


<div style="width:440px;height:80px;vertical-align:bottom;">
  vertical-align: bottom (huh?)
</div>


Pada awalnya kita bermaksud agar elemen di dalam div akan berada di bagian bawah dari kotak. Namun yang terjadi elemen tersebut tetap di atas, tanpa menghiraukan aturan vertical-align yang sudah kita pasang. Untuk mengatasi hal ini mari kita lanjut ke sesi berikutnya.

Using display:table and display:table-cell

Mungkin sebagian dari anda belum tahu atau jarang menggunakan display:table dan display:table-cell dalam kode-kode CSS anda. Ternyata atribut-atribut ini memiliki kesamaan fungsi dengan tag <table> dan <td> pada XHTML. Berikut cara penggunaannya:


<div style="display:table;width:440px;height:80px;">
  <div style="display:table-cell;vertical-align:bottom;">
    vertical-align: bottom
  </div>
</div>


Oke kawan, sekarang kita bisa dengan nyaman meninggalkan valign dan beralih ke vertical-align. Selamat coding!