This controls the alignment of elements within
each table cell.
Horizontal
cell alignment
By default, the contents of a header (<th>)
cell are centered horizontally in the cell, while the contents of a
data (<td>)
cell are aligned to the left edge of the cell. If you want to change
this, use the align
attribute with the appropriate cell tag.
The align
attribute accepts one of four values: left,
center, right,
and justify. The
first three values are defined by the HTML standard; the justify
value is supported only by Internet Explorer.
The effect of these values should be obvious, here
is an example:
| <--------------------------> |
<--------------------------> |
| Default Header |
Default Text |
| Header Left |
Text Left |
| Header Center |
Text Center |
| Header Right |
Text Right |
The HTML for this table is easy:
<table border=1>
<tr> <th><--------------------------></th>
<td><--------------------------></td> </tr>
<tr> <th>Default Header</th> <td>Default
Text</td> </tr> <tr> <th align=left>Header
Left</th> <td align=left>Text
Left</td> </tr> <tr> <th align=center>Header
Center</th> <td align=center>Text
Center</td> </tr> <tr> <th
align=right>Header Right</th> <td align=right>Text
Right</td> </tr> </table>
It is time consuming to add the align
attribute to each and every cell in your table. Like the bgcolor
attribute, you can use the align
attribute on individual <td>
and <th>
tags and also on <tr>
tags to control the alignment of every cell in a table row. We can
rewrite our alignment example to control the alignment at the row
level:
<table border=1>
<tr> <th><--------------------------></th>
<td><--------------------------></td> </tr>
<tr> <th>Default Header</th> <td>Default Text</td>
</tr> <tr align=left> <th>Header Left</th>
<td>Text Left</td>
</tr> <tr align=center> <th>Header Center</th>
<td>Text Center</td>
</tr> <tr align=right> <th>Header Right</th>
<td>Text Right</td>
</tr> </table>
The use of row-level alignment really helps on
large tables.
A word of caution:
You cannot use the align
attribute on the <table>
tag to affect the alignment of every cell in the table. The <table>
tag does accept the align
attribute, but it uses it to control the alignment of the table with
respect to the surrounding text, much the same way the <img>
tag uses the align
attribute. To control alignment of every cell in your table, you'll
need to set the align
attribute on every row or every cell in your table.
Vertical
cell alignment
By default, both Netscape's and Internet Explorer's center
attribute aligns contents vertically within the cell. This vertical
alignment is true for both header and data cells. You can change
this by using the valign
attribute with the <td>,
<th>, and <tr>
tags. Even better, the valign
attribute works with the <table>
tag, allowing you to set the vertical alignment of every cell in
your table with a single attribute.
The valign
accepts four values: top,
center, bottom,
and baseline.
The first three values should be obvious, but baseline
requires some explanation.
The baseline of a font is the imaginary line upon
which the characters rest. If adjacent cells in a row have varying
size text, the changing baseline between cells can make the table
unattractive and difficult to read. If you set the cell vertical
alignment to baseline,
the browser will find the lowest baseline of all the cells in the
row and align all the text to that baseline. The result is a more
readable table.
Here are these attributes in action. The first cell
in this example table has some large text for demonstration
purposes. The remaining cells use various vertical alignments. The
use of underscores helps to delineate where the baseline is in each
cell. The results:
| |
Top |
Baseline |
Center |
Bottom |
__AAyy__
Another Line |
__AAyy__ |
__AAyy__ |
__AAyy__ |
__AAyy__ |
Internet Explorer users will see the image tiled
across the entire table; Netscape users will see the image tiled
within the individual cells.
Notice how the baseline of the third cell in the
second row aligns with the baseline of the first cell.
Table
alignment tricks
Table alignment, especially horizontal alignment, is
a great way to get alternative text alignment in a document. Before
HTML 4.0 and Cascading Style Sheets, it was the only way to
get right-aligned text. Even now, it is the most widely supported
way to get certain effects.
To change the alignment of a block of text, place it
in a borderless single-cell table as wide as the current text flow:
<table border=0
width="360"> <tr> <td align=right> This
text is pushed right</td> </tr> </table>
The result is easy to see:
| This text is pushed right |
More complicated layout effects can be achieved with
nested tables and varying cell alignments.
<< BACK
Index: Website Creation
Resource Guide To - Website Development & Design
Index
3:
Creating Tables - Everything About HTML Tables