Back to Main Page

E-mail me! Click here!

Still More Table Attributes

This is the third of four pages detailing tables. This page assumes that you have read and have at least a rudimentary understanding of the material presented on the first page. If you need to take another look, you can click here to go back.

How to Align Data in Individual Cells

Up until now, all of our tables have been as wide as the data contained within. Using two new attributes, align and valign data can be aligned however you wish inside of data and header cells. These tags are always functions of the <td> and <th> tags.

Align controls alignment to left/right/center.
Valign defines top/middle/bottom.

The HTML needed to make this happen is presented in the following table:

Aligning an Entire Table Row

At some point, you may wish to align large amounts of data (i.e. every cell in a given row). This can be acomplished without tons of extraneous typing. Using the align and valign tags from the last section, you can align a whole row by placing the attribute inside the <tr> tag.

<tr align=center valign=top>

Pehaps you want to set the alignment of one or more cells different from the rest of the row. Even when an alignment attribute has been applied to the <tr> tag, you can still add one to a <th> or <td>. The alignment for an individual cell will over-ride the alignment of an entire row.

<tr align=center valign=top>
<td>Washington</td>
<td align=right valign=bottom>Oregon</td>
<td>Idaho</td>
</tr>

Aligning a Whole Table

When used as an attribute of the <table> tag, align will shift the alignment of an entire table to the left, right, or center. This will have no effect on data contained withing individual cells. Remember, they (cells) are similar to miniature frames. If you wish to align data within cells, that must be done separately. If no alignment is specified, a table will, by default, align to the left.

<table border="2" width="27%" align=left>

Text typed after a table that is aligned left or right will form beside the table. The only way I know to stop this from happening is to type a long string of <br> tags until the text is below the table.

<table border="2" width="75%" align=right>

Of course, there is no law against making use of text that appears next to a table. It will give you an interesting layout, and can be a very nice change from centering everything. Notice how the text begins to form across the bottom of the table once it runs out of space to the side.

The align=center attribute also works here, and can be used interchangable with the <center> and </center> tags when placed outside of the table commands.

<table border="2" width="27%" align=center>

In this case, text will always form below the table, and never to either side.

Colspan

Colspan is easy to remember if you think of it as "Column Span", and this is exactly what it does. Using this attribute, you can make your data and/or header cells span more that one column in a table. Colspan is an attribute of the <td> and <th> tags, and is expressed as a number of columns that you want the affected cell to span.

<th colspan="3">Deciduous Trees</th>

Rowspan

Based upon what you just learned about the colspan attribute, it should be easy to guess what rowspan does. Roswspan is also expressed as a number of cells, but this time it is the number of rows you want the cell to span.

<th rowspan="2">Local Trees</th>

Next, Please...

You're almost there, champ. Only one more page, and it's the niftiest yet. Click here to move on to the next section, fonts and colors for your tables.

Tables:1-2-4