Chapter 10, Lesson 8

If you already thoroughly understand alignment in table-cells, you can skip this lesson.

We've already covered the alignment of caption and cell contents (text) in the last chapter, but we hadn't introduced graphical tables at that time, and you may have found it somewhat difficult to visualize the alignments taking place when no cell borders were present. In this lesson, we'll provide some examples of alignment, so that you can see the effects, and review the source code. Let's go directly to the examples:

<TABLE BORDER=10 CELLPADDING=10 CELLSPACING=10>
<CAPTION>"DUMB" TABLE</CAPTION>
<TR><TH HEIGHT=50 WIDTH=100>whut?</TH>
    <TH HEIGHT=50 WIDTH=100>huh?</TH>
    <TH HEIGHT=50 WIDTH=100>duh</TH></TR>
<TR><TD HEIGHT=50 WIDTH=100>um</TD>
    <TD HEIGHT=50 WIDTH=100>snore</TD>
    <TD HEIGHT=50 WIDTH=100>uhhh</TD></TR>
<TR><TD HEIGHT=50 WIDTH=100>yow</TD>
    <TD HEIGHT=50 WIDTH=100>ack</TD>
    <TD HEIGHT=50 WIDTH=100>zzz</TD></TR>
</TABLE>
<BR><BR><BR><BR>
<TABLE BORDER=10 CELLPADDING=10 CELLSPACING=10>
<CAPTION ALIGN=TOP >"DUMB" TABLE</CAPTION>
<TR ALIGN=LEFT VALIGN=TOP><TH HEIGHT=50 WIDTH=100>whut?</TH>
    <TH HEIGHT=50 WIDTH=100>huh?</TH>
    <TH HEIGHT=50 WIDTH=100>duh</TH></TR>
<TR ALIGN=CENTER VALIGN=MIDDLE><TD HEIGHT=50 WIDTH=100>um</TD>
    <TD HEIGHT=50 WIDTH=100>snore</TD>
    <TD HEIGHT=50 WIDTH=100>uhhh</TD></TR>
<TR ALIGN=RIGHT VALIGN=BOTTOM><TD HEIGHT=50 WIDTH=100>yow</TD>
    <TD HEIGHT=50 WIDTH=100>ack</TD>
    <TD HEIGHT=50 WIDTH=100>zzz</TD></TR>
</TABLE>
<BR><BR><BR><BR>
<TABLE BORDER=10 CELLPADDING=10 CELLSPACING=10>
<CAPTION ALIGN=BOTTOM >"DUMB" TABLE</CAPTION>
<TR><TH HEIGHT=50 WIDTH=100 ALIGN=LEFT VALIGN=TOP>whut?</TH>
    <TH HEIGHT=50 WIDTH=100 ALIGN=CENTER VALIGN=MIDDLE>huh?</TH>
    <TH HEIGHT=50 WIDTH=100 ALIGN=RIGHT VALIGN=BOTTOM>duh</TH></TR>
<TR><TD HEIGHT=50 WIDTH=100 ALIGN=LEFT VALIGN=TOP>um</TD>
    <TD HEIGHT=50 WIDTH=100 ALIGN=CENTER VALIGN=MIDDLE>snore</TD>
    <TD HEIGHT=50 WIDTH=100 ALIGN=RIGHT VALIGN=BOTTOM>uhhh</TD></TR>
<TR><TD HEIGHT=50 WIDTH=100 ALIGN=LEFT VALIGN=TOP>yow</TD>
    <TD HEIGHT=50 WIDTH=100 ALIGN=CENTER VALIGN=MIDDLE>ack</TD>
    <TD HEIGHT=50 WIDTH=100 ALIGN=RIGHT VALIGN=BOTTOM>zzz</TD></TR>
</TABLE>

"DUMB" TABLE

whut?	huh?	duh
um	snore	uhhh
yow	ack	zzz

"DUMB" TABLE

whut?	huh?	duh
um	snore	uhhh
yow	ack	zzz

"DUMB" TABLE

whut?	huh?	duh
um	snore	uhhh
yow	ack	zzz

For all the demonstration tables, we've explicitly sized every cell to 100 x 50 (W x H) so that the cell will be large enough to observe the text word being aligned inside it. In addition, we've applied border, cellpadding, and cellspacing (all of these sized at 10 pixels), so that we can see the effect of alignment with relation to those attributes. Let's look at our results:

• In the first table, we have not specified any alignments, therefore the browser placed the contents of each cell according to its default rules. We observe that the table caption is top-centered, the table-headings are centered both horizontallly and vertically in the cell, and the table-data are left-aligned horizontally, but middle-aligned vertically.
• In the second table, we explicitly specified 'TOP' alignment for the caption, 'LEFT' and 'TOP' alignment for the entire first row, 'CENTER' and 'MIDDLE' alignment for the entire second row, and 'RIGHT' and 'BOTTOM' alignment for the entire third row. Notice that in this table, only the '<TR>' tags get explicitly aligned. The individual cells take their alignment from the row specification.
• In the third table, we explicitly aligned the caption at the 'BOTTOM'. We also removed the alignment attributes from the '<TR>' tags, and specified each cell's alignment individually. The first cell in each row received 'LEFT' and 'TOP' alignment , the second cell in each row received 'CENTER' and 'MIDDLE' alignment, and the third cell in each row received 'RIGHT' and 'BOTTOM' alignment.

We ask that you kindly overlook the author's glaring lack of creativity in building table content. [at least nobody will accuse me of plagiarizing]

---

Overseer: Monty Northrup ... ... leave e-mail ...

---