Complex Tables for Layout
Use more advanced features of tables to achieve more complex layout of pages.
How talented can tables get? VERY!!!
The web was NOT designed to do page layout...
It was designed for display independence and logical markup.
a.k.a.You can't set margins in cyberspace...
A table cell can contain any other HTML elements, including other tables,
so tables are the most common tool for controlling placement on pages.
More Table Elements
An optional table element, <CAPTION<>/CAPTION> supplies a caption for a table.
Captions are in bold and centered above the table by default.
However, you can change this with <CAPTION ALIGN=TOP/BOTTOM>.
Table cells can come in two varieties: data cells TD and header cells TH.
Header cells can be defined by using <TH></TH> instead of <TD></TD>.
By default, <TD></TD> content is rendered in normal left-justified text,
while <TH></TH> content is rendered in boldfaced text and centered.
Table Attributes
The <TABLE> </TABLE>, <TR> </TR> and <TD></TD> tags can have many additional attributes.
ALIGN, specified with other table elements, controls the placement of the contents within table cells. The allowed values are: LEFT, CENTER, and RIGHT. Alignment specified at the table cell level has precedence over row alignment, which has precedence over table body or head alignment. Conversely, alignment is inherited from the head/body level if not specified at the row level and the cell alignment is inherited from the row level if not specified at the cell level.
The VALIGN attribute is similar. It can have the values TOP, MIDDLE, or BOTTOM, and controls the vertical positioning of table cell contents. The default is middle.
Values, represented by "n" in each case, is a whole number of screen pixels.:
CELLPADDING=n The table will be rendered with n pixels space between the contents of the table's cells and the walls of the cells.
CELLSPACING=n The table will be rendered with cell walls n pixels think.
WIDTH=n or n% and HEIGHT=n or n% You can determine the maximum width and height for the table on the page by expressing it as either a percentage or number of pixels.
BORDER=n The table is displayed in a rectangle with n-pixel weight lines defining cell walls. The default is 0.
COLS=n Specifies the number of table columns. By knowing this number in advance, a browser can determine the table layout faster.
ROWSPAN=n and COLSPAN=n can be used to create cells that do not conform to a standard grid by specifying how many rows or columns to span respectively.
| right | left | |
|---|---|---|
| top | X | marks |
| bottom | the | spot |
You can get almost anything anywhere with tables--with lots of play and patience:)
However, there is an easier approach. Look for a page laid out in a way you like,
and borrow it to use as a template!
Here is a file you can download and practice changing: [Complex Table Example]
For more help: http://junior.apk.net/~jbarta/tutor/tables/index.html
See Tables Castro Ch. 9 pp. 133-155 (alt. pp. 145-157)
See A Useful Advanced Table Trick Castro pp. 285-287 (alt. pp. 314, 315)