HTML and CSS Reference
In-Depth Information
Aligning Cell Contents with HTML
The fi nal set of HTML table attributes you'll examine before looking at the CSS table
styles are those attributes that control how content is aligned within each table cell. By
default, browsers center the contents of table header cells horizontally and left-align the
contents of table data cells. You can specify a different horizontal alignment using the
align
attribute, which has the syntax
align=”
position
”
where
position
is
left
,
center
,
right
,
justify
, or
char
. The
align
attribute can be
applied to table rows, row groups, columns, column groups, or individual table cells. For
example, when applied to the column group
<colgroup>
<col align=”left” />
<col span=”6” align=”right” />
</colgroup>
the
align
attribute left-aligns the fi rst column of the Web table and right-aligns the
remaining six columns.
When you apply the
align
attribute to the
table
element itself, it aligns the entire
table with the surrounding page content but does not affect the alignment of the cells
within the table. The
align
attribute has been deprecated for use with the
table
ele-
ment, but not for the row, column, and cell elements within a table.
Vertical Alignment in HTML
You also can use HTML to vertically align the contents of each table cell. The default is
to place the text in the middle of the cell. To choose a different placement, you apply the
valign
attribute using the syntax
valign=”
position
”
where
position
is
top
,
middle
,
bottom
, or
baseline
. The
top
,
middle
, and
bottom
options align the content with the top, middle, and bottom borders of the cell, respec-
tively. The
baseline
option places the text near the bottom of the cell, but aligns the
bases of each letter. The
valign
attribute can be applied to table rows, row groups,
columns, and column groups to set the vertical alignment of several cells at once.
Kyle feels that having the program names placed in the middle of each cell makes the
program schedule more diffi cult to read. He prefers to have all of the program names
lined up with the top of the cells. To change the cell alignment for all of the cells in the
table body, you'll apply the
valign
attribute to the
tbody
row group.
To vertically align the text in the table:
◗
1.
Return to the
schedule.htm
file in your text editor.
◗
2.
Within the opening
<tbody>
tag, insert the following attribute, as shown in
Figure 5-28:
valign=”top”
