Tables address this problem by placing visible or invisible borders between page elements that you can control. The best way to understand this process is to view it in action. Let's say I want to organize a piece of text by columns like this:
Building tables is big fun. It just takes some practice. | Tables allow you to control the placement of text and graphics. |
Here's the code needed to accomplish this degree of control in a webpage.
<TR>
<TD WIDTH=100 VALIGN=TOP>
</TD>
<TD WIDTH=300 VALIGN=TOP>
Building tables is big fun. It just takes some practice.
</TD>
<TD WIDTH=20 VALIGN=TOP>
</TD>
<TD WIDTH=300 VALIGN=TOP>
Tables allow you to control the placement of text and graphics.
</TD>
</TR>
</TABLE>
Advanced table attributes: Here are a list of advanced attributes you can play with to add more control over individual cells. By the way, if you like this table, you can grab the code by viewing the page source.
WIDTH | Width of a table element in pixels |
HEIGHT | Height of a table element in pixels |
BORDER | Width of the border that surrounds your table |
CELLSPACING | Thickness of your cell dividers |
CELLPADDING | Space between cell edge and your text and/or graphics |
VALIGN | Vertical alignment - can be CENTER, TOP, or BOTTOM |
ALIGN | Horizontal alignment - can be CENTER, TOP, or BOTTOM |
COLSPAN | Number of columns spanned by a cell in a complex table. |
ROWSPAN | Number of rows spanned by a cell in a complex table. |
BGCOLOR | Color of a cell's background |
A note about text color: you can also change the color of text inside a specific cell. After you've closed out your <TD> tag, add a <font> tag to the text. Here's an example: <FONT COLOR=red> results in red text. It's a good idea to use a </font> tag when you wish to stop coloring the text. To help you gain more control over your text colors, Michele D. Jinkerson offers a great color chart.
Here's a complex table that employs each of these attributes:
Note that I've "valigned" this text to the top of the COLSPAN cell and aligned it horizontally to the right. Also note the use of cell padding between the text and the cell edge. | |
Notice this text is "valigned" on the bottom. | Notice this text is "valigned" on the center. |
<TR>
<TD HEIGHT=100 VALIGN=top ALIGN=right BGCOLOR=VIOLET COLSPAN=2><FONT COLOR=white>
Note that I've "valigned" this text to the top of the COLSPAN cell and aligned it horizontally to the right. Also note the use of cell padding between the text and the cell edge.
</TD>
<TR>
<TD HEIGHT=100 VALIGN=BOTTOM BGCOLOR=red> <FONT COLOR=black> Notice this text is "valigned" on the bottom.
</TD>
<TD HEIGHT=100 VALIGN=CENTER BGCOLOR=red> <FONT COLOR=white> Notice this text is "valigned" on the center.
</TD>
</TR>
</TABLE>
By now, you know enough to work on your own tables. To be honest, the process can be difficult. Each detail must be correct. If the browser doesn't recognize your code - because of a typo, perhaps - it'll generally ignore it or display something pretty ugly. But with some practice, you can use these tags with impressive results. Good luck!