Maddog's HTML for Real People Chapter 9, Lesson 5

[INDEX] Ch 9, L 5 - Aligning Text in Tables

If you already know how to align individual table data, and how to align the collective data in a particular row, you can skip this lesson.

HTML offers a lot of flexibility in controlling the alignment of text in tables. We can align the text horizontally in it's column for each specific table-data or table-heading, or we can even specify it for the entire table-row, in which case it applies to all the table-data in that row. This gives you a lot of control over how things look in your table. In each case, the 'ALIGN' attribute is used within the selected tag(s).The value of the 'ALIGN' attribute determines whether to align the text left, right, or center in it's column.

If you want to control the alignment in a specific table-data, use one of the following methods in the opening tag:

<TD ALIGN="LEFT"> (align this associated table-data text left in the column)
<TD ALIGN="RIGHT"> (align this associated table-data text right in the column)
<TD ALIGN="CENTER"> (align this associated table-data text centered in the column)

If you want to control the alignment in a specific table-heading, use one of the following methods in the opening tag:

<TH ALIGN="LEFT"> (align this associated table-heading text left in the column)
<TH ALIGN="RIGHT"> (align this associated table-heading text right in the column)
<TH ALIGN="CENTER"> (align this associated table-heading text centered in the column)

If you want to control the alignment for an entire table-row, use one of the following methods in the opening tag:

<TR ALIGN="LEFT"> (align this row's table-data text left in the column)
<TR ALIGN="RIGHT"> (align this row's table-data text right in the column)
<TR ALIGN="CENTER"> (align this row's table-data text centered in the column)

Some browsers will also allow you to align the text vertically in the row, that is, to the top, middle, or bottom of the row's space. To do this, the 'VALIGN' attribute is used. Thus, if you want to control the vertical alignment in a specific table-data, use one of the following methods in the opening tag:

<TD VALIGN="TOP"> (align this associated table-data text to the top in the row's space)
<TD VALIGN="BOTTOM"> (align this associated table-data text to the bottom in the row's space)
<TD VALIGN="MIDDLE"> (align this associated table-data text centered in the row's space)

If you want to control the vertical alignment in a specific table-heading, use one of the following methods in the opening tag:

<TH VALIGN="TOP"> (align this associated table-heading text to the top in the row's space)
<TH VALIGN="BOTTOM"> (align this associated table-heading text bottom in the row's space)
<TH VALIGN="MIDDLE"> (align this associated table-heading text centered in the row's space)

If you want to control the vertical alignment for an entire table-row, use one of the following methods in the opening tag:

<TR VALIGN="TOP"> (align this row's table-data text to the top in the row's space)
<TR VALIGN="BOTTOM"> (align this row's table-data text to the bottom in the row's space)
<TR VALIGN="MIDDLE"> (align this row's table-data text centered in the row's space)

Naturally, you may want to specify both the 'ALIGN' and 'VALIGN' attributes, in which case you simply include both attributes in the appropriate opening tag. For example, to specify a table-row in which all the data in that row is aligned to the bottom right, we use:

<TR ALIGN="RIGHT" VALIGN="BOTTOM">

Let's look at some source code, for demonstration purposes:

HTML Source Code Follows: 

Here's a table with default alignments:
<P>
<TABLE>
<CAPTION>Class Attendance</CAPTION>
<TR><TH>Class</TH> <TH>Jan-Mar</TH> <TH>Apr-Jun</TH> <
     TH>Jul-Sep</TH> <TH>Oct-Dec</TH> </TR>
<TR><TD>Intro to Internet</TD> <TD>14</TD> <TD>26</TD> 
     <TD>29</TD> <TD>28</TD> </TR>
<TR><TD>Building Your Web Page</TD> <TD>26</TD> <TD>25</TD> 
     <TD>28</TD> <TD>30</TD> </TR>
</TABLE>
<P>
Here's a table with <B>table-headings</B> and <B>table-data</B> in the second column aligned 'LEFT', in the third column aligned 'CENTER', in the fourth column aligned 'RIGHT, and in the fifth column aligned by default:
<P>
<TABLE>
<CAPTION>Class Attendance</CAPTION>
<TR><TH>Class</TH> <TH ALIGN="LEFT">Jan-Mar</TH> <TH ALIGN="CENTER">Apr-Jun</TH> 
     <TH ALIGN="RIGHT">Jul-Sep</TH> <TH>Oct-Dec</TH> </TR>
<TR><TD>Intro to Internet</TD> <TD ALIGN="LEFT">14</TD> <TD ALIGN="CENTER">26</TD> 
     <TD ALIGN="RIGHT">29</TD> <TD>28</TD> </TR>
<TR><TD>Building Your Web Page</TD> <TD ALIGN="LEFT">26</TD> <TD ALIGN="CENTER">25</TD> 
     <TD ALIGN="RIGHT">28</TD> <TD>30</TD> </TR>
</TABLE>
<P>
Here's a table with the first row aligned 'LEFT', the second row aligned 'RIGHT', and the third row aligned 'CENTER':
<P>
<TABLE>
<CAPTION>Class Attendance</CAPTION>
<TR ALIGN="LEFT"><TH>Class</TH> <TH>Jan-Mar</TH> <TH>Apr-Jun</TH> 
     <TH>Jul-Sep</TH> <TH>Oct-Dec</TH> </TR>
<TR ALIGN="RIGHT"><TD>Intro to Internet</TD> <TD>14</TD> <TD>26</TD> 
     <TD>29</TD> <TD>28</TD> </TR>
<TR ALIGN="CENTER"><TD>Building Your Web Page</TD> <TD>26</TD>
     <TD>25</TD> <TD>28</TD> <TD>30</TD> </TR>
</TABLE>
(End of HTML Source Code)

Demonstration Follows:

Here's a table with default alignments:

Class Attendance
Class Jan-Mar Apr-Jun Jul-Sep Oct-Dec
Intro to Internet 14 26 29 28
Building Your Web Page 26 25 28 30

Here's a table with table-headings and table-data in the second column aligned 'LEFT', in the third column aligned 'CENTER', in the fourth column aligned 'RIGHT, and in the fifth column aligned by default:

Class Attendance
Class Jan-Mar Apr-Jun Jul-Sep Oct-Dec
Intro to Internet 14 26 29 28
Building Your Web Page 26 25 28 30

Here's a table with the first row aligned 'LEFT', the second row aligned 'RIGHT', and the third row aligned 'CENTER':

Class Attendance
Class Jan-Mar Apr-Jun Jul-Sep Oct-Dec
Intro to Internet 14 26 29 28
Building Your Web Page 26 25 28 30

Here's a table with the first row vertically aligned 'TOP', the second row aligned 'BOTTOM', and the third row aligned 'MIDDLE':

Class Attendance
Class Jan-Mar Apr-Jun Jul-Sep Oct-Dec
Intro to Internet 14 26 29 28
Building Your Web Page 26 25 28 30

(Demonstration Ends)

Some of the results may be a little difficult to see in an open-text table (i.e., without borders, like these), but they'll be more obvious when we get to graphical tables in the next chapter. Hopefully, you get the general idea, and you understand the methods. The 'ALIGN' and 'VALIGN' attributes can be very useful in "tweaking" the look of your web page.

-PREVIOUS- -CHAPTER- -INDEX- -NEXT-
Overseer: Monty Northrup ... maddog@io.com ... leave e-mail ...
...to maddog 'n' miracles homepage...