<TABLE> Elements
The following commands go inside the <TABLE> Tag, for
example: <table border="1">. Just
reference the <TABLE> Tag for now, we'll cover Rows
and Columns (<TR> and <TD>)
later.
BORDER - The border thickness in pixels.
<table border="10">
<tr>
<td>Border = 10</td>
<td>Border = 10</td>
</tr>
</table>
CELLPADDING - Pixels between the cell data and cell wall.
| Cell Padding = 5 |
Cell Padding = 5 |
| Cell Padding = 10 |
Cell Padding = 10 |
| Cell Padding = 0 |
Cell Padding = 0 |
<table cellpadding="0">
<tr>
<td>Cell Padding = 0</td>
<td>Cell Padding = 0</td>
</tr>
</table>
CELLSPACING - Pixels between cells.
| Cell Spacing = 5 |
Cell Spacing = 5 |
| Cell Spacing = 10 |
Cell Spacing = 10 |
| Cell Spacing = 0 |
Cell Spacing = 0 |
<table cellspacing="0">
<tr>
<td>Cell Spacing = 0</td>
<td>Cell Spacing = 0</td>
</tr>
</table>
WIDTH - Width of overall Table in pixels or percent.
| Table Width = 100% |
Table Width = 100% |
<table width="100%">
<tr>
<td>Table Width = 100%</td>
<td>Table Width = 100%</td>
</tr>
</table>
| Table Width = 400 |
Table Width = 400 |
<table width="400">
<tr>
<td>Table Width = 400</td>
<td>Table Width = 400</td>
</tr>
</table>
HEIGHT - Height of overall Table in pixels or percent.
| Table Height = 100 |
Table Height = 100 |
<table height="100">
<tr>
<td>Table Height = 100</td>
<td>Table Height = 100</td>
</tr>
</table>
ALIGN - Aligns the Table to the LEFT, RIGHT, or CENTER of the page.
| Align = Left |
Align = Left |
| Align = Right |
Align = Right |
| Align = Center |
Align = Center |
<table align="center">
<tr>
<td>Align = Center</td>
<td>Align = Center</td>
</tr>
</table>
BGCOLOR - Specifies the background color of the Table in Hex or
color name.
<table bgcolor="#808080">
<tr>
<td>BGCOLOR = "#808080"</td>
</tr>
</table>
Rows and Columns
As you saw in the Table Source, there are <TR> and
<TD> Tags. These are Table Rows and Table Columns.
We'll get into the specific commands on seperate pages, but this will give
you a simple overview.
| Row 1 - Column 1 |
Row 1 - Column 2 |
Row 1 - Column 3 |
| Row 2 - Column 1 |
Row 2 - Column 2 |
Row 2 - Column 3 |
<table border="1">
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Column 2</td>
<td>Row 1 - Column 3</td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
<td>Row 2 - Column 3</td>
</tr>
</table>
The Table has 2 horizontal rows and 3 vertical columns. Each row contains
one or more columns before closing the row. The minimum row has 1 column,
which would obviously span the width of the table.
| 1 Row, 1 Column, 1 Border |
<table border="1">
<tr>
<td>1 Row, 1 Column, 1 Border</td>
</tr>
</table>
Captions and Headers
Captions can be a title for a Table. Anything between
<CAPTION></CAPTION> will be used
as the Caption.
Example:
| D.J. Quad's Contact Info |
| djquad@quadzilla.com |
<table border="1">
<caption>Example:</caption>
<tr>
<td>D.J. Quad's Contact Info</td>
</tr>
<tr>
<td>djquad@quadzilla.com</td>
</tr>
</table>
The Caption can be aligned TOP or BOTTOM. Internet Explorer supports LEFT
and RIGHT also).
Example:
| D.J. Quad's Contact Info |
| djquad@quadzilla.com |
<table border="1">
<caption align="left">Example:</caption>
<tr><td>D.J. Quad's Contact Info</td></tr>
<tr><td>djquad@quadzilla.com</td></tr>
</table>
|
