Welcome to the tables section of the tutorial. To those that have been writing HTML for a while, tables are one of the easiest ways to manipulate the way a page looks, but to those that have not been writing or designing that long, they are the most confusing thing about HTML. Hence the reason the subject was included here in the advanced section.

It could be said that tables have a certain purpose; to manipulate data on a page. This is true, but the use of tables is not limited only to the printed word. They can be used to manipulate anything in HTML, for example: text, images, embedded midis, and all of the former together. Tables can also be used just to liven up a page with colors or they can be used nonchalantly as invisible holders or arrangers of information.

The formulation of tables is easy, but the many forms of tables sometimes serve only to confuse. They are made up of cells and rows. One has only to decide what the table is to look like in their head or on a piece of paper and then include the proper tags in the body of the table to make it come to life. A table is started by using a <TABLE> tag to open it. There are several attributes that can be used inside the tag to maipulate the way the table looks. The only one that is HTML3 approved is the BORDER call. When it is included in the table tag, a border is drawn around the table. This border will have the same color as the background color that was used in the body tag. Here is what the tag looks like: <TABLE BORDER>. One can immediately realize the usefulness of tables when it comes to page design by this color function they provide. The rest of the attributes for a table are Netscape extensions. In the table they look like this; <TABLE BORDER="10" WIDTH="100%" CELLSPACING="5" CELLPADDING="5">. The width attribute can either be expressed as a percentage of page width or in number of pixels. The cellspacing attribute is expressed in number of pixels and it does what its name says, it spaces the cells the specified pixel width away from each other. The cellpadding attribute is also expressed in number of pixels. It gives the information in the cell breathing room by spacing the surrounding cell away from the information by the specified number of pixels.

So now that the table tag has been explained, the row and cell tags can be discussed. After the table tag is used, the next tag is the row <TR> tag. This tag specifies or calls for a row in the table. It also has attributes as well. They are used to align the information contained in the row. They are align and valign and look like this when in the row tag; <TR ALIGN=CENTER>, <TR VALIGN=CENTER>. For the align attribute, it can be set to left, right, and center. For the valign attribute, it can be set to top, middle, and bottom. The next tag is the cell <TD> tag. There is also a <TH> tag, but the two are analogous. The cell tag has even more attributes than the row tag. It looks like this with the attributes included, <TD WIDTH="10%" ALIGN=CENTER VALIGN=CENTER NOWRAP COLSPAN=1 ROWSPAN=1>. The width attribute can be expressed as either a percentage of table width or in number of pixels. It is also a Netscape specific attribute. The align and valign attributes are the same as the ones for the row tag. The nowrap attribute is used when no linebreaks are desired. The colspan attribute is used to specify how many columns that specific cell will be across. The rowspan attribute is used to specify how may rows the cell will be across.

That about covers all of the tags for a table with the exception of the <CAPTION> tag. It can be used to put a caption at the top or bottom of the table. However, it is rarely used. A table is finished with the closing </TABLE> tag. An example of what a basic table will look like is included below to clarify the arrangement of the table even further. On the following pages, examples of just about every possible table arrangement will be included. They won't include all of the possible arrangements, because there is an infinte amount of arrangements and they are limited only by the designer's imagination.