Framify

Tag: <table>

<table> Syntax

Syntax Diagram for <table>
Opening Tag Content Closing
Tag
Open Parameter = Value Close
<table border > caption and/or
table rows
</table>
bgcolor = color
background = file
border = pixels
cellpadding
cellspacing
width = pixels
percent%
height = pixels
percent%

Syntax Diagram for <caption>
Opening Tag Content Closing
Tag
Open Parameter = Value Close
<caption align NC = top NC > caption
text
</caption>
bottom NC
align IE = left IE
center IE
right IE
valign IE = top IE
bottom IE

Syntax Diagram for <tr>
Opening Tag Content Closing
Tag
Open Parameter = Value Close
<tr valign = top > table headers
and/or
table rows
</tr>
middle
bottom
align = left
center
right
bgcolor = color
background = file

Syntax Diagram for <th> and <td>
Opening Tag Content Closing
Tag
Open Parameter = Value Close
<th
or
<td
valign = top > table
cell
data
</th>
or
</td>
middle
bottom
align = left
center
right
width = pixels
percent%
height = pixels
percent%
colspan = columns
rowspan = rows
nowrap
bgcolor = color
background = file

<table> Description

The <table>. . . </table> tags delimit a table, which contains zero or more table rows (<tr>), each of which contains zero or more table headers (<th>) or table data cells (<td>). Text in table headers is treated identically to that in table data cells, except the text is, by default, centered and bold.

When spanning rows, subsequent rows have fewer explicitly-defined table-data cells than you might expect: the unspecified cells are filled with content from a previous row's row-spanning table cell (see example below).

Table headers/cells that do not contain anything, do not even appear as a cell; there is simply a "dentless" area (table cells appear to be "dented" into the page). If you want a table cell to be dented in, but still have no visible content, put a linebreak (<br>) or a non-breaking space (&nbsp;) in the cell.

pixels
The number of pixels wide (or high) that the table (or table cell) is supposed to be.
percent
The width (or height) that the table (or table cell) is supposed to be, expressed as a percentage of the width (or height) of the containing window or frame.
columns, rows
The integer number of columns or rows a table cell is to combine into a single, larger table cell. Note that it is possible, through careless rowspan and colspan specifications, to create mutually contradictory directives for table cells. While this doesn't do any damage, per se, the results look pretty ugly, and are not likely to display what you want.
color
A standard color specifier, which may be a color name (e.g., red, white, black, etc.) or a six-hex-digit constant, where each pair of hex digits specifies an eight-bit value for red, green, and blue, respectively (e.g., "#FF8040", ffeecc, etc.).
file
A URL that specifies the GIF or JPEG image file that is to be used as the background image for the table or table cell.

<table> Examples

This markup: <table border=5 cellspacing=7 cellpadding=2 bgcolor=yellow> <caption align=bottom>This is the Caption to the Sample Table</caption> <tr><th rowspan=2>This is<br>Column One</th> <th colspan=4>The Rest of the Columns</th></tr> <tr><th align=right>Column Two</th> <th>Column Three</th> <th align=left>Column Four</th> <th>Column Five</th></tr> <tr background="Parchment.jpeg"><td>Observe the</td> <td align=left>different</td> <td align=center>horizontal</td> <td align=right>alignment!</td> <td></td></tr> <tr bgcolor=cyan><td align=center>This here<br>is a really<br>tall chunk<br>of data.</td> <td valign=top>Note the</td> <td valign=middle>different</td> <td valign=bottom>vertical</td> <td valign=baseline>alignment.</td></tr> <tr align=right valign=bottom> <td height=100>The<br>alignment<br>for this<br>whole row</td> <td>was set</td> <td>in one<br>swell foop</td> <td>in the</td> <td><tt>&lt;tr&gt;</tt> tag.</td></tr> <tr><td colspan=3 align=center bgcolor=00ff00>As you can see, you can span columns or <nobr>rows. . .</nobr></td> <td><br></td> <td><table border=2 cellpadding=4 cellspacing=5> <caption>Nested Table</caption> <tr><td>This</td> <td>is a</td></tr> <tr><td bgcolor=red>nested</td> <td>Table!</td></tr> </table></td></tr> </table> . . .causes the following to be displayed:
This is the Caption to the Sample Table
This is
Column One
The Rest of the Columns
Column Two Column Three Column Four Column Five
Observe the different horizontal alignment!
This here
is a really
tall chunk
of data.
Note the different vertical alignment.
The
alignment
for this
whole row
was set in one
swell foop
in the <tr> tag.
As you can see, you can span columns or rows. . .
Nested Table
This is a
nested Table!

Last Modified: Thursday, 24-Dec-2009 14:41:52 MST