[Basic Tables]
Tables are another element that may enhance web page presentation. Not all
browsers support tables, or frames, so whenever possible an alternate
viewing option or a layout that will suffice in various browsers should be
used.
Tables are made up of columns and rows. The first "tag" used is:
<table>
Default alignment is to the left of the screen. Tables may be centered using
the <center> command, for example:
<center><table>
The first element in the table is the "row" which is placed by typing:
<TR>
which stands for "Table Row."
Next comes the creation of a "cell" for data, which is:
<TD>
for "Table Data".
The width of the data cell may be determined by entering a
number of your choosing, for instance <TD WIDTH="#">
Table borders may be various widths and colors. The width is determined by
adding the word "width" after "table" with the equal sign and the desire
size in quotations. For a table to have no border, simply don't include the
"width" option.
Borders clearly define where the tables are -- these
examples have borders. To put a border around the tables, type:
<center><table border= "3">
Next type the information to appear in the cell, for instance the word
"Data".
An example of how the width of the data cell may be determined by entering a
number of your choosing, for instance <TD WIDTH="100">:
To place another cell beside the first... type:
<TD>
To "close" that cell, and <TD> again to open the next one, then the contents
of the cell, such as "Code".
Then type </TR> to "close" that row, and <TR> <TD> to begin the next one and
open the cell.
| Data |
Code |
|
Data Name |
Code Cost |
When the desired numbers of rows and cells have been created, type:
</table>
to "close" the table.
Upper or lower case may be used within the brackets, case has no effect on
the appearance of the page.
[Content in Tables]
Text or images within table cells may be centered just as they are on pages.
The same methods for font size and colors apply.
Table cells automatically size to accommodate the content.
Cells without data will appear blank, for example:
[Colors in Tables]
Table borders and backgrounds may be various colors.
For a colorful border,
add the color= "color#" in the table tag:
<center><table border= "3" bordercolor= "008000">
For a table background color add in:
bgcolor= "E9D7B4"...
<center><table border="3" bordercolor="008000" bgcolor="E9D7B4">
To have a border appear more like a picture frame, two border colors are
used. The bordercolorlight typed is the upper left corner color, and
bordercolordark is the lower right corner.
<center><table border= "3" bordercolorlight= "008000" bordercolordark=
"000000" bgcolor= "E9D7B4">
will make the upper left side of the frame appear green and the lower right
side appear black. (At least in Internet Explorer.)
Coloring each individual cell background is accomplished by adding the
bgcolor= "color#" in the table data command.
<center><table border= "3" bordercolorlight= "008000" bordercolordark=
"000000" bgcolor= "E9D7B4">
<TR><TD bgcolor= "FF0000">Data</TD>
<TD bgcolor= "#E6E6FA">Code</TD></TR>
<TR><TD bgcolor= "F7F4CC">Data Name</TD>
<TD bgcolor= "FFFFFF"></TD></TR></TABLE>
