How to Align Contents in Table Cells

We 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 Height = 50 width = 100>
<TD COLSPAN = 2 ALIGN = Center> Home Team </TD>
<TD COLSPAN = 2 ALIGN = Center> Away Team </TD>
</TR>

Again, note the American spelling of centre - "ER" not "RE". You can add a splash of bold to the text in the cell by highlighting the text and clicking on Format > Bold.

As you can see, the centring has made the table look a lot better. There are a lot more alignment options for cell contents than CENTER. The three basic horizontal alignment options are: LEFT, CENTER and RIGHT.

If you want, you can use vertical alignment instead of horizontal. You use the VALIGN tag for vertical alignment. The positions for vertical alignment are: TOP, MIDDLE and BOTTOM.

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

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

You can use your HTML Editor to Align the football scores in your table so that they are all in the centre of the cells. Here's how:

<TD ALIGN = Center VALIGN = Middle>2</TD>

In the next part, you'll see how to change the colour of a table cell.

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses