Saturday, March 26, 2011

Aligning Text At the Top a Table Cell

Well, am back again to blogspot after a 9 months break, that was quite refreshing and eyeopening.

Quick to the point, I really had some trouble trying to align text at the top of a table cell, which is understandable, given my little experience in front end development.

Any HTML/CSS developer has heard of the 'text-align' CSS property that can be assigned to virtually all HTML elements. It not only controls horizontal alignment of text but all other HTML objects including div's, and tables. It only takes 3 values which set the alignment to be right, left or center. Notice you can set vertical alignment using this property. So what do you do if you have a table row, in which some cells have text spanning multiple lines while others have single lines but are displayed at the center (vertically)? which is the default for most browsers?

Here is the solution. use CSS property 'vertical-align' which takes 'bottom' and 'top' values for bottom alignment and top alignment respectively.

Here is sample CSS for setting all table data cells to be vertically aligned.

td{
vertical-align:top;
}

Well, have a good time coding in HTML.