Let's Talk more about . . .
USING TABLES - Page 2
with
Webpages
On this page we will talk about using
percent (%) for heights and widths, nesting tables, using the
<STYLE></STYLE> tags and style="attributes" and finally
how to insert a background in your table and td tags for your
website.
Lets first talk briefly about using % inside
your tables. This can be a little confusing at first, but once you
have done it several times, you will catch on. You can use % for
your width and height in your tables. Remember that your % in the
outer table will represent how much of your screen will be covered by
the table. Inside the table, each cell, however, will represent
how much of the table is used. For instance you can have a table
that is 80% of the screen width and height, and a td inside the
table that is 100% of the width of the table. Remember that
the cells need to make up 100% of the table in combined height and
width. Here is an example of our table written using % for
width and height.
<TABLE height=80% cellSpacing=10
borderColorDark=#400000 cellPadding=10 width=80% align=center
bgColor=#ffc0c0 borderColorLight=#ffffff
border=5>
<TBODY>
<TR>
<TD height=100% width=100% align=center><IMG src="your
pathway/image.jpg" border=0>
</TD></TR></TBODY></TABLE>
This table would be very similar to the one that this
tutorial is written on, taking up 80% of the screen with a <TD>
inside that is the same size. Practice making several <TR>
and <TD> tags inside your table, it will help if you assign them
each a different bgColor so that you can see how they are placed within
the table.
Next we will make a nested table. A
nested table is a table that is completely inside another
table.
For example, I will use the table from page
one and nest another inside it. This would be a great way to put a
border around an image or text inside the main table. The
code for the nested table is highlighted in red below:
<TABLE
height=300 cellSpacing=10 borderColorDark=#400000 cellPadding=10
width=300 align=center
bgColor=#ffc0c0 borderColorLight=#ffffff
border=5>
<TBODY>
<TR>
<TD>
<TABLE height=250 cellSpacing=3 borderColorDark=#400000
cellPadding=3 width=250 align=center bgColor=#ffc0c0
borderColorLight=#ffffff
border=3>
<TBODY>
<TR
vAlign=top>
<TD align=center>Text goes
here.</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
|
Text goes here.
Notice that the text is centered inside
the table and begins at the top. That is because i put
the vAlign=top inside the TR and align=center in the TD
tags.
If you were using an image, you would not
need to do that, the image would be centered inside by
simply using align=center in the TD
tag. | |
Now your new table is nested one inside the
other. The only change that I made was to the size inside the
table tag, and I added in the vAlign=top to the TR and align=center to
the TD tags. Both tables can be made up of many rows and
cells.
Next we will discuss how you would add borders using the
<STYLE><STYLE> tags and style="various attributes"
inside the table tag. This is a popular way to assign borders,
position, and use filters with your tables. I am sure that you
probably have seen a BODY tag inside the <STYLE> tags at the top
of scripts. The style tags are located at the top of the
script usually, inside the head tags. You can assign a border to
your table by typing the word TABLE { your borders
separated by ; and ending with a closing }
In case you haven't seen this before,
this is how it would
look:
<STYLE>
BODY
{ BORDER-RIGHT: #400000 10px inset; BORDER-TOP: #400000 10px
outset; MARGIN-TOP: 50px; SCROLLBAR-FACE-COLOR: #ffc0c0; FONT-WEIGHT:
bold; FONT-SIZE: 12pt; SCROLLBAR-HIGHLIGHT-COLOR: #400000; BORDER-LEFT:
#400000 10px ridge; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #400000;
SCROLLBAR-3DLIGHT-COLOR: #400000; SCROLLBAR-ARROW-COLOR: #7073ac;
SCROLLBAR-TRACK-COLOR: #ffc0c0; BORDER-BOTTOM: #400000 10px ridge;
FONT-FAMILY: "Verdana"; SCROLLBAR-DARKSHADOW-COLOR: #000000;
SCROLLBAR-BASE-COLOR: #400000
}
TABLE,
TD {
BORDER-RIGHT: #400000 5px outset; BORDER-TOP: #400000
5px outset; BORDER-LEFT: #400000 5px outset; BORDER-BOTTOM: #400000 5px
outset
}
</STYLE>
Please notice that if you want to use more than
one type of tag with the same borders that they can be separated by
a comma as I have done above highlighted in red. You can use
several different borders in the style as opposed to the plain border we
had learned in the first part of the lesson. They are:
ridge, solid, groove, inset, outset, dotted, dashed
and double. This manner will work if you want to assign
a border to a TABLE, TD, IMG, MARQUEE, DIV, or APPLET tag.
However, if you want to assign the border to a specific table,
etc.....you will need to add a bit of code into the table tag. By
using a class=maintbl (or
whatever you want to name it
) inside the table or whichever tag you
want to name, you can specify which one will have your choice of
border. You can change the colors and thickness of the borders as
well.
<TABLE class=maintbl
or for an image <IMG
class=pic1
<STYLE>
BODY
{ BORDER-RIGHT: #400000 10px inset; BORDER-TOP: #400000 10px
outset; MARGIN-TOP: 50px; SCROLLBAR-FACE-COLOR: #ffc0c0; FONT-WEIGHT:
bold; FONT-SIZE: 12pt; SCROLLBAR-HIGHLIGHT-COLOR: #400000; BORDER-LEFT:
#400000 10px ridge; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #400000;
SCROLLBAR-3DLIGHT-COLOR: #400000; SCROLLBAR-ARROW-COLOR: #7073ac;
SCROLLBAR-TRACK-COLOR: #ffc0c0; BORDER-BOTTOM: #400000 10px ridge;
FONT-FAMILY: "Verdana"; SCROLLBAR-DARKSHADOW-COLOR: #000000;
SCROLLBAR-BASE-COLOR: #400000
}
.maintbl {
BORDER-RIGHT: #400000 3px
double; BORDER-TOP: #400000 3px double; BORDER-LEFT: #400000 3px double;
BORDER-BOTTOM: #400000 3px double
}
.pic1 {
BORDER-RIGHT: #ffffff 3px dotted; BORDER-TOP:
#ffffff 3px dotted; BORDER-LEFT: #ffffff 3px dotted; BORDER-BOTTOM:
#ffffff 3px dotted
}
</STYLE>
Instead of using the <STYLE> tags, you can also add
borders to your table by inserting a style="your attributes" inside the
table tag. For positioning, you will need to add the
following bits into your tag:
LEFT: 10px; TOP: 10px; POSITION: absolute. This will
position your table on your page wherever you tell it to place your
table, div, image, etc. If you use a % to describe your
height and width of the table, you can center divs and tables
easily by dividing the remaining % by 2. For example, if your
table or div is 80 in width and height, the remaining % is 20 divided by
2 which gives you 10% for the left and top attributes. This will
come in handy when you are writing text boxes for popups, and
want them to be the same in all resolutions.
*For those who are a bit more advanced, remember, that
you cannot use an align=center in your table for a popup. The
table or image will be centered, but at the top of the screen. The
best way to do that would be with a script, using screen
width or to use % in your positioning. A quick way would be
to use align=center in your table, and then put a few <BR> spaces
above the table, that would push it down on the screen.
By using either method of style coding, we can take
advantage of some other attributes. One of my favorites is to use
filters:
This one makes the table transparent...
FILTER: alpha(opacity=75)
This one puts a gradient of color for the
background....
FILTER:
Progid:DXImageTransform.Microsoft.Gradient(startColorstr=#674EA2,endColorstr=#E6C2E6,GradientType=1)
This one makes text glow....
FILTER: glow(strength=1,
color=#EDE7D6, enabled=1)
This one produces a shadow behind the
text
FILTER: dropshadow(offx=2,
offy=2, color=#000000,enabled=1)
This one is not really a filter, but will add
a scrollbar inside your table or div and stop it from
stretching....
OVERFLOW:
auto
You can use the filters inside either the
<STYLE></STYLE> or as a style="filter attribute; WIDTH:
300px; etc" inside the table or div tags. It is important not to
use any two of the filters listed above in the same tag. However,
you can put one in either place in some cases. For instance, you
can put the alpha(opacity=75) filter in the style at the top and the
OVERFLOW: auto in the table tag, and it will work for you. You
will get an error if you put them together, so be
careful.
<TABLE
height=300 cellSpacing=10 borderColorDark=#400000 cellPadding=10
width=300 align=center
bgColor=#ffc0c0 borderColorLight=#ffffff
border=5>
<TBODY>
<TR>
<TD>
<TABLE style="FILTER:
Progid:DXImageTransform.Microsoft.Gradient(startColorstr=#674EA2,endColorstr=#E6C2E6,GradientType=1);
HEIGHT: 250px; WIDTH: 250px" cellSpacing=3
borderColorDark=#400000 cellPadding=3 align=center bgColor=#ffc0c0
borderColorLight=#ffffff
border=3>
<TBODY>
<TR
vAlign=top>
<TD align=center>Text goes
here.</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
I also used the style at the top of
the page to change the font in a specific table, here is the coding i
used...
<STYLE>
.gradient {
FONT-FAMILY: lucida handwriting; FONT-SIZE: 10pt; COLOR: #000000
}
</STYLE>
|
Text goes here.
This is an example of using the gradient filter inside
your table. Notice that the filter only applies to the
table that the code is in and not to both
tables.
| |
The last point of interest I want to discuss
involving webpages specifically is the ease of which you can add a
background. Unlike in Outlook Express, where you have to embed the
background using a script such as vbscript or java script, all you need
do with a webpage is insert background="your pathway/image name" inside
the table, or td tag. Let's use the table above to illustrate some
ways you can decorate your page by using backgrounds.
<TABLE height=400
cellSpacing=10 borderColorDark=#400000
cellPadding=10 width=400
align=center bgColor=#ffc0c0 BorderColorLight=#ffffff border=5 background="folder
name/image.jpg">
<TBODY>
<TR>
<TD background="folder name/image.jpg">
<TABLE height=300 cellSpacing=3
borderColorDark=#400000 cellPadding=3 width=300 align=center
bgColor=#ffc0c0 borderColorLight=#ffffff border=3 background="folder
name/image.jpg">
<TBODY>
<TR>
<TD align=center background="folder
name/image.jpg"><IMG src="pathway/image.jpg"
border=0></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
The sparkling gold background effect in the table was
created by using an animated gif image as the background in the inner
table td tag. In the next page, we will discuss how to make each
of the backgrounds move by using VBScript and how to embe the
backgrounds for use in stationery for Outlook Express.
If you have any questions or comments, please drop me a
line. I will be glad to answer any questions you may have.
