Alignment: Tables
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Alignment: Tables
In its simplest form, a table is useful for organizing data into rows (horizontal) and columns (vertical). For example:
<TABLE> <TR> <TD> Ducks In A Row products represent a unique concept in rubber stamping. <TD> Our original designs created by Joan Farber, internationally recognized illustrator, are unlike anything found in the stamp market today. <TD> Joan Farber is a freelance illustrator, designer, fine artist, and teacher who has done work for such notable companies as American Express, CBS Records, . . . </TABLE>
The TABLE element is a container, so it requires both the start tag and the end tag. Everything in-between is part of the table. The TR tag (also a container, but the end tag is optional) designates the beginning of a row (horizontal), and each of the TD tags (also containers with optional end tags) mark the beginning of a column (vertical). Because there are one TR and three TD tags, there are one row and three columns in this table (see Figure 1).
){kind=link}
Figure 1 A simple table example.
The table itself becomes the size of all the elements it contains. If the elements within the table are not fixed-size, the table gravitates to the size of the window in which it is displayed, and gives equal space to each of the elements in the table. It's easier to see what a table is doing if you turn on its borders with the BORDER attribute in the TABLE tag. Figure 2 shows the this HTML table:
){kind=link}
<TABLE BORDER> <TR> <TD> Ducks In A Row products represent a unique concept in rubber stamping. <TD> Our original designs created by Joan Farber, internationally recognized illustrator, are unlike anything found in the stamp market today. <TD> Joan Farber is a freelance illustrator, designer, fine artist, and teacher who has done work for such notable companies as American Express, CBS Records, . . . </TABLE>
Figure 2 A table with the BORDER attribute.
You may have noticed that the columns do not line up at the top. That's because the default behavior is for each column to vertically align to the middle. This can be controlled with the VALIGN attribute for either the TR (to apply it to a whole row) or TD (for column-only) tags. Here's the same table with VALIGN in both the TR and TD elements:
<TABLE BORDER>
<TR VALIGN=TOP>
<TD> Ducks In A Row products represent a unique concept in rubber stamping.
<TD VALIGN=BOTTOM>
Our original designs created by Joan Farber, internationally recognized
illustrator, are unlike anything found
in the stamp market today.
<TD> Joan Farber is a freelance illustrator, designer, fine artist,
and teacher who has done work for such notable companies as American Express,
CBS Records, . . .
</TABLE>
We used VALIGN=TOP in the TR element to align all the cells in the row to the top (see Figure 3). We also used VALIGN=BOTTOM in the second TD to align only that cell to the bottom. So, the first and third columns are top-aligned, and the second column is bottom-aligned.
){kind=link}
Figure 3 Using VALIGN to vertically align table cells.
Sometimes, you may want headings for your different columns. You can do this with the TH element. TH works just like TD, except that it displays the cell in a bold heading style (as shown in Figure 4).
){kind=link}
Figure 4 A table with TH cells for headings.
Finally, a caption for the entire table can sometimes help to identify it on the page.
<TABLE BORDER> <CAPTION> <BIG> About The Company </BIG> </CAPTION> <TR> <TH> Partnership <TH> Design <TH> Bio <TR VALIGN=TOP> <TD> Ducks In A Row products represent a unique concept in rubber stamping. <TD> Our original designs created by Joan Farber, internationally recognized illustrator, are unlike anything found in the stamp market today. <TD> Joan Farber is a freelance illustrator, designer, fine artist, and teacher who has done work for such notable companies as American Express, CBS Records, . . . </TABLE>
The CAPTION element works a lot like TITLE, but for a table. The text in the CAPTION is displayed above the table by default, and uses the default font for text. Here, we used BIG to make it larger (see Figure 5).
){kind=link}
Figure 5 The table with a caption.
If you prefer that the caption display at the bottom of the table, you may use ALIGN=BOTTOM in the CAPTION element, like this (see Figure 6):
){kind=link}
<CAPTION ALIGN=BOTTOM> <BIG> About The Company </BIG> </CAPTION>
Figure 6 The caption with ALIGN=BOTTOM.
Coloring and Spacing in Tables
Let's remove the border from the table and experiment with color for identifying the different cells in the table. To start with, we'll use the BGCOLOR attribute for the whole table to see what happens:
<TABLE BGCOLOR="#FFFFCC"> <TR> <TH> Partnership <TH> Design <TH> Bio <TR VALIGN=TOP> <TD> Ducks In A Row products represent a unique concept in rubber stamping. <TD> Our original designs created by Joan Farber, internationally recognized illustrator, are unlike anything found in the stamp market today. <TD> Joan Farber is a freelance illustrator, designer, fine artist, and teacher who has done work for such notable companies as American Express, CBS Records, . . . </TABLE>
Here, we took out the BORDER attribute and put in a BGCOLOR attribute instead (see Figure 7). The BGCOLOR attribute works exactly the same way as the BGCOLOR attribute to the BODY tag, which we have used quite a bit already.
){kind=link}
Figure 7 The table with the BGCOLOR attribute.
When used with the TABLE element, the BGCOLOR attribute sets a default background color for the entire table.
You have probably noticed that the space between the cells is not colored. We'll show you how to control—or remove—spaces a bit later.
We can also use the BGCOLOR attribute with the TR element to set the background color of a row, and with the TD element to set the background color for an individual cell.
<TABLE BGCOLOR="#FFFFCC"> <TR BGCOLOR="#CCCCFF"> <TH> Partnership <TH> Design <TH> Bio <TR VALIGN=TOP> <TD> Ducks In A Row products represent a unique concept in rubber stamping. <TD BGCOLOR="#CCFFFF"> Our original designs created by Joan Farber, internationally recognized illustrator, are unlike anything found in the stamp market today. <TD> Joan Farber is a freelance illustrator, designer, fine artist, and teacher who has done work for such notable companies as American Express, CBS Records, . . . </TABLE>
Here, we set the color for an entire row (the row with the headings in it) and for an individual cell (the middle one in the second row). All the other cells are the default color, set in the TABLE tag (see Figure 8).
){kind=link}
Figure 8 The BGCOLOR attribute in rows and cells.