<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 ( ) 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:
<![CDATA[
<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><tr></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:
