|
Today, I am trying to include all the attributes that you would need to make interesting-looking tables. I have set them down here in no particular order. At the end, you will find an example of a table using these attributes. I hope you will copy it, and use it as a working model.
Attributes:
<td align=right or left or center> aligns anything you put in that cell (text, images, etc.).
<tr align=right or left or center> aligns everything you put in all the cells of that row.
<table align=right or left or center> aligns the whole table.
We can also align vertically, pushing it toward the top, bottom, or middle of the cells.
We do this with valign:
<td valign=top or bottom or middle> aligns vertically anything you put in that cell (text, images, etc.)
<tr valign=top or bottom or middle> aligns vertically anything you put in all the cells of that row.
If you want a heading (larger font) Try <h></h>
you can use 1 to 6; but 1 is small; I included some in my example below to show you.
Two more terms to learn:
cellspacing and cellpadding.
Both attributes go in the tags,for example:
<table cellpadding=4 cellspacing=5>
Spacing increases the size of the border, and padding increases the space around the border.
To make a table take up the entire page set the width at 100%, like this:
<table width="100%">
obviously, by changing that percentage, you can make your table smaller.
Color can be added to borders and to backgrounds:
For borders:
<TABLE borderColor=#000000 border=2>
<TD borderColor=#000080 border=5>
For backgrounds:
<TABLE bgcolor=#000080>
<tr bgcolor=#ffffff>
<td bgcolor=#EF5A10>
Now, if you wanted to add more style to your table, and wanted to have diferent types of borders, you could do it like this:
<TABLE bgcolor=#000080
style="BORDER-RIGHT: 1px dotted; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; BORDER-BOTTOM: 1px dotted" borderColor=#008000 cellSpacing=4 cellPadding=4 bgColor=#ffffff border=2>
and:
<TD
style="BORDER-RIGHT: 1px dotted; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; BORDER-BOTTOM: 1px dotted" borderColor=#c51401 bgColor=#ffffff border="2" cellPadding="4" cellSpacing="4">
Watch out here; you need colons rather than equal signs; make sure you copy this exactly as it is.
Copy and paste is a good idea to get you started.
In the example below, I tried to include a bit of everything I talked about. I would suggest that you copy and paste this example in HTML-kit or in your OE new message, and study each line to see what it creates.
Play with the numbers, the colors,the names of borders, to see the changes that they make to the look.
This is a learn-as-you-go kind of experience...lol.
My Example:
<TABLE align=center style="BORDER-RIGHT: 5px double; BORDER-TOP: 5px double; BORDER-LEFT: 5px double; BORDER-BOTTOM: 5px double" borderColor=#000000 cellSpacing=10 cellPadding=4 bgColor=#ff0000 border=2> <TR bgColor=#ffffff> <TD style="BORDER-RIGHT: 2px dashed; BORDER-TOP: 2px dashed; BORDER-LEFT: 2px dashed; BORDER-BOTTOM: 2px dashed" borderColor=#003700 align=middle bgColor=#ffff62 colSpan=2 cellSpacing=4 cellPadding="4" border="2"> <H2>Star--My Dog</H2></TD></TR> <TR bgColor=#ffffff> <TD style="BORDER-RIGHT: 1px dotted; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; BORDER-BOTTOM: 1px dotted" borderColor=#003700 align=middle bgColor=#ffffff cellSpacing=4 cellPadding=4 border=2> <H3>height</H3></TD> <TD style="BORDER-RIGHT: 1px dotted; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; BORDER-BOTTOM: 1px dotted" borderColor=#003700 align=middle bgColor=#ffffff cellSpacing=4 cellPadding=4 border=2> <H3>2.3 feet</H3></TD></TR> <TR bgColor=#ffffff> <TD style="BORDER-RIGHT: 1px dotted; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; BORDER-BOTTOM: 1px dotted" borderColor=#003700 align=middle bgColor=#ffffff cellSpacing=4 cellPadding=4 border=2> <H3>weight</H3></TD> <TD style="BORDER-RIGHT: 1px dotted; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; BORDER-BOTTOM: 1px dotted" borderColor=#003700 align=middle bgColor=#ffffff cellSpacing=4 cellPadding=4 border=2> <H3>28 pounds</H3></TD></TR> <TR bgColor=#ffffff> <TD style="BORDER-RIGHT: 1px dotted; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; BORDER-BOTTOM: 1px dotted" borderColor=#003700 align=middle bgColor=#ffffff cellSpacing=4 cellPadding=4 border=2> <H3>eye color</H3></TD> <TD style="BORDER-RIGHT: 1px dotted; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; BORDER-BOTTOM: 1px dotted" borderColor=#003700 align=middle bgColor=#ffffff cellSpacing=4 cellPadding=4 border=2> <H3>dk. brown</H3></TD></TR> <TR bgColor=#ffffff> <TD style="BORDER-RIGHT: 1px dotted; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; BORDER-BOTTOM: 1px dotted" borderColor=#003700 align=middle bgColor=#ffffff cellSpacing=4 cellPadding=4 border=2> <H3>coat color</H3></TD> <TD style="BORDER-RIGHT: 1px dotted; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; BORDER-BOTTOM: 1px dotted" borderColor=#003700 align=middle bgColor=#ffffff cellSpacing=4 cellPadding=4 border=2> <H3>Black wt. white and beige</H3></TD></TR> <TR> <TD style="BORDER-RIGHT: 1px dotted; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; BORDER-BOTTOM: 1px dotted" borderColor=#003700 align=middle bgColor=#ffffff cellSpacing=4 cellPadding=4 border=2> <H3>her loves</H3></TD> <TD style="BORDER-RIGHT: 1px dotted; BORDER-TOP: 1px dotted; BORDER-LEFT: 1px dotted; BORDER-BOTTOM: 1px dotted" borderColor=#003700 align=middle bgColor=#ffffff cellSpacing=4 cellPadding=4 border=2> <H3>eating and walking</H3></TD></TR></TABLE>
**One last word: where you have bgcolor, try adding background="exact path" and see what happens.**
Ciao for now.
|
