Men Of Diversion - www.menofdiversion.com

HOME
Photography
Humor
HTML Tutorial
HTML Tables
Potting Shed
MEMBERS ONLY

TC's Quick & Dirty HTML Tables Tutorial

Simple table, two rows (TR), 3 columns or data cells (TD)

#1	#2	#3
#4	#5	#6

<TABLE CELLPADDING="2" CELLSPACING="2" BORDER="1"> <TR> <TD>#1</TD> <TD>#2</TD> <TD>#3</TD> </TR> <TR> <TD>#4</TD> <TD>#5</TD> <TD>#6</TD> </TR> </TABLE> Paste the code above into an html document and change values for the table properties CELLPADDING, CELLSPACING, and BORDER to see how those properties work. For detailed information on other table properties including WIDTH, ALIGN, BGCOLOR, and more, click here. Tables are made up of table rows (TR) and columns or table data cells (TD). Any content in the table (text, images, etc.) must be inside a TD tag.

Example of using column span (COLSPAN) property of TD tag.

#1		#3
#4	#5	#6

<TABLE CELLPADDING="2" CELLSPACING="2" BORDER="1"> <TR> <TD COLSPAN="2">#1</TD> <TD>#3</TD> </TR> <TR> <TD>#4</TD> <TD>#5</TD> <TD>#6</TD> </TR> </TABLE> All rows (TR) in a table must have the same number of cells (TD). Sometimes, however, you want a cell to span multiple columns, effectively eliminating one or more TDs from the TR. Use of the COLSPAN property of the TD tag makes this possible. Paste the code above into your html document and see if you can get the cell in the first row to span all three columns correctly.

Example of using row span (ROWSPAN) property of TR tag.

#1	#2	#3
#1	#5	#6

<TABLE CELLPADDING="2" CELLSPACING="2" BORDER="1"> <TR> <TD ROWSPAN="2">#1</TD> <TD>#2</TD> <TD>#3</TD> </TR> <TR> <TD>#5</TD> <TD>#6</TD> </TR> </TABLE> Like COLSPAN, it is also possible for a TD to span multiple rows using the ROWSPAN property. In the example above, cell #1 in the first row effectively spans to the next row and becomes the first TD in the second row as well. Using ROWSPAN can get confusing as the table becomes larger and more spread out by content. If a third row was added to the table above, you might intend for the first TD to extend to the third row, so you would have to remember to change the ROWSPAN in the example to 3. I generally prefer to use an imbedded table as shown in the next example which gives a similar layout, rather than trying to code, maintain, and debug ROWSPANs.

Alternative solution to using ROWSPAN using an imbedded table.

#2	#3
#5	#6

<TABLE CELLPADDING="2" CELLSPACING="2" BORDER="1"> <TR> <TD>#1</TD> <TD>  <TABLE CELLPADDING="2" CELLSPACING="2" BORDER="1"> <TR> <TD>#2</TD> <TD>#3</TD> </TR> <TR> <TD>#5</TD> <TD>#6</TD> </TR> </TABLE>  </TD> </TR> <TR> </TABLE> In this example, the outer table has one row with two cells. The second cell contains a table with two rows and two cells. As you can see, this has the same basic layout as the previous example, is easier to maintain, and has less of a tendency to confuse browsers when the layout gets more complicated.

Simple table layout for a website

My Website
Link#1 Link#2 Link#3 Link#4	Main Content Area

<TABLE CELLPADDING="10" CELLSPACING="0" BORDER="0" WIDTH="100%"> <TR> <TD COLSPAN="2" BGCOLOR="#6666CC" ALIGN="center">My Website</TD> </TR> <TR> <TD BGCOLOR="red" VALIGN="top"> <A HREF="#">Link#1</A><BR> <A HREF="#">Link#2</A><BR> <A HREF="#">Link#3</A><BR> <A HREF="#">Link#4</A><BR> </TD> <TD WIDTH="100%"> Main Content Area<BR> </TD> </TR> </TABLE> Here I am using some properties of the TD tag, such as BGCOLOR, WIDTH, ALIGN, and VALIGN. The default horizontal alignment is "left". If you want centered content use ALIGN="center" or for right alignment, use ALIGN="right". The default vertical alignment is "middle". For top alignment use VALIGN="top" and for bottom alignment, use VALIGN="bottom". You can also add background images to TD cells using the BACKGROUND property. I encourage you to start with the code above and play with the different TD properties until you are familiar with them.

I have provided you with just a few basic examples to get you started experimenting with tables. For a more detailed treatment of table tags, you are welcome to visit Boogie Jack's information page on tables by clicking here.

TC is one of the founders of Men of Diversion and a member of The Big Three. He is a professional web developer with experience in html, web design, graphic manipulation, and scripting technologies. If you have any questions or comments about this tutorial, feel free to contact TC by sending an email to commander@menofdiversion.com.