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

Deprecated valign

If you know well HTML, you obviously familiar with valign attribute – it’s an attribute that has usually been used inside the HTML tag <table>. The following is an example of how to use this attribute:


<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>


By the year 2000, W3C recommended to replace HTML with XHTML instead. This replacement causes several HTML tags and attributes are being deprecated. One of this deprecated attribute is valign. If you hard headed to use this tag, then your codes would not be valid when they are parsed using the validation system of W3C.

CSS Shift

in CSS, there is a property called vertical-align which akin in functionality with valign attribute. The following is an example how to use it:


<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

In several cases, the use of vertical-align outside the tag <table> often way too far from what we’ve been expecting to behave. the following would be an instance in using vertical-align inside the tag div:


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


In the very beginning, we are intended to manage element attached to div to be appeared in the bottom of the box. But then what will happen is the element would be standing in the top of the box ignoring the rule of vertical-align in which we’ve set previously. To avoid this ignorance effect, let’s move on to the next session, shall we?

Using display:table and display:table-cell

Perhaps some of you haven’t known or rarely used display:table and display:table-cell in your CSS codes. Apparently, these attributes have the same functionality with the tag <table> and <td> in XHTML. Here’s an example:


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


There you go mate, now you can breath freely and forget about valign without looking back and moving forward with the magnificent vertical-align. Happy coding!