Friday, 22 June 2012

How to Align contents in a cell of HTML Tables

You can align the contents in a cell, so they look more presentable. To align a cells contents, the ALIGN attribute is used in the TD part of the tag. To centre-align our headings, the code would be this:

<TR>
<TD align="center">CSS Property</TD>
<TD align="center">Internet Explorer</TD>
<TD align="center">FireFox</TD>
<TD align="center"> Chrome</TD>
<TD align="center">Safari</TD>
<TD align="center">Opera</TD>
</TR>

The other two Horizontal alignment options are "Left" and "Right".

Alignment can also be vertical. You use the VALIGN tag for vertical alignment. The positions for vertical alignment are: TOP, MIDDLE and BOTTOM.

<TD VALIGN = Top>
<TD VALIGN = Middle>
<TD VALIGN = Bottom>

You can combine horizontal and vertical alignment to give nine positions in all:

<TD VALIGN = Top Align = Left>
<TD VALIGN = Top Align = Center>
<TD VALIGN = Top Align = Right>
<TD VALIGN = Middle Align = Left>
<TD VALIGN = Middle Align = Center>
<TD VALIGN = Middle Align = Right>
<TD VALIGN = Bottom Align = Left>
<TD VALIGN = Bottom Align = Center>
<TD VALIGN = Bottom Align = Right>

In a browser, here's what a table of all nine positions would do to text:

HTML table cell alignment positions

No comments:

Post a Comment