Aligning Data TR Align Aligning the Table

Colspan Rowspan Captions

In all previous table examples, the position of the data within the cell has been left to the "default" settings. Exactly what that default setting is, however, varies with the browser that is being used to view your page.

To ensure that your table displays the way you want it to look in all browsers, then you should always define the alignments that you want.

Define the alignment of your data within each cell using:

ALIGN (horizontal alignment)     align=left / align=center / align=right

VALIGN (vertical alignment)     valign=top / valign=middle / valign=bottom

TD default settings If you are using IE6 to view this table, the the data in this particular cell will be centered. If you are using Netscape or IE5, then this data will align to the left.
td align=left valign=top	td align=left valign=middle	td align=left valign=bottom
td align=center valign=top	td align=center valign=middle	td align=center valign=bottom
td align=right valign=top	td align=right valign=middle	td align=right valign=bottom

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

The alignment for the whole row has been specified in the TR tag.

data

data

data

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>

The middle cell has it's own alignment specified, which over-rides the pre-set TR alignment.

data

data

data

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.

<table border=5 cellpadding=2 width="30%" align=right>

Roses	Tulips
Orchids	Daisies
Asters	Zinnias

See how this text is forming 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!

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

Apple	Pear	Mango
Peach	Orange	Banana

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.

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>

Fiat	Volvo
Mercedes	Ford
Bentley	Holden

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

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="50%">
<tr><th colspan=3>Australian Flowers</th></tr>
<tr><td>Waratah</td><td> ... etc ... etc

ROWSPAN is an attribute of the TD and TH tags.

<table border=5 cellpadding=2 width="65%">
<tr><th colspan=4>Australian Animals</th></tr>
<tr><th rowspan=3>What an odd collection of beasties!!</th><th>Mammals</th> ... etc ... etc

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>
<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.