Tables 101
By The Small Lady 
Tables often are intimidating to the new HTML writer. They seem hard to set up, easy to go wrong in writing and no matter what the person tries, they never seem to come out right. But if you take a little time and learn some of the basics of tables, you will find that creating and managing tables is a lot easier than you think.
First, you should meet the two most important HTML tags that you will need for tables:
<table> </table>
Sounds obvious...but actually, one of the first problems that people have with tables are that they forget to place the ending </table> tag. Unlike with paragraphs, where the </p> tag can be left off with little harm done, to leave off the </table> tag usually results in a blank or distorted page. In fact when it comes to tables, it is essential that you remember all of your ending HTML tags.
<table> is the tag that starts your table; </table> ends it.
There are two more basic tags to be learned. They are described below. Both the start tag and the closing tag are shown for each.
<tr> and </tr>
This sets a table row in a table.
<td> and </td>
This sets a table cell in a table.
There are two additional HMTL tags,
<th> and </th>, the table header cell and <caption> and </caption> the caption tag. Most Sailormoon sites don't use tables as tables per se, but use them more for creating site layouts and for displaying diced graphics, so I won't be covering these tags in depth. I will focus on the three other tags.
How to put this...you will need to use the <table>, <tr>, and <td> tags in any table you design. Tables can have an infinite number of rows and cells, but every table has at least one row (<tr>) and every row has a least one cell (<td>). Even a table that is nothing more than a square works out to one row having one cell. There is no way you'll guarantee that your table will work out well without any of these three tags not being present.
Rows get set before table cells get set. The order of tags should be:
<table>
(to get the table started!)
<tr>
(to start your row)
<td>
(to start a cell)
[and you insert what you want to in here. When you are done, you have to close the cell, with a...]
</td>
[Within a row you can have as many cells as you want. If you want another cell in the row, the next command would be...]
<td>
[and insert more text here! Then close it with...]
</td>
[If you want another cell in...you know what to do. But let's say we are done with the row and want to end it. Then, you add a...]
</tr>
[if you want another row, begin it! type in a...]
<tr>
[Another row started! Remember how many cells you put in the first row, because you'll have to put in the same number of cells in this row, for right now at least. Trust me. Add in your cells for this row, then end your row with...]
</tr>
[Ok. You can add more rows if you want, but let's say you are done with adding rows and want to close up your table. Just type the following in and you are done...]
</table>
[Table done!]
You just did a basic table. Was that hard? Now that you have the basics, it's time to build upon them. You can set all sorts of attributes in your table to design it the way you want it to be. The attributes are set within the table's HTML tags. That may sound confusing...it may be better if I show you. For example, how about giving your table a border? Instead of using <table> to get your table started, you will want to tell your table to get a little border doing on it:
<table border=1>
Or perhaps you want to size your table and still give it that border. How about a table 200 pixels wide with a thin border? Modify the <table> then so it takes care of both:
<table width=200 border=1>
See what I mean about the attributes going within the table's HTML tags? Not all of the attributes go in the <table> tag: many go in the <td> and <tr> tags as well. Are you ready to learn about some of the table attributes out there? They're below, listed in all caps.
BORDER=XX
Border is used within the <table> tag. This determines the border around your table and it's thickness. XX is replaced with a number indicating border size. BORDER=0 sets the table to have no visible border, BORDER=1 gives it a thin border, BORDER=2 indicates a slightly thicker border, and so on.
WIDTH=XXX
Width can be used within the <table> and/or the <td> tags. This determines the width of the table or cell. Width can be measured in two ways: in pixels or in percent of the screen size. WIDTH=300 indicates a width of 300 pixels. WIDTH=50% indicates a width that is 50% of the screen size; if your screen resolution is 800x600, WIDTH=50% will result in a width that is 50% of 800: 400.
Using pixels as the measurement "fixes" the width of a cell/table at a set amount that won't change, regardless of screen resolution. Using percentage results in adjusting table/cell sizes that will shrink or expand their size based on the screen resolution being used. Each measurement unit has its own advantages and setbacks: those will be covered in the next lesson.
HEIGHT=XXX
HEIGHT works the same way as width, only it determines the height of the row. HEIGHT is used within the <tr> tag.
CELLPADDING=XX
CELLPADDING is used within the <table> tag. It does exactly what the name implies: it provides a bit of padding to a cell. CELLPADDING=0 results in no padding: the contents of the cell fill the cell from boundary to boundary. CELLPADDING=1 adds a touch of padding in there, CELLPADDING=2 is a bit more padding, and so on.
CELLSPACING=XX
Also used within the <table> tag, CELLSPACING provides a bit of spacing between cells. CELLSPACING=0 is no spacing, CELLSPACING=1 is a bit of spacing, etc.
Setting CELLPADDING=0 and CELLSPACING=0 is essential if you are going to use your table for diced graphics: this will ensure that the graphics within the cells will fit together smoothly without any gaps.
BGCOLOR=XXXXXX
BGCOLOR can be used within the <table>, <tr> and <td> tags. This tag sets the background color of your table, row or specific cell. Using BGCOLOR in the <table> tag will result in the entire table having that color background; using BGCOLOR in the <td> tag applies that background color to that cell only. Colors can be expressed in HEX codes (e.g., #FFFFFF) or as names (e.g., red). It is better to use HEX codes as opposed to names: there is more precision in getting the exact shade you want, and it is completely foolproof (#FF3CDF will always be recognized and so will "blue"; "violet" and "cyan" will <u>probably</u> work; "cotton candy" probably won't).
ALIGN=XXXXX
ALIGN can be used in any of the tags, and determine the horizontal (if used in the <tr> tag) and vertical (if used in the <td> tag) alignment of the row/cell's contents. Alignments can be TOP, CENTER, BOTTOM, LEFT or RIGHT.
Some people use VALIGN=XXXXX and HALIGN=XXXXXX when it comes to alignment. Older browsers may have a problem recognizing these attributes but it usually not a serious problem in most cases.
In the next lesson: simple table problems and how to fix them!
