HTML  PROGRAMMING  -  TABLE  TEXT  ALIGNMENT

Continuing from the previous Table section, in this section I am going to show you how to align text inside a table's column/row using the ALIGN and VALIGN Attribute/Value pairings. You should find text alignment easy to grasp simply because you have already learnt quite a lot about tags, attributes and values in general. Here is the template I was working on in the table section. It does not matter too much what text is inside each column or row as I will be changing the text content in order to show you better examples.



Fig 1.0  Table width: 1000 Pixels - A Classic web page layout

Out of the two alignment attribute/value pairings it is normally the VALIGN attribute/value pairing you want to use first. Why? Because even though you may not mind having text Left Aligned on every column/row by default, you may mind having text Vertically Aligned (Centered) on every column/row. So to begin with, apply the VALIGN attribute/value pairing.

VALIGN Attribute/Value

VALIGN stands for Vertical Align - Align the text inside a column/row either to the Top, Middle or Bottom. There is also a value called Baseline but it is not commonly used. VALIGN can be placed inside a TR opening tag or inside a TD opening tag, depending on which element (column or row) you want aligning. For example. If you put <valign="top"> inside the second TR tag all of the columns in row 2 (columns 1, 2 and 3) will be vertically aligned to the top.....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FREE Website Creation help</title>
</head>
<body>

<table width="1000" border="1">
<tr>
<td colspan="3" height="100">
ROW One (Down) - COLUMN One (Across).
</td>
</tr>
 <tr valign="top">
<td width="20%" height="300">
ROW Two (Down) - COLUMN One (Across).
</td>
<td width="60%">
ROW Two (Down) - COLUMN Two (Across).
</td>
<td width="20%">
ROW Two (Down) - COLUMN Three (Across).
</td>
</tr>
<tr>
<td colspan="3" height="80">
ROW Three (Down) - COLUMN One (Across).
</td>
</tr>
</table>

</body>
</html>



Fig 1.1  Table width: 1000 Pixels - Text is Vertically Aligned (Centered) in row 2 (columns 1, 2 and 3)

.....and if you put <valign="top"> inside the second TD tag (column 2) of the second TR tag (row 2) only the text inside column 2, row 2, will be vertically aligned to the top.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FREE Website Creation help</title>
</head>
<body>

<table width="1000" border="1">
<tr>
<td colspan="3" height="100">
ROW One (Down) - COLUMN One (Across).
</td>
</tr>
 <tr>
<td width="20%" height="300">
ROW Two (Down) - COLUMN One (Across).
</td>
<td width="60%" valign="top">
ROW Two (Down) - COLUMN Two (Across).
</td>
<td width="20%">
ROW Two (Down) - COLUMN Three (Across).
</td>
</tr>
<tr>
<td colspan="3" height="80">
ROW Three (Down) - COLUMN One (Across).
</td>
</tr>
</table>

</body>
</html>



Fig 1.2  Table width: 1000 Pixels - Text is vertically aligned (centered) to the top position in column 2, row 2, only.

As you can see. By putting <valign="top"> inside a row (TR tag) it means all of the columns (TD tags) within that row get their text vertically aligned, whereas putting <valign="top"> inside an individual column (TD tag) vertically aligns the text within that particular column only. So with that said. It is possible to have the text inside three separate columns, for example, vertically aligned three different ways; as this next example shows.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FREE Website Creation help</title>
</head>
<body>

<table width="1000" border="1">
<tr>
<td colspan="3" height="100">
ROW One (Down) - COLUMN One (Across).
</td>
</tr>
 <tr>
<td width="20%" height="300" valign="top">
ROW Two (Down) - COLUMN One (Across).
</td>
<td width="60%" valign="bottom">
ROW Two (Down) - COLUMN Two (Across).
</td>
<td width="20%" valign="middle">
ROW Two (Down) - COLUMN Three (Across).
</td>
</tr>
<tr>
<td colspan="3" height="80">
ROW Three (Down) - COLUMN One (Across).
</td>
</tr>
</table>

</body>
</html>



Fig 1.3  Table width: 1000 Pixels - Text is vertically aligned (centered) to the top position in column 2, row 2, only.

In the above example I vertically aligned columns 1, 2 and 3 of row 2 by placing <valign="top">, <valign="bottom"> and <valign="middle"> into their respective TD tags. I did not need to use <valign="middle"> though for column 3 because it would default to "middle" anyway, without <valign="middle">.

ALIGN Attribute/Value

ALIGN aligns the text inside a column/row either to the Left, Center or Right. If you want text justified you can use the Justify value - Justify stretches each line of text to make them of equal width to one another. And if you want to align text to a certain character, such as the decimal point character, you can use the Char value - Char is typically used for number data within tables and not really for website content. It is also not well supported by many web browsers. So out of these values only Left, Center and Right are commonly used.

ALIGN can be placed inside a TR opening tag or inside a TD opening tag, depending on which element (column or row) you want aligning. For example. If you put <valign="right"> inside the second TR tag all of the columns in row 2 (columns 1, 2 and 3) will be aligned to the right.....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FREE Website Creation help</title>
</head>
<body>

<table width="1000" border="1">
<tr>
<td colspan="3" height="100">
ROW One (Down) - COLUMN One (Across).
</td>
</tr>
 <tr align="right">
<td width="20%" height="300">
ROW Two (Down) - COLUMN One (Across).
</td>
<td width="60%">
ROW Two (Down) - COLUMN Two (Across).
</td>
<td width="20%">
ROW Two (Down) - COLUMN Three (Across).
</td>
</tr>
<tr>
<td colspan="3" height="80">
ROW Three (Down) - COLUMN One (Across).
</td>
</tr>
</table>

</body>
</html>



Fig 1.4  Table width: 1000 Pixels - Text is aligned to the right in columns 1, 2 and 3 of row 2.

.....and if you put <valign="right"> inside the second TD tag (column 2) of the second TR tag (row 2) only the text inside column 2, row 2, will be aligned to the right.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FREE Website Creation help</title>
</head>
<body>

<table width="1000" border="1">
<tr>
<td colspan="3" height="100">
ROW One (Down) - COLUMN One (Across).
</td>
</tr>
 <tr>
<td width="20%" height="300">
ROW Two (Down) - COLUMN One (Across).
</td>
<td width="60%" align="right">
ROW Two (Down) - COLUMN Two (Across).
</td>
<td width="20%">
ROW Two (Down) - COLUMN Three (Across).
</td>
</tr>
<tr>
<td colspan="3" height="80">
ROW Three (Down) - COLUMN One (Across).
</td>
</tr>
</table>

</body>
</html>



Fig 1.5  Table width: 1000 Pixels - Text is aligned to the right in column 2, row 2, only.

As you can see. By putting <valign="right"> inside a row (TR tag) it means all of the columns (TD tags) within that row get their text right aligned, whereas putting <valign="right"> inside an individual column (TD tag) right aligns the text within that particular column only. So with that said. It is possible to have the text inside three separate columns, for example, aligned in three different ways (i.e. left, right and centered or centered, right and left.....and so on). In this next example I have used a combination of horizontal alignment (align) and vertical alignment (valign) for each column/row. You should understand what is going on because it examples what you have learnt above.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FREE Website Creation help</title>
</head>
<body>

<table width="1000" border="1">
<tr>
<td colspan="3" height="100" align="right" valign="bottom">
ROW One (Down) - COLUMN One (Across) - <b>Right and Bottom</b>.
</td>
</tr>
<tr>
<td width="20%" height="300" align="right" valign="middle">
ROW Two (Down) - COLUMN One (Across) - <b>Right and Middle</b>.
</td>
<td width="60%" align="center" valign="top">
ROW Two (Down) - COLUMN Two (Across) - <b>Center and Top</b>.
</td>
<td width="20%" align="left" valign="bottom">
ROW Two (Down) - COLUMN Three (Across) - <b>Left and Bottom</b>.
</td>
</tr>
<tr>
<td colspan="3" height="80" align="center" valign="middle">
ROW Three (Down) - COLUMN One (Across) - <b>Center and Middle</b>.
</td>
</tr>
</table>

</body>
</html>



Fig 1.6  Table width: 1000 Pixels - A variety of alignments.

In the next section I will be teaching you how to style your text. In the meantime. If you need to know more about Tags, Attributes and Values visit the W3Schools website.

Build A Website Table Index Change Font (Text) Attributes