Let's focus on the Table Data cell alignment attributes now. Quite often (in fact I'd probably say most often) you will want to control the layout of text within each table cell. All of the alignment characteristics are relative to the outer border of each cell. Let me explain graphically:
|
align="left"
|
align="center"
|
align="right"
|
valign="top"
|
valign="middle"
|
valign="bottom"
|
| Samuel Adams John Adams Robert Treat Paine Elbridge Gerry John Hancock
|
Samuel Adams John Adams Robert Treat Paine Elbridge Gerry John Hancock |
Samuel Adams John Adams Robert Treat Paine Elbridge Gerry John Hancock |
Samuel Adams John Adams Robert Treat Paine Elbridge Gerry John Hancock |
Samuel Adams John Adams Robert Treat Paine Elbridge Gerry John Hancock |
Samuel Adams John Adams Robert Treat Paine Elbridge Gerry John Hancock |
The align attribute is the text alignment in relation to the left and right cell borders (horizontal). The valign attribute is the text alignment in relation to the top and bottom cell borders (vertical).
You can combine these alignments. For example, her are some mixtures of alignments:
|
align="left" |
align="center"
valign="bottom" |
align="right"
valign="top" |
valign="top"
align="center" |
valign="middle"
align="right" |
valign="bottom"
align="center" |
| Samuel Adams John Adams Robert Treat Paine Elbridge Gerry John Hancock |
Samuel Adams John Adams Robert Treat Paine Elbridge Gerry John Hancock |
Samuel Adams John Adams Robert Treat Paine Elbridge Gerry John Hancock |
Samuel Adams John Adams Robert Treat Paine Elbridge Gerry John Hancock |
Samuel Adams John Adams Robert Treat Paine Elbridge Gerry John Hancock |
Samuel Adams John Adams Robert Treat Paine Elbridge Gerry John Hancock |
The browser controls the align & valign values by default (meaning the browser selects values if you don't specify them). Typically, browsers will default to: align'"left" valign="top" . What is your browser's default? The cell below will tell you:
|
align=default |
| Samuel Adams John Adams Robert Treat Paine Elbridge Gerry John Hancock |
<TABLE align="align_value" valign="v_align_value"
rowspan="numer_of_rows" colspan="number_of_columns>
rowspan = the number of Table Data
cells to merge down a row
colspan = the number of Table Data
cells to merge across a column
align = "left" or "center"
or "right" or "justify"
valign = "top" or "middle"
or "bottom"
Copyright © 2001 Michael J. Doyle
All Rights Reserved.
Designed & Developed by Mike Doyle
using Macromedia Dreamweaver & CourseBuilder
See Mike's Training Schedule for
HTML, Dreamweaver, & CourseBuilder Courses
Email Mike Doyle