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
<col align=”left” />
<col span=”6” align=”right” />
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:
Search WWH ::

Custom Search