tags and positioning elements more and more. Personally,I always like to use a little bit of . A little bit dab of CSS, little dab of JavaScript, little dab of Ajax, html, php, and I'm a happy camper. DIV's are cleaner no question, and you can position keyword rich HTML elements towards the top of your page, but if someone is using an older web browser your site would look messy; if that's even something to really be concerned about I don't know. If you want to have some fun download Netscape 4.79 and surf the web. It's pretty interesting.

Let's look at the basic elements of a table:

<TABLE>: -- defines the beginning of our table element.
<TR>(table row): -- defines a new row of our table.
<TD>(table dimension): -- defines a cell in that row.

Other tags are:

<TH>(table heading): This would be considered a heading but I honestly never use this tag or really see the benefits of using it at all.
<TBODY>(table body), <THEAD:>(table head),<TFOOT>(table foot): Again, I only use the 3 basic tags above and never use these tags at all. All I've ever needed was the basic 3.

For our first table we'll start with a basic table with 2 rows, and 1 cell in each row. I placed a border on this table for this example so that you can see where the table rows, and cells are.

Cell 1 in first Row

Cell 1 in second Row

Code

<table border="1"><TR> <TD>Cell 1 in first Row</TD> </TR><TR> <TD>Cell 1 in second Row</TD></TR> </TABLE>

Video Tutorial
Now that we've build our basic table, lets look at some of the other attributes we can use. In the next examples I'll show you some common html table attributes. A key thing to remember is that all your attributes go between the start of your tags: <TD ATTRIBUTE=""> and before the end of your tag.

BGCOLOR: background color. This can be used inside TABLE,TR,and TD tags.
BORDERCOLOR: Border Color, pretty much self explanatory.

Cell Row with a red background color	cell 2
Cell 1 in second Row with a silver background color	cell 2

Code

<table border="1" BGCOLOR="blue" BORDERCOLOR="black"><TR bgcolor="red"> <TD>Cell Row with a red background color</TD><TD>cell 2</TD> </TR><TR> <TD bgcolor="silver">Cell 1 in second Row with a silver background color</TD><TD>cell 2</TD></TR> </TABLE>

Video Tutorial
In the above example I used bgcolor="" attribute to make my tables background color blue and bordercolor="" to make the border color black: <table border="1" BGCOLOR="blue" BORDERCOLOR="black">. Aside from bordercolor, the same rule applies for rows and cells of your table.

BACKGROUND: Display a background image. This attribute can be used in your TABLE, and TD, tags.

These cells have a plad background image

Code

<table border="1" BGCOLOR="blue" BORDERCOLOR="black"><TR> <TD background="plad.jpg">These cells have a plad background image</TD><TD background="plad.jpg"> </TD> </TR> </TABLE>

Video Tutorial
I used background="" attribute to set a background image in top 2 table cells.

WIDTH & HEIGHT: This can be used inside your TABLE, and TD tags.

Cell 1 in table that is 400 pixels wide by 100 pixels high.	cell 2
Cell 1 in second Row with	cell 2

Code

<table border="1" BGCOLOR="blue" BORDERCOLOR="black" WIDTH="400" HEIGHT="100"><TR> <TD>Cell 1 in table that is 400 pixels wide by 100 pixels high.</TD><TD>cell 2</TD> </TR><TR> <TD>Cell 1 in second Row with</TD><TD>cell 2</TD></TR> </TABLE>

Video Tutorial
In the above example I used these attributes to make the width and height of my table 400 x 100 pixels:
<table border="1" BGCOLOR="silver" WIDTH="400" HEIGHT="100">.

ALIGN: This can be used inside your TABLE, and TD tags. ALIGN tag has 3 values, LEFT(by default), CENTER, & RIGHT. This attribute is used for aligning the table or the contents of your table cells.
VALIGN (vertical alignment): tag has 3 values as well, TOP, BOTTOM, and MIDDLE. This attribute is used for vertically aligning the contents of your table cells.

This Table is aligned to the center of the page.	cell 2 with text aligned centered
Cell 1 in third Row with text vertically aligned to the top of cell.	cell 2

Code

<table border="1" BGCOLOR="silver" BORDERCOLOR="black" WIDTH="400" HEIGHT="100" ALIGN="CENTER"><TR> <TD>This Table is aligned to the center of the page.</TD><TD ALIGN="CENTER">cell 2 with text aligned centered</TD> </TR><TR> <TD height="75" VALIGN="TOP">Cell 1 in third Row with text vertically aligned to the top of cell.</TD><TD> cell 2</TD></TR> </TABLE>

In the above example I used these attributes to align the table to the center of the page, center the text in cell 2, vertically align the text to the top of the cell in cell one of the second row.
<table border="1" BGCOLOR="silver" BORDERCOLOR="black" WIDTH="400" HEIGHT="100" ALIGN="CENTER">,
<TD ALIGN="CENTER">, <TD VALIGN="TOP">

COLSPAN & ROWSPAN: Column Span and Row Span. These attributes define how many rows or columns your table cell will run. This rule only applies to the <TD> tag.

Cell that spans 3 rows	plad background image.
	This Table is aligned to the center of the page.	cell 2 with text aligned centered
	Cell 1 in third Row with text vertically aligned to the top of cell.	cell 2
Table that spans 3 columns

Code

<table border="1" BGCOLOR="silver" BORDERCOLOR="black" WIDTH="400" HEIGHT="100" ALIGN="CENTER"><TR> <TD rowspan="3" bgcolor="white">Cell that spans 3 rows</TD><TD background="plad.jpg" colspan="2" align="center"> plad background image</TD></TR><TR> <TD>This Table is aligned to the center of the page.</TD><TD ALIGN="CENTER">cell 2 with text aligned centered</TD> </TR><TR> <TD height="75" VALIGN="TOP">Cell 1 in third Row with text vertically aligned to the top of cell.</TD><TD>cell 2</TD> </TR> <TR><TD colspan="3" align="center">Table that spans 3 columns</TD></TR> </TABLE>

In the above example I used rowspan=3 in the first cell in order for the first TD tag to span 3 rows, in the cell next to it I used a colspan=2 in order for the cell to span 2 columns, and in the very bottom cell I used a colspan of 3 in order for the cell to stretch the sell along the entire length of the table.

CELLPADDING & CELLSPACING: These attributes the padding and spacing between your table cells. This rule only applies to the <TABLE> tag.

Cell that spans 3 rows	All Cells Padded by 15 pixels and each cell is spaced by zero pixels
	This Table is aligned to the center of the page.	cell 2 with text aligned centered
	Cell 1 in third Row with text vertically aligned to the top of cell.	cell 2
Table that spans 3 columns

Code

<table border="1" BGCOLOR="silver" BORDERCOLOR="black" WIDTH="400" HEIGHT="100" ALIGN="CENTER" CELLPADDING="15" CELLSPACING="0"><TR> <TD rowspan="3" bgcolor="white">Cell that spans 3 rows</TD><TD background="plad.jpg" colspan="2" align="center"> All Cells Padded by 15 pixels and each cell is spaced by zero pixels</TD></TR><TR> <TD>This Table is aligned to the center of the page.</TD><TD ALIGN="CENTER">cell 2 with text aligned centered</TD> </TR><TR> <TD height="75" VALIGN="TOP">Cell 1 in third Row with text vertically aligned to the top of cell.</TD><TD>cell 2</TD> </TR> <TR><TD colspan="3" align="center">Table that spans 3 columns</TD></TR> </TABLE>

In the above example I used a cellpadding of 15 pixels, and cellspacing of zero pixels.

[Try It Out]
<table border="1" BGCOLOR="silver" BORDERCOLOR="black" WIDTH="400" HEIGHT="100" ALIGN="CENTER" CELLPADDING="15" CELLSPACING="0"><TR> <TD rowspan=3 bgcolor="white">Cell that spans 3 rows</TD><TD background="plad.jpg" colspan=2 align=center><font color=white>All Cells Padded by 15 pixels and each cell is spaced by zero pixels</font></TD></TR><TR> <TD>This Table is aligned to the center of the page.</TD><TD ALIGN="CENTER">cell 2 with text aligned centered</TD> </TR><TR> <TD height="75" VALIGN="TOP">Cell 1 in third Row with text vertically aligned to the top of cell.</TD><TD>cell 2</TD></TR> <TR><TD colspan=3 align=center>Table that spans 3 columns</TD></TR> </TABLE><BR> <BR>