HTML Coding - Tables

Tables can be very simple and easy to use but once You get confused with them they can become a headache fast! A good practice when working with tables is to indent a few spaces for every table You open, and then unindent as You close the table. The <TABLE> tag starts the table, and a row is started by using the <TR> (Table Row) tag. On this row each cell in the table must use the <TD> tag (Table Definition). All of these tags are open & close tags! Note that columns are verticle (up and down) while rows are horizontal (left to right).

Example 1 is the simplest table possible because it has one cell or one table definition. Notice BORDER="1" was used, that sets the size of the border to a width of 1 pixel around each cell and allows You to see the border, BORDER can be set from 0 to as large as You like. Also notice BGCOLOR="9999FF" that sets the table's BackGround color to blue, this color will be used for most of the following examples.

Example 1:

One

Code for Table 1:


			<TABLE BORDER="1" BGCOLOR="#CCCCFF">

			   <TR>

			   <TD>One</TD>

			   </TR>

			</TABLE>

Example 2 adds a second table definition and shows the <TD> </TD> tags are all inside the <TR> </TR> tags, this must be done for the table to know on what row to place the table's cells.

Example 2:

One

Two

Code for Example 2:


			<TABLE BORDER="1" BGCOLOR="#CCCCFF">

			   <TR>

			   <TD>One</TD>

			   <TD>Two</TD>

			   </TR>

			</TABLE>

Example 3 shows a few different size borders and No border (

BORDER="0"). Using no border can make a page intresting by using different colors in separate areas of a page, or by aligning text on one side or the other without displaying the borders, and without the borders it hardly looks like a table. Border defaults to "1" if it is omitted.

Example 3:

BORDER="0"

One

Two

BORDER="1"

One

Two

BORDER="2"

One

Two

BORDER="4"

One

Two

Code for Example 3:


			<TABLE BORDER="0" BGCOLOR="#CCCCFF">

			   <TR>

			   <TD>One</TD>

			   <TD>Two</TD>

			   </TR>

			</TABLE>

Note that where BORDER="0" the 0 had been replaced with 1, 2, and 4.

In Example 4 a second row is added, this is done by adding another <TR> to start the new row and </TR> to end this new row. Notice here that the columns auto adjust so that a column is the same width for all rows.

Example 4:

One	Two
Three	Four

Code for Example 4:


			<TABLE BORDER="1" BGCOLOR="#CCCCFF">

			   <TR>

			   <TD>One</TD>

			   <TD>Two</TD>

			   </TR>

			   <TR>

			   <TD>Three</TD>

			   <TD>Four</TD>

			   </TR>

			</TABLE>

Example 5 shows the effect that the CELLPADDING Parameter has on the table, notice the area around the cell's contents. CELLPADDING sets the pixel amount of space around each cell's contents, the tallest cell in a row sets that rows height, and the widest cell in a column sets that column's width. Cellpadding defaults to "1" if it is omitted.

Example 5:

CELLPADDING="0"

One	Two
Three	Four

CELLPADDING="1"

One	Two
Three	Four

CELLPADDING="2"

One	Two
Three	Four

CELLPADDING="4"

One	Two
Three	Four

Code for Example 5:


			<TABLE BORDER="1" BGCOLOR="#CCCCFF" CELLPADDING="X">

			   <TR>

			   <TD>One</TD>

			   <TD>Two</TD>

			   </TR>

			   <TR>

			   <TD>Three</TD>

			   <TD>Four</TD>

			   </TR>

			</TABLE>

Note that where CELLPADDING="0" the 0 had been replaced with 1, 2, and 4.

Example 6 shows the effect that the CELLSPACING Parameter has on the table, similar to CELLPADDING, CELLSPACING also sets the pixel amount of space but instead of the space around each cell's contents it changes the amount of space between cells. Notice the space between each cell (cell walls) changes with the CELLSPACING tag. Cellspacing defaults to "2" if it is omitted.

Example 6:

CELLSPACING="0"

One	Two
Three	Four

CELLSPACING="1"

One	Two
Three	Four

CELLSPACING="2"

One	Two
Three	Four

CELLSPACING="4"

One	Two
Three	Four

Code for Example 6:


			<TABLE BORDER="1" BGCOLOR="#CCCCFF" CELLSPACING="X">

			   <TR>

			   <TD>One</TD>

			   <TD>Two</TD>

			   </TR>

			   <TR>

			   <TD>Three</TD>

			   <TD>Four</TD>

			   </TR>

			</TABLE>

Note that where CELLSPACING="0" the 0 had been replaced with 1, 2, and 4.

Color Cooridinating Table and Chairs