| Home Web | Top Bottom | Contents Prev Next |
Up until now, we've seen how we can construct a table and how we can use width and height to control the size of cells, and colspan and rowspan to join consecutive cells. But we've had no control of just where in a cell our content is placed.
|
Each cell has a width and height that's either determined by the browser or specified by you. Just inside the cell is the cellpadding area, whose size you specify in cellpadding — nothing is ever placed into the cellpadding area. Within that is your cell's contents. If there's just barely enough room to fit the content, it doesn't matter how you try to align the contents: there's no "wiggle" room for moving the content around. If the content is narrower than the cell, you can use align to either left-justify, center or right-justify the content. align has values of "left", "right" and "center", and defaults to align="left". If the content is shorter than the cell, you can use valign to place the content at the top, middle or bottom of the cell. valign has values of "top", "bottom" and "middle", and defaults to valign="middle". Note that the term center is used with horizontal placement, while middle is used with vertical placement. |
You can place align and/or valign in a <td> (or <th>) tag to control alignment within that specific cell.
You can place align and/or valign in a <tr> tag to specify a default alignment for all of the cells in the row. If you want all or most of the cells in a row to share the same alignment, it's easier to specify it once in the <tr> tag than to specify it in the individual <td> tags. You can still override these defaults for a specific cell in the row by including align and/or valign in that cell's <td> tag.
You can place valign in the <table> tag to specify a default vertical alignment for all cells in the table. A valign in a <tr> tag overrides the table's valign for that row. A valign in a <td> tag overrides the table's valign for that cell.
Unfortunately, you cannot code align in the <table> tag specify a default horizontal alignment for the table's cells.
align in the <table> tag is used for aligning the table itself rather than specifying values for individual cells. We've already seen that align="center" in the <table> tag is one way to center a table (the poorest way!). align="left" and align="right" in a <table> tag act much the way as in an <img> tag: the table is left- or right-justified and "floats" — text can flow around the table. Browser support is very poor for this, however, and Netscape 4 in particular has difficulty with floating tables. It's far better to use nested tables (to be covered shortly) for this type of effect. It's best to just forget that there even is an align attribute for the <table> tag.
CSS can also be used to specify the alignment. The text-align property has values of left, right and center. The vertical-align property has values of top, bottom and middle. Netscape 4 recognizes text-align but not vertical-align.
If you want non-CSS browsers to recognize your alignment, use the align and valign attributes. If you're willing to have non-CSS browsers display your table using the default alignment, go ahead and use the CSS method.
Here's an example that uses align and valign:
<center>
<table border="3" cellspacing="0" cellpadding="4"
bgcolor="#ffffcc" width="300">
<tr valign="top">
<td height="75"> Top <br /> Left
<td align="center"> Top <br /> Center </td>
<td align="right"> Top <br /> Right </td>
</tr>
<tr>
<td height="75"> Middle <br /> Left
<td align="center"> Middle <br /> Center </td>
<td align="right"> middle <br /> Right </td>
</tr>
<tr valign="bottom">
<td height="75"> Bottom <br /> Left
<td align="center"> Bottom <br /> Center </td>
<td align="right"> Bottom <br /> Right </td>
</tr>
</table>
</center>
| Top Left |
Top Center |
Top Right |
| Middle Left |
Middle Center |
middle Right |
| Bottom Left |
Bottom Center |
Bottom Right |
This table uses CSS rather than align and valign. Note that Netscape 4 does not recognize the vertical-align property.
| Home Web | Top Bottom | Contents Prev Next |