The complete
TABLE tag
can be used as is and will stretch to encompass whatever is put inside
of it. There will be only one set of TABLE tags for each
table - <TABLE></TABLE> which will house the other
tags.
You can use any of the various "attributes"
inside the table tag to define it. Attributes are bits of code
used to assign specific characteristics to the table tags such
as borders and border colors, height, width, background color,
cellspacing, cellpadding, alignment and filters (using a style="filter:
code for filter"). These are typed inside the table tag using
an equals sign and separated by spaces. Some of the attributes are
self-explanatory, others are a bit more complicated and I will attempt
to explain them with graphics.
Some examples of attributes are:
height=300
*height of the table
width=300 *width of the table
bgColor=#7073ac
*background color
align=center, left or
right *alignment for the table or
for the
cells
vAlign=top, center or bottom
*alignment for the table
or for the
cells
CellSpacing=10
*spacing between the table cells and
the inside wall
of the table
CellPadding=10 *spacing between the inside walls of
the cells and
the image or text
BorderColorLight=#ffffff
*top and left table border
colors
BorderColorDark=#400000 *right and bottom table
border colors
Border=5 *number of px in thickness in the
border
of the
table
ColSpan=2 *number of columns in a span of
combined cells used in TR and TD tags.
RowSpan=2 *number of rows in a span of combined
cells used in TR
and TD tags
You can use one or several of the attributes inside
your table, depending on what you want the finished table to look
like. Many will tell you that you don't need to put in the height
and width. However, I feel that it is important to
define tables as much as possible to have more control over
them. After all, not everyone looks at our tables using the same
screen resolution. You will develop your own style once you know
how the tables will work and you will be amazed at
what you can do with them.
The TABLE BODY tags, simply
put, enclose all that is inside the table. There will only be one
set of table body tags for each table -
<TBODY></TBODY>
You can omit these tags and the table will
still function the same.
The TR or TABLE ROW tags represent each row going
across the table. There may be only one row, or several
rows used inside the table. Each row will have an opening and
closing tag - <TR></TR>
In the example below, there are 2 rows used.
Ending a row, will push your next TD down to the
next row. Notice in the next example that row 1 contains
both the shorter and the longer cell,
while row 2 only contains one
cell.
*Note - If you
use vAlign=top in a row tag which contains a cell
with text and align=center in the td or cell tag, the text will be
forced to the top and will be centered inide the cell.
Next we come to the TD
tag, which stands for TABLE DIVISION
and is sometimes called a TABLE CELL
tag. There may also be several cells used inside
the table, or just one. These cells make up the columns of
the table as shown in the example below.
Inside the table cell tags is where you would place
your image, text box or even another table (nested table).
Here is an example of a table using attritutes
and how it would look.
<TABLE height=300
cellSpacing=10 BorderColorDark=#400000 cellPadding=10 width=300
align=center bgColor=#ffc0c0 BorderColorLight=#ffffff
border=5>
<TBODY>
<TR>
<TD>
<IMG src="your pathway\image.jpg" align=baseline
border=0>
</TD>
</TR>
</TBODY>
</TABLE>
Next we will get even a little deeper
into tables. We will be learning how to put backgrounds
intables for use in webpages and in Outlook Express
stationery using VBScript. We will also explore using styles
for the attributes instead of using them in the table tags.
