Tables? What are they? Tables are useful in helping store, orgainze and display data, quickly and easily. All tables start off with the <table> tag, and likewise, end with the </table> tag.

To add info to the table, you must make use of the two tags, <tr> and <td>. Look at the following HTML code, and I'll explain below it.

<table> <tr> <td>Line</td> <td>1</td> </tr> <tr> <td>Line</td> <td>2</td> </table>

The <table> tag starts off the code. To create a new row for data, insert the <tr> tag. The "tr" stands for table row. To add data into cells of that row, simply place the <td> tag AFTER the <tr> tag. Afterwards, close your tags with the </tr> and </td> tags.

You can control the width and height of the table either using percentages or pixels. <table width="90%" height="70%"> Using percentages to resize tables. <table witdh="400" height="100"> Using pixels to resize tables.

You can add many things to a table, and I will list a few of them, and how to use them. To add a border, you would do this: <table border="1"> Just insert your data and close with </table>. Border symbolizes you want a border and 1 designates the thickness of the border. The higher the number, the thicker the border will be.

Cell Padding and Cell Spacing

These two things can be confused easily, and often lead to many mistakes. First, I will explain cell padding. Cell padding increases the extra leftover space in each cell. To use cellpadding, do this: <table border="1" cellpadding="1"> The border is optional, but once again with the border, the higher the number, the more cellpadding there will be.

Think of cellpadding as putting styrofoam into a package to help protect it, which will increase its size. :tongue: Cell spacing is how much space is between individual cells. Cell padding effects the space OUTSIDE the cells, if you are lost. <table border="1" cellspacing="1"> Like with all table attributes, the higher the number, the bigger the result.

Think of cell spacing as the space between each "object" in the area. [u]Empty Cells[/u] For some odd reason, you may want an empty cell. Well, if you tried to just do this: <td>(hit space bar)</td> It would end up no cell with no border.

To create a true empty cell with no border, do this: <td>&nbsp;</td> The &nbsp; creates a non breaking space in the cell.

Cell Spanning

To have a cell span one or more row/column, you have to utilize the "colspan" and "rowspan" attributes. Colspan crates a cell spanning over many columns and Rowspan creates cells spanning many rows.

Cell Data Alignment

If you wish to align the data in a cell left, right, center, etc., use this: <table> <tr> <td align=_______>DATA</td> </tr> </table> For aligments, use "left" for left, "right" for right and "center" for center. KEEP THE QUOTES!

There ya go, a simple, yet plentiful tut on tables.