Annabella's HTML Help .... EZ PRINT!

MORE TABLE ATTRIBUTES

For the full version of this page, go to http://www.annabella.net/tables3.html

ALIGNING DATA

In all previous examples, the position of the data within the cell has been left to the default settings. You can set the alignment of your data within each cell, using the ALIGN (horizontal alignment) and VALIGN (vertical alignment) attributes.

ALIGN and VALIGN are attributes of the TD and TH tags.

align=left / align=center / align=right
The TH default setting is to the center of the cell.
The TD default setting is to the left of the cell.

valign=top / valign=middle / valign=bottom
The TH default setting is to the middle of the cell.
The TD default setting is to the middle of the cell.

If you do not specify the align or valign attributes, then the data will go to the default settings, which will be different depending on whether it is a TD or TH cell.

TR ALIGN

ALIGN is also an attribute of the TR tag.

Instead of specifying the alignment attributes within every cell in a table row, you can preset the alignment for the entire row by specifying ALIGN or VALIGN within the TR tag.

<tr align=right valign=bottom>
<td>data</td>... etc... etc... etc

If you want to have the alignment for one or more of the cells different from the overall TR alignment setting, then simply specify the alignment you wish within that data cell. The TD or TH alignment will over-ride the pre-set TR alignment.

<tr align=right valign=bottom>
<td>data</td>
<td align=center valign=middle>data</td>
<td>data</td>
<td>data</td>
</tr>

ALIGNING THE TABLE

ALIGN is an attribute of the table tag.

This determines the position of your table on the page. You can align your table left, right or center. If you do not specify the alignment,(as in all the previous examples) it will default to the left.

NOTE: When the align=right or align=left attribute is used, the text that follows the table will appear at the side of the table.

ALIGN=RIGHT

<table border=1 cellpadding=2 width=50% align=right>

The text that follows forms at the top next to the table. That is just fine... unless you do not want it that way! I have experimented with lots of different tags, but I cannot find a way to stop the text from forming beside the table. The only way I have found is to just keep on writing or put in a string of <br><br>... etc until you get below the table and can then carry on as normal!
ALIGN=LEFT

<table border=1 cellpadding=2 width=50% align=left>

The text that follows forms at the top next to the table. You can of course, make use of the text forming to the side of the table! This gives an interesting layout and make a change from centering everything. Once again, the text continues down the side of the table until it reaches the bottom margin, then it forms across the whole page as normal.
ALIGN=CENTER

You can also use the align=center attribute to center your table, or, you could use the <center> and </center> tags outside of your table.

<table border=25 cellpadding=2 width=65% align=center>

This time the following text forms below the table, and not down the sides of it.

COLSPAN

COLSPAN is an attribute of the TD and TH tags.

You can make your data cells span more than one column by using the colspan attribute. This can be added to td or th cells.

colspan is expressed as the number of rows or cells, that you want this particular cell to span.

<table border=5 cellpadding=2 width=65%>
<tr><th colspan=3>Australian Flowers</th></tr>
<tr><td>Waratah</td><td>... etc... etc

CAPTIONS

CAPTION is an attribute of the TABLE tag.

To add a caption to your table, simply insert
<caption> caption text</caption>.
These tags are inserted just after the opening <table> tag.

<table border=5 cellpadding=5 width=50%>
<caption><b>The Beatles!</b><caption>

By changing the tag to <caption align=bottom> caption text </caption>, we can put the caption below the table.